Vue取消Axios发出的请求

更新时间：2022年09月05日 10:41:33 作者：小绵杨Yancy

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

一、前言

有的时候我们需要取消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开发chrome插件，实现获取界面数据和保存到数据库功能
这篇文章主要介绍了vue开发chrome插件，实现获取界面数据和保存到数据库功能的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2020-12-12
vue 解决IOS10低版本白屏的问题
这篇文章主要介绍了vue 解决IOS10低版本白屏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue发送ajax请求详解
如何利用vue进行AJAX,其它vue本身不支持发送AJAX请求,需要使用vue-resource（vue1.0版本）或axios（vue2.0版本）第三方插件的支持才行
2018-10-10
详解vue2.0的Element UI的表格table列时间戳格式化
本篇文章主要介绍了详解vue2.0的Element UI的表格table列时间戳格式化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-06-06
关于vue二进制转图片显示问题后端返回的是byte[]数组
这篇文章主要介绍了关于vue二进制转图片显示问题后端返回的是byte[]数组，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue 按钮权限控制介绍
这篇文章主要介绍了vue 按钮权限控制，在日常项目中，会碰到需要根据后台接口返回的数据，来判断当前用户的操作权限，必须当有删除权限时，就显示删除按钮，下面我们就来了解一下具体的解决方法,需要的朋友也可以参考一下
2021-12-12
详解vue使用$http服务端收不到参数
这篇文章主要介绍了vue使用$http服务端收不到参数，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
graphQL在前端vue中使用实例代码
这篇文章主要介绍了graphQL在前端vue中使用过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
这篇文章主要介绍了vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下
2021-02-02
如何在Vue.JS中使用图标组件
这篇文章主要介绍了如何在Vue.JS中使用图标组件，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-08-08

Vue取消Axios发出的请求

目录

一、前言

二、AbortController

三、CancelToken

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具