在Vue项目中封装接口通常是指将HTTP请求(如GET、POST等)封装成可复用的函数或方法,以便于在组件中方便地调用。这样的封装有助于减少代码重复,增强代码的可维护性和可读性。以下是一个基于Vue和Axios(一个基于Promise的HTTP客户端,用于浏览器和node.js)的接口封装示例。
1. 安装Axios
首先,确保你的项目中已经安装了Axios。如果还没有安装,可以通过npm或yarn来安装它:
npm install axios
# 或者
yarn add axios
2. 创建API服务
在项目的src
目录下,你可以创建一个api
目录,并在其中创建一个index.js
文件(或根据需要分成多个文件),用于定义和导出你的API服务。
// src/api/index.js
import axios from 'axios';
// 创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // api的base_url
timeout: 5000 // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
config => {
// 在发送请求之前做些什么
// 例如设置请求头
if (store.getters.token) {
config.headers['X-Token'] = getToken();
}
return config;
},
error => {
// 对请求错误做些什么
console.error('请求出错:', error); // for debug
Promise.reject(error);
}
);
// 响应拦截器
service.interceptors.response.use(
response => {
/**
* code为非200是抛错 可通过配置白名单 字典来对接接口状态码
* 附带错误信息
* 以下为简单处理,根据业务需求,可以调整
*/
const res = response.data;
if (res.code !== 200) {
console.error('错误码:', res.code); // for debug
// 可以在这里处理错误,比如使用Message.error等
return Promise.reject(new Error(res.message || 'Error'));
} else {
return res;
}
},
error => {
console.error('响应出错:', error); // for debug
return Promise.reject(error);
}
);
// 示例API
export function fetchUser(userId) {
return service.get(`/users/${userId}`);
}
export function postData(url, data) {
return service.post(url, data);
}
// 导出service,可能其他页面也需要使用
export default service;
3. 在组件中使用API
现在,你可以在Vue组件中通过导入API服务来使用封装的接口了。
<template>
<div>
<button @click="getUser">获取用户信息</button>
</div>
</template>
<script>
import { fetchUser } from '@/api/index'; // 根据实际路径导入
export default {
methods: {
async getUser() {
try {
const user = await fetchUser(1); // 假设获取用户ID为1的用户信息
console.log(user);
} catch (error) {
console.error('获取用户信息失败:', error);
}
}
}
}
</script>
结论
以上就是一个基本的Vue项目中封装接口的例子。通过Axios实例的配置和拦截器的使用,你可以很方便地管理请求和响应的公共逻辑,如设置请求头、处理响应数据等。同时,将接口封装成独立的函数,有助于保持组件的简洁和复用性。