【Vue】Axios取消请求

  • A+
所属分类:vue

一、前言

有的时候我们需要取消axios发出的请求,例如在退出页面时,取消掉仍然在进行的请求。

二、AbortController

mdn中AbortController的介绍。
【Vue】Axios取消请求
从 v0.22.0 开始,Axios 支持以 fetch API 方式—— AbortController 取消请求:

const controller = new AbortController();

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

注意这里在发送请求时,额外携带了一个signal参数:

signal: controller.signal

这是AbortController实例(controller.abort())去取消请求的标记

三、CancelToken

您还可以使用 cancel token 取消一个请求。

  • Axios 的 cancel token API 是基于被撤销 cancelable promises proposal。
  • 此 API 从 v0.22.0 开始已被弃用,不应在新项目中使用。

可以使用 CancelToken.source 工厂方法创建一个 cancel token ,如下所示:

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 {
   
    // 处理错误
  }
});

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

// 取消请求(message 参数是可选的)
source.cancel('Operation canceled by the user.');
w3cjava

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: