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

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