Vue 项目中 axios 的二次封装
Vue 项目使用过程中一般会对 axios 进行二次封装, 以期在合适的时机处理一些全局的需求, 比如常见的 请求拦截器 和 响应拦截器. 接下来简单聊聊具体的操作步骤.
1, 下载 axios 模块
执行以下指令:
bash
import axios from 'axios';
2, 封装
在 src 文件夹下创建 api 文件夹, 并创建 index.js、axios.js 和 users.js 文件.
index.js 文件的作用的将当前项目中所有的 api 文件统一导入并导出, 这样将来在使用时, 外界直接直接 import 这个 api 的 index.js 文件就行, 即使后期有位置上的变化, 也不用在每个 api 的引入文件中修改, 方便管理和维护.
axios.js 文件的目的就是 axios 的二次封装.
users.js 文件中仅封装了与 /users 相关的 api.
后期还可以根据需求创建更多的 xxx.js 文件来做 api 的封装管理.
3, axios.js 文件
接下来聊聊关于 axios 的二次封装, 废话不多说, 直接上代码
javascript
import axios from 'axios';
// 基本配置
const instance = axios.create({
baseURL: 'http://localhost:3000/', // 根据实际情况修改API地址
timeout: 5000 // 设置超时时间,单位为ms
});
// 请求拦截器
instance.interceptors.request.use(config => {
config.headers['Authorization'] = localStorage.getItem('token'); // 设置请求头部分,这里举例使用了localStorage存储的token作为身份标识
return config;
}, error => {
console.log(error);
return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(response => {
const data = response.data;
if (data && data.code !== 200) { // 根据接口返回的状态码判断是否有错误
alert(`Error code ${data.code}: ${data.message}`); // 自定义错误提示
return Promise.reject(new Error(data.message));
} else {
return data;
}
}, error => {
console.log(error);
return Promise.reject(error);
});
export default instance;
4, users.js 文件
示例代码如下:
javascript
import axios from "./axios";
const users = {
getUser: (params) => {
return axios.get(`/users`, { params });
},
}
export default users;
5, index.js 文件
示例代码如下:
javascript
import users from "./users";
export default {
...users,
}
接下来就可以在具体的 .vue 文件中导入 api 来调用了.
本章完!