axios适配器函数调用机制解析：从原理到最佳实践

1次阅读

共计 1411 个字符，预计需要花费 4 分钟才能阅读完成。

axios 作为前端主流的 HTTP 请求库，其适配器 (adapter) 机制是实现跨平台兼容性的核心设计。适配器本质是一个函数，负责将统一配置对象转化为特定环境的网络请求。在浏览器端默认使用 XMLHttpRequest 适配器，Node.js 环境下则使用 http 模块适配器。这种分层设计使得 axios 能在不同运行时保持一致的 API 接口。

请求转换阶段：接收标准化配置对象，包括 method、url、headers 等参数
环境检测阶段：根据全局变量判断执行环境（typeof window 检测）
请求执行阶段：
浏览器环境：创建 XMLHttpRequest 实例，设置 withCredentials 等属性
Node 环境：通过 http/https 模块创建 ClientRequest 对象
响应处理阶段：将原生响应包装为统一格式的 Promise 对象

超时处理：通过 config.timeout 设置中断请求
状态码校验：validateStatus 函数过滤非常规成功状态（如 304）
错误封装：将网络错误、超时错误、校验错误统一转化为 Error 对象

以下是一个支持请求缓存的定制化适配器实现：

const memoryCache = new Map();

const cacheAdapter = (config) => {
  // 生成缓存键
  const cacheKey = JSON.stringify({
    url: config.url,
    method: config.method,
    params: config.params
  });

  // 检查缓存命中
  if (config.cache && memoryCache.has(cacheKey)) {
    return Promise.resolve({...memoryCache.get(cacheKey),
      __fromCache: true
    });
  }

  // 使用默认适配器继续处理
  return axios.defaults.adapter(config).then(response => {if (config.cache) {
      memoryCache.set(cacheKey, {
        data: response.data,
        status: response.status,
        headers: response.headers
      });
    }
    return response;
  });
};

// 使用示例
axios.create({
  adapter: cacheAdapter,
  cache: true
});

通过基准测试对比不同环境下的适配器表现（单位：req/sec）：