使用Axios AbortController取消请求

流程图

flowchart TD
    A[创建 AbortController 实例] --> B[创建请求]
    B --> C[发送请求]
    C --> D[取消请求]

步骤说明

1. 创建 AbortController 实例
2. 创建请求，并将 AbortController 的 signal 作为配置项传入
3. 发送请求
4. 取消请求

代码实现

首先，你需要安装 axios 和 axios-abort-controller 包，以便在项目中使用 Axios 和 AbortController。

npm install axios axios-abort-controller

引入 axios 和 axios-abort-controller：

import axios from 'axios';
import { AbortController } from 'axios-abort-controller';

创建 AbortController 实例

在需要取消请求的地方，创建 AbortController 实例：

const abortController = new AbortController();

创建请求

使用创建的 AbortController 实例的 signal 属性作为请求的 cancelToken 配置项：

const { signal } = abortController;
const config = {
  url: '
  method: 'GET',
  cancelToken: signal.token,
};

发送请求

使用 axios 发送请求：

axios(config).then((response) => {
  // 处理请求成功的响应
}).catch((error) => {
  if (axios.isCancel(error)) {
    // 请求被取消的处理
  } else {
    // 处理其他错误
  }
});

取消请求

当需要取消请求时，调用 AbortController 实例的 abort() 方法：

abortController.abort();

完整示例

import axios from 'axios';
import { AbortController } from 'axios-abort-controller';

const abortController = new AbortController();

const { signal } = abortController;
const config = {
  url: '
  method: 'GET',
  cancelToken: signal.token,
};

axios(config).then((response) => {
  // 处理请求成功的响应
}).catch((error) => {
  if (axios.isCancel(error)) {
    // 请求被取消的处理
  } else {
    // 处理其他错误
  }
});

// 取消请求
abortController.abort();

解释

1. 创建 AbortController 实例用于取消请求。
2. 创建请求时，将 AbortController 的 signal 属性作为请求的 cancelToken 配置项，以便在需要时取消请求。
3. 发送请求时，使用 axios 发送配置好的请求。
4. 在请求被取消时，捕获到 axios 的 Cancel 错误，并进行相应的处理。
5. 当需要取消请求时，调用 AbortController 实例的 abort() 方法。

总结

Axios AbortController 提供了一种简便的方式来取消请求。通过创建 AbortController 实例并将其 signal 属性作为请求的 cancelToken 配置项，可以在需要时取消请求。取消请求可以避免浪费不必要的网络资源，并提高应用的性能。在实际开发中，我们可以根据需要灵活地使用 Axios AbortController 来处理请求的取消。