在 Axios 中取消请求的 2 种方法

这篇简明扼要的文章向您展示了在 Axios 中取消最近发送的请求的两种不同方法。事不宜迟，让我们开始吧。

使用 AbortController

如果您正在使用新版本的 Axios 开发项目，则鼓励使用这种方法。以下是步骤：

1.创建控制器：

const controller = new AbortController();

2. 发出请求时，将信号选项设置为controller.signal：

try {
      const response = await axios.get('https://fake-api.kindacode.com', {
        signal: controller.signal,
      });
      console.log(response);
    } catch (error: any) {
      if (axios.isCancel(error)) {
        console.log('Request canceled', error.message);
      } else {
        console.log(error);
      }
}

3. 调用controller.abort() 来取消请求（这可以通过编程方式或用户操作完成）：

controller.abort();

这将触发 catch 块并打印“请求取消”。

使用 CancelToken

如果您使用的是旧版本的 Axios (< 0.22)，这种方法是一个不错的选择。否则，请使用第一个解决方案。

步骤：

1. 创建源。

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

2.发出请求时将cancelToken属性设置为source.token ：

try {
      const response = await axios.get('https://fake-api.kindacode.com', {
        cancelToken: source.token,
      });
      console.log(response);
} catch (error: any) {
      if (axios.isCancel(error)) {
        console.log('Request canceled', error.message);
      } else {
        console.log(error);
      }
}

3.可以通过触发source.calcel() 方法取消请求：

source.cancel('Operation canceled by the user.');

这将引发 Cancel 错误，您可以在catch() 块中捕获它。

火焰兔

海报 链接