5月29日 22:54

axios 底层是怎么实现的?核心架构和请求流程是怎样的?

axios 本质是 请求/响应拦截器管道 + 适配器模式,核心流程为:配置合并 → 请求拦截器 → 分发请求 → 响应拦截器 → 返回结果。

适配器模式: axios 不直接发请求,而是通过 adapter 抽象层。浏览器环境用 xhr.js(基于 XMLHttpRequest),Node 环境用 http.js(基于 Node 的 http/https 模块)。通过 adapter 配置项可自定义适配器,这是 axios 跨平台的关键。

拦截器机制: 维护两个链式数组 request interceptorsresponse interceptors,每个拦截器有 fulfilled 和 rejected 两个回调。请求时将配置、拦截器和 adapter 按 Promise 链顺序串联执行,形成 [req1 → req2 → ... → adapter → ... → res2 → res1] 的管道。

配置合并策略: 三层配置合并——默认配置(defaults)→ 实例配置(instance.defaults)→ 请求配置(请求参数),通过 mergeConfig 按策略合并,headers 单独处理。

请求流程: axios.request() 是统一入口,其他方法(get/post 等)最终都调用 request。内部创建 Promise 链,将拦截器成对插入链的两端,adapter 在链中间执行实际请求,支持取消(CancelToken)和超时控制。

追问:

  1. 拦截器的执行顺序是什么?请求拦截器和响应拦截器分别是正序还是逆序?
  2. 如何自定义 adapter 实现 Mock 数据或缓存层?
  3. CancelToken 基于什么原理实现的?为什么新增 AbortController 方案?
  4. mergeConfig 对不同类型的配置项(如 headers、transformRequest)采用了什么合并策略?
  5. axios 的 Promise 链如果中间某个拦截器抛异常,后续拦截器还能执行吗?
标签:JavaScript前端Axios