axios的除了初始化配置外,其它有用的应该就是拦截器了,拦截器分为请求拦截器和响应拦截器两种:
请求拦截器 ;在请求发送前进行一些操作,例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易。
响应拦截器 ;是在接收到响应后进行一些操作,例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页。
请求拦截器可以在请求前拦截数据,格式:
axios.interceptors.request.use(function (config) {
//在发送请求之前做些什么
return config;
}, function (error) {
//对请求错误做些什么
return Promise.reject(error);
});
请求拦截器内处理完毕后需要返回参数,也就是config这个配置参数
writer by:大沙漠 QQ:22969969
响应拦截器是在接收到响应后进行一些操作,格式:
axios.interceptors.response.use(function (response) {
//对响应数据做点什么
return response;
}, function (error) {
//对响应错误做点什么
return Promise.reject(error);
});
请求拦截器内处理完毕后需要返回参数1,也就是response这个响应头
拦截器设置后返回的是该拦截器在内部数组的一个索引,可以调用对应拦截器的eject(index)来移除拦截器,格式:
let id1 = axios.interceptors.request.use(function(config){ //添加一个请求拦截器
console.log(config)
return config;
},function(err){})
axios.interceptors.request.eject(id1) //移除该请求拦截器 let id2 = axios.interceptors.response.use(function(response){ //添加一个响应拦截器
console.log(response)
return response;
},function(err){})
axios.interceptors.response.eject(id2) //移除该响应拦截器
当然,我们可以同时添加一个或多个拦截器,只要将参数返回就可以了
如果在element-ui+vue的项目中,经常用到的一个场景就是通过滚动条来自动设置加载中的图标。
axios在初始化的时候调用createInstance创建实例的时候执行了一条utils.extend(instance, context);代码,这行代码执行完后返回的实例就可以通过axios.interceptors去设置拦截器了。
axios对拦截器的实现是通过./lib/core/InterceptorManager模块来管理的,当我们调用axios.interceptors.request.use或者axios.interceptors.response.use添加拦截器时都会执行到InterceptorManager原型上的use()方法,如下:
InterceptorManager.prototype.use = function use(fulfilled, rejected) { //添加一个新的拦截器 fulfilled:成功函数 rejected:失败函数
this.handlers.push({ //添加到this.handlers数组里面
fulfilled: fulfilled,
rejected: rejected
});
return this.handlers.length - 1; //返回索引
};
就是新增到thishandlers而已,对于移除来说,是执行InterceptorManager原型上的eject()方法,如下:
InterceptorManager.prototype.eject = function eject(id) { //移除一个拦截器 id:该拦截器的索引
if (this.handlers[id]) { //如果存在
this.handlers[id] = null; //则设置其为null
}
};
就是简单的把值设置为null,然后发送axios(config)向服务器发送请求时,在做派发更新前会优先执行请求拦截器,等到数据接收后会执行响应拦截器,有不懂的欢迎留言!