axios拦截器

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);        
}    
});