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

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

使用 AbortController

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

1.创建控制器:

const controller = new AbortController();
  1. 发出请求时,将信号选项设置为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);
      }
}
  1. 调用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() 块中捕获它。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 在 Axios 中取消请求的 2 种方法