Axios 源码浅析（二）—— 解析请求核心与取消请求

2024-02-02 00:27:38

深入了解 Axios：核心请求和取消请求的详解

引言

在现代 Web 开发中，Axios 已成为发送 HTTP 请求和处理响应的流行 JavaScript 库。它简单易用，但其强大的功能却令人惊叹。在本文中，我们将深入探讨 Axios 的核心请求逻辑和取消请求机制，帮助你充分利用其优势，提升你的 Web 应用程序的效率。

核心请求逻辑

发起请求

Axios 发起请求的流程非常简单。首先，它创建了一个 XMLHttpRequest 对象，这是一个浏览器提供的用于发送 HTTP 请求的内置对象。然后，它根据配置选项设置请求头、请求正文和其他信息，最后通过调用 XMLHttpRequest 对象的 send() 方法发送请求。

配置选项

Axios 提供了丰富的配置选项，让你可以精细地控制请求行为。这些选项包括：

url：请求的 URL
method：请求的方法（如 GET、POST、PUT、DELETE）
headers：请求头信息
data：请求正文数据
timeout：请求超时时间
withCredentials：是否携带 Cookie
responseType：响应数据的类型（如 JSON、文本、Blob）

你可以通过在创建 Axios 实例时传递一个配置对象来设置这些选项。

处理响应

Axios 会自动解析收到的响应数据，并将其作为 Promise 的值返回。如果响应状态码在 200 到 299 之间，则认为请求成功；否则，则认为请求失败。

取消请求逻辑

Axios 提供了一种简单而强大的方式来取消正在进行的请求，即通过调用 cancelToken.cancel() 方法。

取消请求的实现

Axios 通过在请求配置中添加一个 cancelToken 属性来实现取消请求。当调用 cancelToken.cancel() 方法时，Axios 会将 cancelToken 的 canceled 属性设置为 true。在发送请求之前，Axios 会检查 cancelToken 的 canceled 属性。如果 canceled 属性为 true，则会立即取消请求。

取消请求的注意事项

需要注意的是，Axios 只会取消正在进行的请求。如果请求已经完成，则无法取消。

取消请求的使用场景

取消请求在许多场景下都非常有用，例如：

当用户在页面上执行操作时，可以取消正在进行的请求。
当用户在页面上切换不同的选项卡时，可以取消正在进行的请求。
当用户在页面上刷新页面时，可以取消正在进行的请求。

代码示例

发起请求

const axios = require('axios');

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

取消请求

const cancelToken = axios.CancelToken.source();

axios.get('https://example.com/api/v1/users', {
  cancelToken: cancelToken.token
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      console.log('Request canceled');
    } else {
      console.error(error);
    }
  });

// 取消请求
cancelToken.cancel();

常见问题解答

什么时候应该使用 Axios？
Axios 适用于需要发送 HTTP 请求的大多数 Web 应用程序。它易于使用，功能强大，并且广泛支持。
Axios 和 Fetch API 有什么区别？
Fetch API 是一个较新的浏览器原生 API，用于发送 HTTP 请求。它比 Axios 更低级，但提供了更多的灵活性。Axios 提供了一个更高级别的抽象，更易于使用，但灵活性较低。
如何使用 Axios 设置自定义请求头？
可以通过在请求配置对象中设置 headers 属性来设置自定义请求头。例如：

axios.get('https://example.com/api/v1/users', {
  headers: {
    'X-Custom-Header': 'value'
  }
});

如何取消 Axios 请求？
可以使用 cancelToken 来取消 Axios 请求。只需创建一个 cancelToken 实例，并将其传递给请求配置对象。然后，可以使用 cancelToken.cancel() 方法来取消请求。
Axios 是否支持文件上传？
是的，Axios 支持文件上传。可以使用 FormData 对象来发送文件。例如：

const formData = new FormData();
formData.append('file', file);

axios.post('https://example.com/api/v1/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});