如何使用 axios 取消令牌取消请求

在使用 Axios 发送 HTTP 请求时，可能会遇到需要取消请求的情况。例如，用户在输入框中输入内容时，可能会触发频繁请求，此时可以通过取消请求来减轻网络负担。

Axios 提供了取消请求的 API，可以通过发送一个 cancel 令牌来取消正在进行的请求。

安装 Axios

在开始之前，需要先安装 Axios。可以通过 npm 或 yarn 进行安装。

npm install axios

或

yarn add axios

使用取消令牌取消请求

以下是使用 Axios 取消令牌取消请求的步骤：

首先，需要创建一个取消令牌。

const CancelToken = axios.CancelToken;
let cancel;

// 创建取消令牌
const source = CancelToken.source();
cancel = source.cancel;

然后，将取消令牌作为参数传递给 Axios 请求配置项中。

// 发送请求
axios.get('/api/users', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.log(error);
    }
  })

最后，可以使用 cancel 函数来触发取消请求。

// 取消请求
cancel('用户中断了请求');

完整实例

以下是一个完整的示例，演示如何使用 Axios 取消令牌取消请求：

import axios from 'axios';

const CancelToken = axios.CancelToken;
let cancel;

// 创建取消令牌
const source = CancelToken.source();
cancel = source.cancel;

// 发送请求
axios.get('/api/users', {
  cancelToken: source.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.log(error);
    }
  })

// 5s 后取消请求
setTimeout(() => {
  cancel('用户中断了请求');
}, 5000);

以上代码将在 5 秒后取消请求。

总结

使用 Axios 取消令牌可以很容易地取消正在进行的请求，从而提高应用程序的性能和用户体验。在实际开发中，建议对请求进行控制，避免频繁请求。