Vue取消Axios发出的请求

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。首先需要知道：axios不是一种新的技术。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范

目录

• 一、前言
• 二、AbortController
• 三、CancelToken

一、前言

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

二、AbortController

mdn中AbortController的介绍。

从 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.');

到此这篇关于Vue取消Axios发出的请求的文章就介绍到这了,更多相关Vue Axios内容请搜索北冥有鱼以前的文章或继续浏览下面的相关文章希望大家以后多多支持北冥有鱼！

您可能感兴趣的文章:

• vue项目及axios请求获取数据方式
• Vue axios库发送请求的示例介绍
• vue axios中的get请求方式
• Vue使用axios发送请求并实现简单封装的示例详解
• vue结合axios实现restful风格的四种请求方式
• Vue3如何使用axios发起网络请求
• Vue使用axios添加请求头方式
• vue中数据请求axios的封装和使用