Vue取消Axios发出的请求
更新时间：2022年09月05日 10:41:33 作者：小绵杨Yancy
axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。首先需要知道：axios不是一种新的技术。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范
一、前言
有的时候我们需要取消axios发出的请求，例如在退出页面时，取消掉仍然在进行的请求。
二、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编程三部曲之模型树优化示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本文主要介绍了el-table-column 内容不自动换行的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
vue3中ts语法使用element plus分页组件警告错误问题
这篇文章主要介绍了vue3中ts语法使用element plus分页组件警告错误问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
插槽slot可以说在一个Vue项目里面处处都有它的身影，比如我们使用一些UI组件库的时候，我们通常可以使用插槽来自定义我们的内容，这篇文章主要介绍了Vue3中slot插槽使用方式,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue 中 get / delete 传递数组参数方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
vue系列之requireJs中引入vue-router的方法
这篇文章主要介绍了vue系列之requireJs中引入vue-router的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要为大家详细介绍了vue实现表单验证功能，基于NUXT的validate方法实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了如何利用Vue+TS实现一个简易的语音播放组件，文中的示例代码讲解详细，对我们学习Vue有一定的帮助，需要的可以参考一下2022-03-03
vue.js实现点击后动态添加class及删除同级class的实现代码
这篇文章主要介绍了vue.js实现点击后动态添加class及删除同级class的相关资料,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了在vscode中使用脚手架搭建vue项目的相关资料,包括创建Vue2和Vue3项目,并展示了如何自定义项目配置,如选择特性、路由模式、CSS预处理器和工具配置,通过代码介绍的非常详细,需要的朋友可以参考下2024-12-12
最新评论