Axios取消请求的方法及对比

是的，Axios 提供了取消请求的功能。这个功能在需要中断正在进行的请求时非常有用，比如用户在请求完成前离开了页面，或者需要取消一个旧的请求以发起一个新的请求。

Axios 使用 CancelToken 来实现请求的取消。从 v0.22.0 开始，Axios 推荐使用 AbortController 来替代 CancelToken，因为 AbortController 是现代浏览器原生支持的 API，更加符合标准。

使用 CancelToken（旧版方式）

const axios = require('axios');

// 创建一个 CancelToken 源
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理其他错误
  }
});

// 取消请求
source.cancel('Operation canceled by the user.');

使用 AbortController（推荐方式）

const axios = require('axios');

// 创建一个 AbortController 实例
const controller = new AbortController();

axios.get('/user/12345', {
  signal: controller.signal
}).catch(function (error) {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else {
    // 处理其他错误
  }
});

// 取消请求
controller.abort('Operation canceled by the user.');

关键点：

1. CancelToken：在旧版本的 Axios 中，CancelToken 是主要的取消请求的方式。你需要创建一个 CancelToken 源，并将其传递给请求配置中的 cancelToken 属性。

2. AbortController：在现代浏览器中，AbortController 是更推荐的方式。你可以创建一个 AbortController 实例，并将其 signal 属性传递给请求配置中的 signal 属性。

3. 取消请求：通过调用 source.cancel() 或 controller.abort() 来取消请求。取消后，请求会被中断，并且会触发一个 Cancel 错误。

4. 错误处理：在捕获错误时，可以使用 axios.isCancel() 来判断错误是否是由于请求被取消引起的。

总结：

Axios 提供了灵活的方式来取消请求，推荐使用 AbortController，因为它更符合现代 Web 标准，并且在未来可能会成为主流。如果你在维护旧代码，可能会遇到 CancelToken 的使用，但新项目建议使用 AbortController。