关于javascript:Axios部分源码解析拦截器

原文链接

在 Axios 中拦截器是如何注册和调用的呢？上面咱们一起来看看

浏览器端 Axios调用流程如下：

初始化 Axios——> 注册拦截器 ——> 申请拦挡——> ajax 申请 ——> 响应拦挡 ——> 申请响应回调

Axios 初始化

第一步：当然调用 Axios 申请时初始化了

// 初始化 Axios
function Axios(instanceConfig) {
  this.defaults = instanceConfig;
  this.interceptors = {request: new InterceptorManager(),
    response: new InterceptorManager()};
}

module.exports = Axios;

InterceptorManager 和 InterceptorManager 函数别离是是 request 拦截器和 response 拦截器，注册拦截器回调函数，这里只会讲 /申请拦截器 /，因为响应拦截器根本也是这个流程；这样咱们应用axios.request.use 来增加拦截器函数时，理论就是 InterceptorManager 实例对象办法，那么这里 InterceptorManager 函数做了什么呢？

InterceptorManager 注册拦挡函数

function InterceptorManager() {this.handlers = [];
}

// 负责将拦挡回调函数保留在 handlers 中
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
  this.handlers.push({
    fulfilled: fulfilled,
    rejected: rejected
  });
  return this.handlers.length - 1;
};

通过 axios.request.use 和axios.response.use申请、回调拦截器增加拦截器，理论就是调用用 InterceptorManager 下的 use 办法，将回调函数保留在 this.handlers 数组中。

调用拦截器函数和申请函数

一下就是调用申请的理论代码，调用 Axios 下的 request 办法，同时也会先进行一次参数合并

this.request(mergeConfig(config || {}, {
  method: method,
  url: url,
  data: (config || {}).data
}));

上面就是 request 办法的理论代码，如下：

Axios.prototype.request = function request(config) {
  // dispatchRequest 函数即 ajax 申请函数
  var chain = [dispatchRequest, undefined];
  var promise = Promise.resolve(config);

  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {chain.unshift(interceptor.fulfilled, interceptor.rejected);
  });

  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {chain.push(interceptor.fulfilled, interceptor.rejected);
  });

  // 组装 Promise 调用链, 实现链式调用
  while (chain.length) {promise = promise.then(chain.shift(), chain.shift());
  }

  return promise;
};

在下面的代码中 chain 变量的理论值是这样的：

chain = [申请回调拦挡函数, 申请异样回调拦挡函数, dispatchRequest, undefined, 响应回调拦挡函数, 响应异样回调拦挡函数]

而后通过循环，应用 Promise 链式调用，来实现 申请拦挡——> ajax 申请 ——> 响应拦挡 的性能，最初将后果 return 进去，十分的奇妙！！

看上面的就了解了????

<center>（图起源自转载）</center>

参考：

77.9K Star 的 Axios 我的项目有哪些值得借鉴的中央

Axios 拦截器外围源码