Axios源码解析：请求响应拦截器

合集 - 前端开发(23)

1.第一次写博客，关于前端开发deMVC在js中的应用2016-07-122.react开发中的小细节2017-03-193.CSS开启硬件加速来提高网站性能2019-06-174.js中this的指向问题2019-06-105.Js面向对象构造函数继承2017-03-266.Js面向对象原型~构造函数2017-03-197.JavaScript如何工作：垃圾回收机制 + 常见的4种内存泄漏2019-10-288.Promise核心原理解析2019-09-279.图解javascript的this指向2019-09-1210.图解javascript原型链2019-09-0611.被闭包啪啪啪的打脸之 闭包的错误使用2019-08-2812.react解析: render的FiberRoot(三)2019-08-1013.个人小程序应用开发指南2019-07-2214.ES2019 / ES10有什么新功能?2019-06-2115.2022前端开发知识总结归纳（前端掌握知识）2022-10-31

16.Axios源码解析：请求响应拦截器2021-12-02

17.AntV G2可视化引擎, 有用过嘛？2021-11-3018.弄懂！ES6中的Iterator迭代器2020-06-1019.🔥[译] 正交设计组件的好处2020-01-0920.小程序开发指南之性能优化2019-12-0421.聊一聊，React开发中应该规避的点2019-11-2622.解析：让你弄懂redux原理2019-11-0523.关于Web GIS基础知识2024-03-26

收起

原文链接

在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出来，非常的巧妙！！

看下面的就理解了?

（图来源自转载）

参考：

77.9K Star 的 Axios 项目有哪些值得借鉴的地方

Axios拦截器核心源码