深入明白 Axios 拦截器的执行链机制

打印 上一主题 下一主题

主题 1038|帖子 1038|积分 3118

深入明白 Axios 拦截器的执行链机制

在现代前端开发中,Axios 是最流行的 HTTP 请求库之一,而 拦截器(Interceptor)功能是其核心特性之一。通过拦截器,我们可以在请求发送前或相应返回后进行灵活的预处理或后处理。然而,许多人并不了解拦截器在 Axios 内部是怎样构建和执行的。本文将深入剖析 Axios 拦截器的 执行链机制,帮助更多开发者掌握这一重要知识。

1. Axios 拦截器的结构

拦截器分为两类:


  • 请求拦截器(Request Interceptors):在请求被发送前执行,可以用来修改请求设置(如添加认证 Token)。
  • 相应拦截器(Response Interceptors):在请求返回后执行,可以用来处理相应数据或错误(如统一错误处理)。
拦截器存储结构

Axios 利用一个 InterceptorManager 类来管理拦截器。每个拦截器由两个回调函数组成:fulfilled(乐成时执行)和 rejected(失败时执行)。这些拦截器被生存在 handlers 数组中。
  1. class InterceptorManager {
  2.   constructor() {
  3.     this.handlers = []; // 存储拦截器的数组
  4.   }
  5.   use(fulfilled, rejected) {
  6.     this.handlers.push({ fulfilled, rejected });
  7.     return this.handlers.length - 1; // 返回拦截器索引,用于删除
  8.   }
  9.   eject(id) {
  10.     if (this.handlers[id]) {
  11.       this.handlers[id] = null; // 通过索引禁用拦截器
  12.     }
  13.   }
  14. }
复制代码

2. Axios 拦截器的执行链

Axios 的执行链是一个由 Promise 串联的动态数组,其结构如下:
拦截器执行链的三部分


  • 左侧:请求拦截器(Request Interceptors)

    • 顺序:按照注册顺序的 逆序 执行(后注册的先执行)。
    • 作用:在请求被发送之前对设置对象进行处理。

  • 中间:核心逻辑(dispatchRequest)

    • 负责实际的 HTTP 请求。
    • 分隔了请求拦截器和相应拦截器。

  • 右侧:相应拦截器(Response Interceptors)

    • 顺序:按照注册顺序的 正序 执行(先注册的先执行)。
    • 作用:在请求返回后对相应数据进行处理。

执行链的构建代码

以下是 Axios 拦截器执行链的源码片断:
  1. Axios.prototype.request = function request(config) {
  2.   const chain = [dispatchRequest, undefined]; // 中间逻辑初始化
  3.   let promise = Promise.resolve(config); // 初始化 Promise 链
  4.   // 添加请求拦截器(从前插入,后注册的先执行)
  5.   this.interceptors.request.forEach((interceptor) => {
  6.     chain.unshift(interceptor.fulfilled, interceptor.rejected || undefined);
  7.   });
  8.   // 添加响应拦截器(从后追加,先注册的先执行)
  9.   this.interceptors.response.forEach((interceptor) => {
  10.     chain.push(interceptor.fulfilled, interceptor.rejected || undefined);
  11.   });
  12.   // 执行拦截器链
  13.   while (chain.length) {
  14.     promise = promise.then(chain.shift(), chain.shift());
  15.   }
  16.   return promise;
  17. };
复制代码

3. 请求拦截器与相应拦截器的执行顺序

通过上面的代码可以看出,Axios 是怎样动态构建拦截器链的。下面以一个例子说明拦截器的执行顺序:
示例代码

  1. // 注册两个请求拦截器
  2. axios.interceptors.request.use((config) => {
  3.   console.log('请求拦截器 1');
  4.   return config;
  5. });
  6. axios.interceptors.request.use((config) => {
  7.   console.log('请求拦截器 2');
  8.   return config;
  9. });
  10. // 注册两个响应拦截器
  11. axios.interceptors.response.use((response) => {
  12.   console.log('响应拦截器 1');
  13.   return response;
  14. });
  15. axios.interceptors.response.use((response) => {
  16.   console.log('响应拦截器 2');
  17.   return response;
  18. });
  19. // 发起请求
  20. axios.get('/example');
复制代码
执行链的构建效果

  1. [请求拦截器 2, 请求拦截器 1, dispatchRequest, undefined, 响应拦截器 1, 响应拦截器 2]
复制代码
执行顺序


  • 请求拦截器(从左到中间):

    • 请求拦截器 2
    • 请求拦截器 1

  • 核心逻辑(中间部分):

    • dispatchRequest 执行实际的 HTTP 请求。

  • 相应拦截器(从中间到右):

    • 相应拦截器 1
    • 相应拦截器 2

终极输出:
  1. 请求拦截器 2
  2. 请求拦截器 1
  3. 响应拦截器 1
  4. 响应拦截器 2
复制代码

4. 拦截器中的 unshift 与 push

在 Axios 的源码中,拦截器的添加方式直接影响了执行顺序:

  • 请求拦截器
    利用 unshift 添加到数组头部,确保后注册的拦截器优先执行。
    1. chain.unshift(interceptor.fulfilled, interceptor.rejected);
    复制代码
  • 相应拦截器
    利用 push 添加到数组尾部,确保先注册的拦截器优先执行。
    1. chain.push(interceptor.fulfilled, interceptor.rejected);
    复制代码

5. 为什么要分隔拦截器?

在 Axios 中,dispatchRequest 既是 HTTP 请求的核心逻辑,也是请求和相应拦截器的自然分隔点。分隔的意义如下:

  • 分工明确

    • 请求拦截器仅处理请求数据(如添加认证信息、修改 URL)。
    • 相应拦截器仅处理返回数据(如解析 JSON、统一错误处理)。

  • Promise 链式调用的完整性

    • Axios 通过 undefined 占位确保 Promise 链不会断裂,即使某个拦截器没有 rejected 方法。


6. 总结

Axios 的拦截器机制为开发者提供了强大的灵活性和扩展性,其核心逻辑包括:


  • 请求拦截器通过 unshift 插入链头,保证后注册的拦截器优先执行。
  • 相应拦截器通过 push 插入链尾,保证先注册的拦截器优先执行。
  • 中间逻辑 dispatchRequest 是请求和相应的分界点。
  • 利用动态链式调用确保拦截器的执行顺序和逻辑一致性。
掌握拦截器的内部实现,有助于我们更高效地调试和优化代码。希望本文能够帮助更多开发者深入明白 Axios 的核心原理,进而提升开发服从!

假如您觉得这篇文章对您有所帮助,接待点赞、转发,或留下评论一起讨论!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

东湖之滨

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表