一、引言

Axios 作为一个流行的基于 Promise 的 HTTP 客户端，被广泛应用于前后端数据交互。深入理解 Axios 的源码，不仅能帮助我们更好地使用它，还能提升我们的编程能力和对 HTTP 请求库的理解。本文将从 axios - 1.x 的目录结构开始，逐步解析其源码结构和核心功能。

二、架构全景

2.1 Axios 的目录结构

axios-1.x/
└── lib/
    ├── adapters/          # 跨平台适配层
    │   ├── http.js               # Node环境适配器（基于http模块）
    │   └── xhr.js                # 浏览器环境适配器（基于XMLHttpRequest）
    ├── cancel/            # 请求取消体系
    │   ├── CancelToken.js        # 取消令牌实现
    │   └── CanceledError.js      # 取消异常类型
    ├── core/              # 核心处理引擎
    │   ├── Axios.js              # 主类（请求调度中心）
    │   ├── InterceptorManager.js # 拦截器管理系统
    │   └── dispatchRequest.js    # 请求分发器
    ├── helpers/           # 工具库
    │   ├── bind.js               # 函数绑定工具
    │   └── spread.js             # 参数展开器
    ├── defaults/          # 默认配置体系
    │   └── index.js              # 多层级配置管理
    └── env/               # 环境元数据
    ├── utils/             # 通用工具库（类型判断/数据处理）
    └── axios.js           # 入口文件（用户选中代码所在）

2.2 Axios 的模块功能解析

Axios 的源码采用模块化设计，核心代码集中在/lib目录下，以下是关键模块功能解析：

2.2.1 实例化过程（axios.js）

function createInstance(defaultConfig) {
  const context = new Axios(defaultConfig);
  const instance = bind(Axios.prototype.request, context);
  
  // 原型方法继承
  utils.extend(instance, Axios.prototype, context);
  
  // 实例属性拷贝
  utils.extend(instance, context);
  
  // 工厂方法注入
  instance.create = function(instanceConfig) {
    return createInstance(mergeConfig(defaultConfig, instanceConfig));
  };
  
  return instance;
}

设计模式分析：工厂模式+混入模式，实现多实例配置隔离

2.2.2 请求生命周期

2.2.3 配置合并策略

// defaults.js -> 优先级体系
const defaults = {
  adapter: ['xhr', 'http'],
  transformRequest: [/*...*/],
  transformResponse: [/*...*/]
};

// mergeConfig.js -> 合并算法
function mergeConfig(config1, config2) {
  // 深度合并逻辑
  return resultConfig;
}

配置优先级：全局默认 < 实例配置 < 请求配置

2.3 Axios 的核心模块依赖架构

2.3.1 架构图说明

1. 入口层（axios.js）

• 功能枢纽：通过 createInstance 创建默认实例，集中挂载所有核心模块
• 关键依赖：

• createInstance 工厂函数（构建实例的骨架）
• Axios 类原型方法（实现请求核心逻辑）
• Cancel 模块（实现请求取消能力）

2. 核心类（Axios Class）

class Axios {
  constructor(instanceConfig) {
    this.defaults = instanceConfig;
    this.interceptors = {
      request: new InterceptorManager(),  // 依赖拦截器管理器
      response: new InterceptorManager()
    };
  }
  
  request(config) {
    // 调用 dispatchRequest
    return dispatchRequest.call(this, config);
  }
}

• 关键依赖：

• InterceptorManager：拦截器堆栈管理
• dispatchRequest：请求派发引擎
• mergeConfig：配置合并策略

3. 适配器层（Adapters）

• 双环境适配原理：

// 通过环境特征检测选择适配器
function getDefaultAdapter() {
  if (typeof XMLHttpRequest !== 'undefined') {
    return xhrAdapter;
  } else if (typeof process !== 'undefined' && 
    Object.prototype.toString.call(process) === '[object process]') {
    return httpAdapter;
  }
}

4. 拦截器系统（InterceptorManager）

• 链式执行逻辑：

// 构建 Promise 链
chain = [dispatchRequest, undefined];

// 请求拦截器逆序插入
Array.prototype.unshift.apply(chain, requestInterceptorChain);

// 响应拦截器正序追加
Array.prototype.push.apply(chain, responseInterceptorChain);

2.3.2 架构设计亮点

1. 分层架构：入口层 → 核心层 → 适配层的三级结构，符合单一职责原则

2. 双模式兼容：既支持函数式调用 (axios(config))，也支持面向对象式调用 (new Axios())

3. 可拔插适配器：通过环境检测自动切换实现，同时支持自定义适配器

4. 拦截器管道：利用 Promise Chain 实现中间件模式，支持业务逻辑灵活扩展

三、核心机制解密

3.1 双环境适配器

// adapters/adapters.js
function getAdapter(adapters) {
  if (typeof XMLHttpRequest !== 'undefined') {
    return adapters.xhr;
  } else if (typeof process !== 'undefined') {
    return adapters.http;
  }
}

1、设计启示：抽象隔离平台差异，扩展自定义适配器

2、性能对比曲线（Node vs Browser）

3.2 取消请求实现

// 经典取消令牌实现
const source = CancelToken.source();

axios.get('/user', {
  cancelToken: source.token
});

// 取消操作触发路径
source.cancel('Operation canceled') 
  
// token.reason 状态变更 
// 适配器中触发 abort()

应用场景：页面跳转时取消pending请求

3.3 配置合并策略

// 深度合并算法示例
const mergeMap = {
  url: (val1, val2) => val2 || val1,
  params: Object.assign,
  headers: (target, source) => 
    utils.merge(target, source, { 
      'Content-Type': utils.getDefaultTypeValidator 
    })
};

3.4 拦截器系统

class InterceptorManager {
  constructor() {
    this.handlers = [];
  }

  use(fulfilled, rejected) {
    this.handlers.push({ fulfilled, rejected });
    return this.handlers.length - 1;
  }
}

实现模式：中间件管道（Promise链）

四、源码学习路线规划

4.1 学习路线

4.2 调试技巧

# 在 Chrome 中调试 node_modules 代码
1. 打开 chrome://flags/#enable-local-files
2. 启用 "Debugger for Chrome" 扩展
3. 在 VS Code 中设置断点：launch.json

4.3 进阶学习路线

1. 实例化过程（部分代码段解析）

// 创建实例的底层逻辑
function createInstance(defaultConfig) {
  const context = new Axios(defaultConfig);
  const instance = bind(Axios.prototype.request, context);
  
  // 原型方法拷贝（关键步骤）
  utils.extend(instance, Axios.prototype, context);
  utils.extend(instance, context);
  
  return instance;
}

• 实现技巧：通过 bind 实现函数式调用
• 设计亮点：实例同时继承原型方法和上下文属性

2. 拦截器系统执行流程

// 典型链式结构
promiseChain = [
  dispatchRequest,
  undefined // 占位符
];

// 请求拦截器逆序插入
Array.prototype.unshift.apply(chain, requestInterceptorChain);

// 响应拦截器正序追加
Array.prototype.push.apply(chain, responseInterceptorChain);

五、工程化启示录

5.1 设计模式应用

• 工厂模式：createInstance 创建不同配置实例
• 适配器模式：统一接口对接不同环境
• 观察者模式：取消令牌的事件通知机制

5.2 性能优化启示

1. 内存管理：及时清理拦截器引用

2. 请求复用：利用 http.Agent 保持连接

3. 数据转换：避免多层嵌套的 JSON 解析

六、结语

Axios 源码展现了一个优秀开源库应有的特质：清晰的层次划分、高扩展性的架构设计、优雅的错误处理机制。其核心价值不仅在于 HTTP 请求本身，更在于：

1. 环境适配的标准化方案：为跨平台开发提供参考

2. 拦截器机制的业务扩展：日志、鉴权、性能监控等场景

3. 配置系统的工程实践：多环境配置管理的优秀范例

建议开发者在阅读源码时重点关注三个维度：模块边界划分、异常处理链路、扩展接口设计。通过模仿其架构思想，可显著提升复杂系统设计能力。