前言
在Vue中,对Axios进行二次封装可以提高代码的可重用性和可维护性。通过封装,我们可以将请求的配置、错误处理和拦截器等逻辑集中到一个地方,方便后续的修改和扩展。此外,封装Axios还可以简化代码,减少重复的请求配置,提高开发效率。因此,对Axios进行二次封装是Vue开发中一个非常实用的技巧。
1、教程步骤
1.npm或cnpm下载axios或
npm:
npm install axios -g
cnpm:
cnpm install axios -g
2.http.js
可以在src目录下建立http包,并在包内创建index.js,添加如下配置
javascript
import Axios from "axios";
import {MessageBox, Message} from 'element-ui'
import store from '../store/index'
import {getToken} from '@/utils/auth';
// 创建axios实例
const service = Axios.create({
baseURL: process.env.VUE_APP_BASE_API, //URL地址 环境变量文件 .env.development
timeout: 5000,//超时
withCredentials: false, //跨域时若要发生cookie,需要设置该选项
})
// 请求拦截器
service.interceptors.request.use(
config => {
// if (store.getters.token) {
// 设置令牌请求头
config.headers['authorization'] = getToken()?getToken():null;
// }
return config
},
error => {
return Promise.reject(error)
}
);
// 相应拦截
service.interceptors.response.use(
// 通过自定义code 判定响应状态 也可以通过HTTP状态码判断
response => {
const res = response.data;
// code 不为0 则判断为一个错误
if (res.code !== 20000) {
Message({
message: res.message || "Error",
type: 'error',
duration: 5 * 1000
});
// 假设 10008 非法令牌 10012 其他客户端已经登陆
if (res.code === 40001 || res.code === 10012) {
// 重新登陆
MessageBox.confirm(
'登陆状态异常,请重新登陆',
"确认登陆信息",
{
confirmButtonText: '重新登陆',
cancelButtonText: '取消',
type: 'warning'
}
).then(() => {
store.dispatch('user/resetToken')
.then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.message || 'Error'));
} else {
return res;
}
},
error => {
if (error.message.includes('timeout')) { // 如果错误信息中包含'timeout',则认为是连接超时
Message.error("网络超时");
}else{
Message.error("网络超时");
}
}
);
export default service;
3.使用
可以自己将不同模块请求进行封装,在其他地方直接调用即可
javascript
import service from "../index";
export const login = (params) => {
return service({
url: "/user/login",
method: "post",
data:params,
});
};