axios如何中断请求

Axios使用最多的就是发送GETPOST请求,但是,最近遇到一个问题,就是需要中断请求,查找了很多资料,尝试之后可行,于是就写了这一遍文章,希望能帮助更多的人。

在v0.22.0之前,可以使用CancelToken发起取消请求。需要注意的是在GET请求中CancelToken作为第二个参数传入,在POST请求中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('取消请求', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 参数可选
source.cancel('用户发起了取消操作');

你也可以通过构造函数形式执行取消操作。

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // 执行器函数接收取消函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

但是,从v0.22.0开始,Axios支持AbortController以获取API的方式取消请求。具体如下:

const controller = new AbortController();

axios.get('/user/12345', {
   signal: controller.signal
}).then(function(response) {
   //...
});
// 取消请求
controller.abort()

仔细分析了一下AbortController,发现,当请求初始化时,我们将AbortSignal作为一个选项传递进入请求的选项对象中(上面的 {signal})。这将signalcontroller与 请求相关联,并且允许我们通过调用AbortController.abort()去终止它。

abort()被调用时,这个promisereject一个名为AbortErrorDOMException。如果,你查看一下源码,你会发现,CancelToken内部也是promise对象,当调用cancel方法后,会理解执行取消请求,同时调用reject让外层的promisereject执行。

本文参考文献:
Axios官网
MDN Web Docs

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小小•愿望

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值