页面发送http请求,很多情况我们要对请求和其响应进行特定的处理;如果请求数非常多,单独对每一个请求进行处理会变得非常麻烦,程序的优雅性也会大打折扣。好在强大的axios为开发者提供了这样一个API:拦截器。拦截器分为 请求(request)拦截器和 响应(response)拦截器。
1、请求拦截器
发送请求前统一处理,如:设置请求头headers、应用的版本号、终端类型等,用法如下:
axios.interceptors.request.use(
config => {
//do something like this
config.headers.common['X-APP-SOURCE'] = "h5";
config.headers.common['X-APP-VERSION'] = "1.4.5";
return config
},
err => {
return Promise.reject(err)
})
2、响应拦截器
有时候我们要根据响应的状态码来进行下一步操作,例如:由于当前的token过期,接口返回401未授权,那我们就要进行重新登录的操作,用法如下:
axios.interceptors.response.use(function(res){
//do something like this
switch (res.data.code) {
case 401: router.push({path: '/login'});
......
}
return res;
},function(err){
return Promise.reject(err);
});