Axios 源码笔记

一、引言

在前端开发的世界里，网络请求是不可或缺的一环。Axios 作为一个广泛使用的基于 Promise 的 HTTP 客户端，凭借其简洁的 API、强大的功能以及良好的兼容性，成为了众多开发者的首选。而 Axios 的默认配置体系，就像是它的“大脑”，决定了请求和响应在不同场景下的处理方式。深入理解 Axios 的默认配置体系，不仅能帮助我们更好地使用这个库，还能让我们学习到优秀的设计模式和编程思想。

本文将通过阅读 axios-1.x/lib/defaults 目录下的 index.js 和 transitional.js 文件，详细解析 Axios 默认配置体系的代码逻辑、设计思路以及重点功能。

二、`index.js` 文件解析

2.1 代码概述

index.js 文件主要定义了 Axios 的默认配置对象 defaults，这个对象包含了请求和响应的转换函数、超时时间、XSRF 相关配置、状态码验证函数等。下面我们将逐步解析这个文件的各个部分。

2.2 导入模块

代码语言：javascript代码运行次数：0运行复制

'use strict';

import utils from '../utils.js';
import AxiosError from '../core/AxiosError.js';
import transitionalDefaults from './transitional.js';
import toFormData from '../helpers/toFormData.js';
import toURLEncodedForm from '../helpers/toURLEncodedForm.js';
import platform from '../platform/index.js';
import formDataToJSON from '../helpers/formDataToJSON.js';

这部分代码导入了 Axios 项目中其他模块的功能，包括工具函数、错误处理类、过渡配置、表单数据处理函数等。这些模块为后续的配置和处理提供了必要的支持。

3.3 `stringifySafely` 函数

代码语言：javascript代码运行次数：0运行复制

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

这个函数的作用是安全地将值转换为字符串。它首先检查 rawValue 是否为字符串，如果是，则尝试使用 parser 解析该字符串。如果解析成功，则返回去除首尾空格后的字符串；如果解析失败且错误类型不是 SyntaxError，则抛出错误。如果 rawValue 不是字符串或者解析失败且错误类型是 SyntaxError，则使用 encoder 将其转换为字符串。

2.4 `defaults` 对象

代码语言：javascript代码运行次数：0运行复制

const defaults = {
  // ... 其他配置 ...
};

defaults 对象是 Axios 的核心配置，下面我们详细解析其中的重要属性。

2.4.1 `transitional`

代码语言：javascript代码运行次数：0运行复制

transitional: transitionalDefaults,

该属性引用了 transitional.js 文件中的默认过渡配置，用于处理一些过渡性的功能和兼容性问题。

2.4.2 `adapter`

代码语言：javascript代码运行次数：0运行复制

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

adapter 定义了 Axios 支持的请求适配器，包括 xhr（浏览器环境下的 XMLHttpRequest）、http（Node.js 环境下的 HTTP 模块）和 fetch（现代浏览器的 Fetch API）。Axios 会根据运行环境选择合适的适配器来发送请求。

2.4.3 `transformRequest`

代码语言：javascript代码运行次数：0运行复制

transformRequest: [function transformRequest(data, headers) {
  // ... 函数体 ...
}],

transformRequest 是一个数组，包含了一个或多个请求数据转换函数。这些函数会在请求发送前对请求数据进行处理，根据不同的请求头和数据类型，将数据转换为合适的格式。例如，如果数据是一个 HTML 表单，会将其转换为 FormData 对象；如果数据是 URLSearchParams，会设置请求头并将其转换为字符串。

2.4.4 `transformResponse`

代码语言：javascript代码运行次数：0运行复制

transformResponse: [function transformResponse(data) {
  // ... 函数体 ...
}],

transformResponse 也是一个数组，包含了一个或多个响应数据转换函数。这些函数会在接收到响应后对响应数据进行处理，根据配置和数据类型，尝试将响应数据解析为 JSON 对象。如果解析失败且配置要求严格解析，则会抛出错误。

2.4.5 其他配置

defaults 对象还包含了超时时间、XSRF 相关配置、最大内容长度、状态码验证函数等其他配置项，这些配置项为 Axios 的请求和响应提供了更多的控制和保障。

2.5 `transformRequest` 流程图

2.6 设计思路

index.js 文件的设计思路是将 Axios 的默认配置集中管理，通过模块化的方式引入其他功能模块，提高代码的可维护性和可扩展性。defaults 对象中的各个配置项都有明确的职责，通过请求和响应的转换函数，Axios 可以灵活地处理不同类型的数据，适应各种复杂的业务场景。

三、`transitional.js` 文件解析

3.1 代码概述

由于没有提供 transitional.js 文件的具体内容，我们可以推测它主要用于处理 Axios 的过渡性配置，这些配置可能是为了兼容旧版本或者测试新功能而设计的。过渡性配置通常会随着版本的更新而变化，开发者可以根据需要调整这些配置来适应不同的场景。

3.2 设计思路

transitional.js 文件的设计思路是将过渡性配置与核心配置分离，避免影响到主要的功能逻辑。这样可以在不改变核心代码的情况下，方便地调整和管理过渡性配置，提高代码的稳定性和可维护性。

四、结语

通过对 axios-1.x/lib/defaults 目录下的 index.js 和 transitional.js 文件的深入解析，我们了解了 Axios 默认配置体系的核心逻辑和设计思路。index.js 文件定义了 Axios 的主要默认配置，包括请求和响应的转换函数、适配器、超时时间等，这些配置使得 Axios 能够灵活地处理各种网络请求。transitional.js 文件则负责管理过渡性配置，确保 Axios 在不同版本之间的兼容性和可扩展性。

在阅读源码的过程中，我们不仅学习到了 Axios 的实现细节，还领略到了优秀的模块化设计和编程思想。这些知识对于我们提升自己的编程能力和开发水平都有很大的帮助。

未来，随着前端技术的不断发展，网络请求的需求也会越来越复杂。我们期望 Axios 能够继续保持其简洁、强大的特点，不断优化和扩展其功能，为开发者提供更好的使用体验。同时，我们也可以借鉴 Axios 的设计思路，在自己的项目中实现更加高效、灵活的网络请求模块。

总之，深入理解 Axios 的默认配置体系，对于我们更好地使用这个库以及提升自己的前端开发能力都具有重要的意义。希望本文能够帮助大家更好地掌握 Axios 的底层逻辑，在实际开发中发挥出更大的作用。

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Axios 源码笔记