axios.interceptors的使用
axios.interceptors有两种,一是请求拦截,二是返回拦截。
一、请求拦截
使用场景
1.在请求时在请求参数上统一添加参数,
axios.interceptors.request.use(config=>{
if(config.method=='post'){
config.data = {
...config.data,
"paramsName": params,
}
}else if(config.method=='get'){
config.params = {
"paramsName":params,
...config.params
}
}
return config;
},err=>{
return Promise.reject(err);
});
这样就可以将你的参数添加在请求当中了。
二、结果拦截
使用场景,验证token是否过期
axios.interceptors.response.use(response=>{
},error => {
if(error.response.status === 401){
//对应的token过期的操作
}
return Promise.resolve(error.response)
});
这里要注意的是,看你前后端阅读401的返回,一般是报错,所以你的response是空的,你需要在error的回调里面去进行相关的处理。
axios的全局拦截
vue项目里,每一个文件,没一个模块都可能调用接口,那么就有请求正常、请求出错的情况,请求正常里又有成功返回数据和出现错误的情况,如果每次调用接口都重新写一遍逻辑,是很没必要的,那么有没有办法能把公共的业务逻辑抽离出来呢?
答案当然是有的。
在入口文件main.js里使用axios的全局拦截器axios.interceptors,同时可以结合vue-router来处理请求之后的各种跳转等等。
大概配置如下,可根据具体情况自己改写:
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
// if (response.status === 200) {
// return Promise.resolve(response);
// } else {
// return Promise.reject(response);
// }
if (response.data.success || response.data.success === undefined) {
console.log(iView);
iView.Message.info("response.data.error");
return Promise.resolve(response);
} else {
iView.Message.info("response.data.error");
return Promise.reject(response);
} },
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作,例如登录过期提示,错误提示等等
// 下面列举几个常见的操作,其他需求可自行扩展
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
// router.replace({
// path: "/login",
// query: {
// redirect: router.currentRoute.fullPath
// }
// });
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
// Toast({
// message: "登录过期,请重新登录",
// duration: 1000,
// forbidClick: true
// });
// // 清除token
// localStorage.removeItem("token");
// store.commit("loginSuccess", null);
// // 跳转登录页面,并将要浏览的页面fullPath传过去,
//登录成功后跳转需要访问的页面
// setTimeout(() => {
// router.replace({
// path: "/login",
// query: {
// redirect: router.currentRoute.fullPath
// }
// });
// }, 1000);
break;
// 404请求不存在
case 404:
// Toast({
// message: "网络请求不存在",
// duration: 1500,
// forbidClick: true
// });
break;
// 其他错误,直接抛出错误提示
default:
// Toast({
// message: error.response.data.message,
// duration: 1500,
// forbidClick: true
// });
}
return Promise.reject(error.response);
}
});