axios 源码解析(下) 拦截器的详解

By | 2019年10月11日

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)向服务器发送请求时,在做派发更新前会优先执行请求拦截器,等到数据接收后会执行响应拦截器,有不懂的欢迎留言!

发表评论