Axios 源码共读，揭秘 HTTP 库的架构奥秘（下）

2023-09-21 16:13:48

在上一篇文章中，我们对 Axios 源码共读的第一部分进行了深入的探索，了解了它的安装、基本用法以及如何使用它的拦截器功能。在本次的第二部分中，我们将继续深入探究 Axios 的内部机制，重点关注它的整体架构和工作流程。通过逐一拆解请求发送、响应处理和错误处理的过程，我们将获得对这个流行的 HTTP 库更全面的理解。

请求发送

当我们使用 Axios 发送一个请求时，会发生以下一系列步骤：

创建请求对象： 首先，Axios 会创建一个请求对象，其中包含了请求的 URL、方法、数据和其他相关配置。
添加拦截器： 如果定义了任何请求拦截器，它们将在这个阶段被执行，可以修改请求对象或完全阻止请求。
发送请求： Axios 使用底层库（如 xhr 或 fetch）向服务器发送请求。
等待响应： Axios 会等待服务器的响应，并将其存储在响应对象中。

响应处理

当服务器返回响应后，Axios 会执行以下操作：

解析响应数据： Axios 会根据响应的 Content-Type 头解析响应数据，将其转换为 JavaScript 对象或文本。
添加拦截器： 如果定义了任何响应拦截器，它们将在这个阶段被执行，可以修改响应对象或抛出错误。
返回响应： Axios 将响应对象返回给调用者。

错误处理

如果在请求或响应处理过程中发生错误，Axios 会执行以下步骤：

获取错误对象： Axios 会创建一个错误对象，其中包含错误信息和其他相关数据。
添加拦截器： 如果定义了任何错误拦截器，它们将在这个阶段被执行，可以修改错误对象或抛出新的错误。
抛出错误： Axios 将错误对象抛出，以便调用者可以处理它。

架构总结

Axios 的整体架构遵循以下模式：

创建请求对象
发送请求
等待响应
解析响应数据
处理错误

这种架构提供了高度的可定制性和可扩展性，允许开发人员根据需要添加自己的拦截器和自定义处理逻辑。

示例代码

为了更好地理解 Axios 的工作流程，让我们来看一个示例代码：

const axios = require('axios');

axios.get('https://example.com')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.log(error.message);
  });

在这段代码中：