Axios 源码笔记 | 手撕 Defaults 默认配置体系：从源码解析到设计哲学

原创

叶一一

发布于 2025-04-27 19:16:17

3210

一、引言

在Axios的架构体系中，默认配置模块（defaults）犹如整个库的神经中枢。它承载着请求适配器选择、数据转换规则、安全策略等核心机制，直接影响着数十万开发者每天发起的数百万次请求。

本文将通过逐行源码解析，带领读者深入理解Axios如何通过精巧的默认配置实现跨平台兼容、数据智能转换等高级特性。

二、默认配置核心：index.js源码全景解析

2.1 模块架构图

2.2 适配器配置体系

adapter: ['xhr', 'http', 'fetch']

这是Axios最精妙的设计之一——适配器降级策略。代码中看似简单的数组配置，实则实现了：

浏览器环境优先使用XMLHttpRequest。
Node.js环境自动切换至http模块。
现代浏览器支持Fetch API降级通过utils.forEach动态创建方法专属配置：

utils.forEach(['delete', 'get', 'head'], (method) => {
  defaults.headers[method] = {};
});

2.3 数据转换引擎

transformRequest/transformResponse是Axios智能数据处理的核心：

请求转换流程图

响应转换安全机制

function stringifySafely(rawValue, parser, encoder) {
  if (utils.isString(rawValue)) {
    try {
      (parser || JSON.parse)(rawValue); // 双重验证机制
      return utils.trim(rawValue);
    } catch (e) {
      if (e.name !== 'SyntaxError') throw e;
    }
  }
  return (encoder || JSON.stringify)(rawValue);
}

这里采用防御性编程策略：

优先尝试解析已有字符串。
捕获非语法错误异常。
智能选择序列化方式。

2.4 环境适配黑科技

env: {
  FormData: platform.classes.FormData,
  Blob: platform.classes.Blob
}

通过平台检测模块实现：

浏览器环境：使用原生FormData/Blob。
Node环境：使用form-data库实现
小程序环境：适配微信API。

三、过渡性配置：transitional.js设计哲学

3.1 版本兼容性矩阵

3.2 过渡性配置入口

在默认配置对象中通过transitional属性挂载：

const defaults = {
  transitional: transitionalDefaults, // 来自transitional.js
  //...其他配置
}

3.3 核心配置参数解析

结合transitional.js源码，主要包含三个关键参数：

3.3.1 silentJSONParsing

// 默认值：true
silentJSONParsing: true

作用场景：

// transformResponse.js
try {
  return JSON.parse(data);
} catch (e) {
  if (strictJSONParsing) { // strictJSONParsing = !silentJSONParsing && JSONRequested
    throw e;
  }
}

行为表现：

true时：即使响应数据不是合法JSON也不抛错
false时：响应数据解析失败会触发错误

3.3.2 forcedJSONParsing

// 默认值：true
forcedJSONParsing: true

作用逻辑：

if ((forcedJSONParsing && !this.responseType) || JSONRequested) {
  // 尝试JSON解析
}

特殊表现：

即使未设置responseType: 'json'也强制尝试JSON解析
与responseType: 'json'共存时以显式声明优先

3.3.4 clarifyTimeoutError

// 默认值：false
clarifyTimeoutError: false

异常处理差异：

// 默认行为
if (request.aborted) return reject(...);

// 启用后
if (request.aborted) {
  reject(new AxiosError(...));
}

3.4 过渡性配置设计模式

3.4.1 版本兼容矩阵

3.4.2 渐进式迁移策略

配置项	v0.x行为	v1.x默认	v2.x计划
silentJSONParsing	等效true	true(可配置)	强制false
forcedJSONParsing	等效true	true(可配置)	强制true
clarifyTimeoutError	等效false	false(可配置)	强制true

3.5 设计哲学解读

灰度发布思维：通过配置开关控制新老特性
防御性编程：try/catch配合配置项实现错误控制
语义化版本：通过大版本号划分行为变更边界
开发者体验：允许渐进式适配而非强制升级

这种设计模式既保证了框架的进化能力，又为大型项目升级提供了缓冲空间，是开源库版本管理的典范之作。

四、设计模式深度剖析

4.1 分层配置架构

4.2 配置合并策略

Axios采用深度合并策略，但特定属性（如headers）采用特殊合并逻辑：

// 特殊合并示例
utils.merge(defaults.headers[method], instanceConfig.headers);

五、最佳实践指南

5.1 自定义转换器示例

axios.defaults.transformRequest.push((data, headers) => {
  if (data instanceof CustomType) {
    headers.setContentType('application/custom');
    return data.serialize();
  }
  return data;
});

5.2 安全配置方案

// XSRF防御配置
axios.defaults.xsrfCookieName = 'CUSTOM-XSRF-TOKEN';
axios.defaults.xsrfHeaderName = 'X-CUSTOM-XSRF-TOKEN';

// 深度防御策略
axios.interceptors.request.use(config => {
  if (!config.transitional.forcedJSONParsing) {
    config.validateStatus = status => status >= 200 && status < 500;
  }
  return config;
});

六、结语

通过深入解析Axios的默认配置体系，我们不仅学到了：

多环境适配的工程化实现。
数据转换的防御性编程策略。
版本过渡的渐进式设计思想。

更重要的是领悟到：优秀的配置设计应该像优秀的API设计一样，既能满足大多数场景的默认需求，又留有足够的扩展空间。

期待未来的Axios能在保持简洁性的同时，通过更智能的配置管理，继续引领前端HTTP客户端库的发展方向。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S13

axios

源码学习

源码阅读