Axios源码阅读 | 深度解构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           # 入口文件（用户选中代码所在）

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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// 创建实例的底层逻辑
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;
}

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

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

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