Axios通过拦截器和适配器实现请求的灵活处理与跨平台支持。拦截器基于Promise链式调用，按顺序执行请求/响应的预处理；适配器根据环境自动选择底层HTTP实现，如浏览器的XMLHttpRequest或Node.js的http模块，二者协同完成网络请求的统一管理与定制化扩展。
在现代前端开发中，网络请求是与后端交互的核心环节。Axios 作为一个基于 Promise 的 HTTP 客户端，因其简洁的 API 和强大的功能（如拦截器、请求/响应转换、错误处理等）被广泛使用。本文将深入解析 Axios 中两个关键机制：拦截器和适配器的工作原理。
拦截器（Interceptors）原理
Axios 的拦截器允许你在请求发送前或响应返回后，对请求配置或响应数据进行统一处理。比如添加认证头、日志记录、错误重试等。
拦截器的本质是一个发布-订阅模式的链式调用结构。Axios 内部维护了两个数组：
- 请求拦截器队列：用于处理 request config
- 响应拦截器队列：用于处理 response 或 error
当你通过 axios.interceptors.request.use() 或 axios.interceptors.response.use() 添加拦截器时，这些函数会被推入对应队列。
立即学习“Java免费学习笔记（深入）”；
当发起一个请求时，Axios 构建了一个“执行链”：
[请求拦截器... → 适配器 → 响应拦截器...]这个链通过 Promise 链式调用串联起来。例如：
promise = Promise.resolve(config) promise = promise.then(requestInterceptor1) promise = promise.then(requestInterceptor2) promise = promise.then(dispatchRequest) // 实际发送请求 promise = promise.then(responseInterceptor1) promise = promise.then(responseInterceptor2)
这样设计的好处是：
- 可以异步处理请求/响应（拦截器可返回 Promise）
- 支持多个拦截器按顺序执行
- 异常能被后续的 catch 捕获并传递给响应拦截器的 error 分支
适配器（Adapter）原理
适配器是 Axios 实现跨平台请求的核心。它屏蔽了不同环境下的底层请求实现差异，比如浏览器中使用 XMLHttpRequest，Node.js 中使用 http 模块。
Axios 在初始化时会根据运行环境自动选择合适的适配器：
- 浏览器环境 → 使用 XMLHttpRequest 或 fetch
- Node.js 环境 → 使用内置的 http 和 https 模块
适配器是一个函数，接收一个配置对象（config），返回一个 Promise，resolve 接口响应或 reject 错误。
你可以自定义适配器，比如用于测试时模拟响应：
axios.get('/user', {
adapter: function (config) {
return new Promise((resolve) => {
resolve({
data: { id: 1, name: 'Mock User' },
status: 200,
statusText: 'OK',
headers: {},
config: config,
request: config
});
});
}
});
这种设计体现了“依赖倒置”原则：高层模块（Axios 核心）不依赖具体实现，而是通过适配器接口与底层通信。
拦截器与适配器的协作流程
一次完整的请求流程如下：
- 用户调用 axios.get('/url')
- 请求经过所有注册的请求拦截器处理（如添加 token）
- 最终交由适配器执行实际的网络请求
- 适配器返回 Promise，响应进入响应拦截器链
- 响应数据可被格式化、错误统一处理等
- 最终结果返回给用户 .then() 或 .catch()
这种分层架构使得 Axios 具有高度可扩展性和灵活性。
基本上就这些。理解拦截器的链式 Promise 调用和适配器的环境抽象机制，有助于更好地使用 Axios 进行项目开发，也能为设计类似的工具库提供思路。
