Axios 的拦截器通过内部的Promise 链实现了对请求和响应的拦截与修改。了解其底层原理需要深入到 Axios 源码中，特别是其请求发起和响应处理的逻辑。

Axios 拦截器实现流程

1. 拦截器队列
   Axios 在内部维护了两个拦截器队列：request 和 response。当开发者通过 interceptors.request.use 或 interceptors.response.use 注册拦截器时，拦截器会被存入队列。

2. Promise 链
   每次调用 Axios 实例发起请求时，会依次将拦截器队列中的函数（请求/响应拦截器）和实际的请求函数组成一个 Promise 链。

3. 执行顺序

   • 请求拦截器按注册的顺序执行。
   • 响应拦截器按注册的顺序逆序执行。

核心源码分析

以下是 Axios 源码的关键部分，用于理解拦截器的实现。

1. 拦截器管理

Axios 内部的 InterceptorManager 类用于管理拦截器：

function InterceptorManager() {this.handlers = [];
}// 注册拦截器
InterceptorManager.prototype.use = function use(fulfilled, rejected) {this.handlers.push({fulfilled: fulfilled, // 成功处理函数rejected: rejected,   // 失败处理函数});return this.handlers.length - 1; // 返回拦截器的索引
};// 移除拦截器
InterceptorManager.prototype.eject = function eject(id) {if (this.handlers[id]) {this.handlers[id] = null; // 将对应的拦截器置为 null}
};

InterceptorManager 的核心功能是管理拦截器的添加和删除，所有的拦截器函数存储在 handlers 数组中。

---

2. 请求的 Promise 链构建

当调用 axios.request(config) 时，会构建一个基于拦截器的 Promise 链：

Axios.prototype.request = function request(config) {// 初始化配置config = config || {};// 将实际请求函数添加到链末尾let promise = Promise.resolve(config);// 构建拦截器链const chain = [];// 添加请求拦截器（顺序）this.interceptors.request.handlers.forEach((interceptor) => {if (interceptor !== null) {chain.push(interceptor.fulfilled, interceptor.rejected);}});// 添加实际的请求函数chain.push(dispatchRequest, undefined);// 添加响应拦截器（逆序）this.interceptors.response.handlers.forEach((interceptor) => {if (interceptor !== null) {chain.push(interceptor.fulfilled, interceptor.rejected);}});// 执行链条中的每个函数while (chain.length) {promise = promise.then(chain.shift(), chain.shift());}return promise;
};

在上面的实现中：

• dispatchRequest 是 Axios 实际发起网络请求的函数。
• 请求拦截器按注册的顺序加入链。
• 响应拦截器按逆序加入链。
• 最终，Promise 链依次执行每个拦截器和请求逻辑。

---

3. 实际请求的实现

dispatchRequest 负责发起 HTTP 请求并返回响应：

function dispatchRequest(config) {// 检查是否已取消请求if (config.cancelToken) {config.cancelToken.throwIfRequested();}// 发起请求return xhrAdapter(config).then((response) => {return response;},(error) => {return Promise.reject(error);});
}

xhrAdapter 是默认的适配器，用于在浏览器环境中通过 XMLHttpRequest 或 fetch 发起请求。

---

工作流程总结

1. 注册拦截器
   开发者通过 interceptors.request.use 和 interceptors.response.use 向 Axios 的拦截器队列中添加拦截函数。

2. 发起请求
   调用 axios(config) 时，Axios 会根据请求拦截器、实际请求函数和响应拦截器构建一个 Promise 链。

3. 执行链条
   按以下顺序依次执行：

   • 请求拦截器：按注册顺序执行。
   • 实际的请求函数：发送 HTTP 请求。
   • 响应拦截器：按注册顺序逆序执行。

4. 返回结果
   Promise 链最终返回请求的结果或抛出错误，供调用者处理。

---

图示说明

请求拦截器1 --> 请求拦截器2 --> dispatchRequest --> 响应拦截器2 --> 响应拦截器1

• 请求拦截器按顺序执行：请求拦截器1 → 请求拦截器2
• 响应拦截器按逆序执行：响应拦截器2 → 响应拦截器1

---

Axios 拦截器的特点

1. 链式结构：通过 Promise 链灵活地插入和执行拦截器。
2. 易扩展：通过 InterceptorManager 动态注册、移除拦截器。
3. 一致性：无论请求还是响应，拦截器均可统一添加逻辑。

通过上述机制，Axios 实现了强大且灵活的拦截器功能，开发者可以轻松扩展请求和响应的处理逻辑。