是时候和Axios的CancelToken说再见，让我们拥抱AbortController

2023-11-16 10:31:39

对于取消请求，Axios官方曾经推出了CancelToken来实现该功能。而在2021年10月推出的Axios V0.22.0版本中却把CancelToken打上👎deprecated。这意味着，CancelToken即将被弃用，取而代之的是AbortController。那么，AbortController是如何实现请求取消的呢？为什么要推荐使用它？本文将带你一起揭开谜底。

AbortController简介

AbortController是一个Web API，它允许我们中止一个正在进行的HTTP请求。其工作原理是：AbortController创建了一个信号对象，该对象可以被用来指示请求应被取消。当信号对象被设置为终止状态时，请求就会被取消。

使用AbortController取消请求

使用AbortController取消请求非常简单。首先，我们需要创建一个AbortController对象，然后将该对象传递给HTTP请求函数。当我们需要取消请求时，我们可以调用AbortController对象的abort()方法，这样请求就会被取消。

以下是一个使用AbortController取消请求的示例：

const controller = new AbortController();
const signal = controller.signal;

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

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

当我们调用controller.abort()方法时，请求就会被取消，并且then()和catch()方法都不会被调用。

为什么推荐使用AbortController

Axios之所以推荐使用AbortController来取消请求，是因为AbortController具有以下几个优点：

简单易用： AbortController的使用非常简单，只需要创建一个对象并将其传递给HTTP请求函数即可。
跨浏览器兼容： AbortController是Web API，因此它在所有现代浏览器中都受到支持。
与Fetch API兼容： AbortController是Fetch API的一部分，因此它与Fetch API完全兼容。

结论

AbortController是一个非常强大的工具，它可以让我们轻松地取消HTTP请求。Axios推荐使用AbortController来取消请求，是因为它具有简单易用、跨浏览器兼容、与Fetch API兼容等优点。如果您正在使用Axios，那么我强烈建议您使用AbortController来取消请求。