关于SegmentFault:axios-拦截器的设计与实现

简介

Axios 是一个基于 Promise 的 HTTP 客户端，同时反对浏览器和 Node.js 环境。它是一个优良的 HTTP 客户端，被宽泛地利用在大量的 Web 我的项目中。具体介绍可见官网文档

对于大多数利用来说，都会遇到要对立解决 ajax 申请的场景，为了较好地解决这个问题，拦截器就应运而生了。
在 Axios 中它提供了申请拦截器和响应拦截器来别离解决申请和响应，它们的作用如下：

• 申请拦截器：该类拦截器的作用是在申请发送前对立执行某些操作，比方在申请头中增加 token 字段。
• 响应拦截器：该类拦截器的作用是在接管到服务器响应后对立执行某些操作，比方发现响应状态码为 401 时，主动跳转到登录页。

接下来，本文将通过 axios 源码来论述拦截器是如何设计实现的。

设计与实现

工作的注册

首先以上面的代码为例，通过 use 将办法注册到拦截器中

// request interceptor
axios.interceptors.request.use(
  config => {console.log('config', config);
    return config;
  },
  err => Promise.reject(err),
);

// response interceptor
axios.interceptors.response.use(response => {console.log('response', response);
  return response;
});

// axios/lib/core/InterceptorManager.js
// 在拦截器治理类中通过 use 办法向工作列表中增加工作
InterceptorManager.prototype.use = function use(fulfilled, rejected) {
  this.handlers.push({
    fulfilled: fulfilled,
    rejected: rejected
  });
  return this.handlers.length - 1;
};

工作的编排

// 先看 lib/axios.js(入口文件) 中的创立实例的办法
function createInstance(defaultConfig) {var context = new Axios(defaultConfig);

  // REVIEW[epic=interceptors,seq=0] 在 axios 对象上绑定 request 办法，使得 axios({option}) 这样的形式即可调用 request 办法
  var instance = bind(Axios.prototype.request, context);

  // Copy axios.prototype to instance
  utils.extend(instance, Axios.prototype, context);

  // Copy context to instance
  utils.extend(instance, context);

  return instance;
}
// 重点在于 Axios.prototype.request
Axios.prototype.request = function request(config) {
    // ... 已省略局部代码
  // Hook up interceptors middleware
  // REVIEW[epic=interceptors,seq=2] dispatchRequest 为咱们应用 axios 时，我的项目中调用的申请
  var chain = [dispatchRequest, undefined];
  var promise = Promise.resolve(config);

  // REVIEW[epic=interceptors,seq=4] 向拦截器工作列表的头部注册 request 工作
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {chain.unshift(interceptor.fulfilled, interceptor.rejected);
  });

  // REVIEW[epic=interceptors,seq=5] 向拦截器工作列表的尾部注册 response 工作
  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {chain.push(interceptor.fulfilled, interceptor.rejected);
  });
  // 通过下面的注册形式，咱们能够晓得最初的 chain 数组会长成的样子是：// [...requestInterceptor, dispatchRequest,undefined, ...responseInterceptor]
  // 这样就保障了拦截器执行的程序

  while (chain.length) {
    // 因为是成对注册的工作（fulfilled, rejected）所以执行的时候也是 shift2 次
    promise = promise.then(chain.shift(), chain.shift());
  }
  return promise;
};

能够看出通过从不同的地位向工作列表中增加工作，实现了工作的编排，达到了按 requestInterceptor => Request => responseInterceptor 程序执行的目标

工作的调度

工作的调度次要是看下面 request 函数中的这一行

  var promise = Promise.resolve(config);
  while (chain.length) {
    // 因为是成对注册的工作（fulfilled, rejected）所以执行的时候也是 shift2 次
    promise = promise.then(chain.shift(), chain.shift());
  }

能够看出就是按注册的程序顺次执行，并且每个工作中都须要返回 config。

结语

在这次的源码浏览时，显著感觉到，因为之前几次的积攒，读源码这件事开始变得没有那么的“艰难”了。然而在写文档的时候如何更清晰地表白，还是遇到了点问题。因而借鉴了下网上已有的文档，应用了工作注册 => 工作编排 => 任务调度，以工作为视角来做解析的形式来论述代码。