vue的axios取消请求实现过程
更新时间：2025年12月04日 08:34:40 作者：羅森林
文章介绍了如何使用axios的cancelToken功能取消请求,包括两种创建cancelToken的方法：使用CancelToken.source工厂方法和通过传递executor函数创建,还提到了如何处理取消请求的原因,并给出了解决频繁点击发送请求问题的建议
axios取消请求
axios发送请求时，添加cancelToken配置项可以用于取消请求，cancelToken的取值有两种方式
1.使用 CancelToken.source 工厂方法创建cancel token
CancelToken有一个source静态方法，调用之后返回一个对象，该对象包含一个token属性用于标记请求和一个cancel方法用于取消请求
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('http://localhost:6003/axios/4',{
cancelToken: source.token
}).then(function(res) {
console.log(res.data);
})
source.cancel('不想请求了');
2.通过传递一个 executor 函数到 CancelToken 的构造函数创建cancel token
axios有一个CancelToken属性，他是一个类，用于获取取消请求的cancel方法，获取了该方法之后就可以在合适的地方执行cancel()取消请求了。
这种方式比较麻烦，但是可以用于取消多个请求，你可以将c这个取消请求的方法push进一个数组，然后在你需要取消多个请求的时候，循环这个数组，依次执行里面的方法即可取消多个请求。
let arr = [];
const CancelToken = axios.CancelToken;
axios.get('http://localhost:6003/axios/4',{
cancelToken: new CancelToken(function executor(c){
arr.push(c);
//cancel = c;
})
}).then(function(res) {
console.log(res.data);
})
axios.get('http://localhost:3000/axios/3',{
cancelToken: new CancelToken(function executor(c){
arr.push(c);
//cancel = c;
})
}).then(function(res) {
console.log(res.data);
})
for (let i = 0; i < arr.length; i++) {
arr[i]('请求取消');
}
注意点1：
cancel取消请求方法在调用取消请求的时候可以将取消原因——message字符串传递进去，这样请求在被取消之后会被catch捕获，你可以在这里将取消原因打印出来或者提示给用户，比如提示用户不要频繁点击发送请求
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('http://localhost:6003/axios/4',{
cancelToken: source.token
}).then(function(res) {
console.log(res.data);
}).catch(function(err) {
if (axios.isCancel(err)) {
console.log(err.message);
}
})
source.cancel('不想请求了');
注意点2：
get的cancelToken放置在第二个参数的对象里面，post的cancelToken放置在第三个参数对象里面
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.post('http://localhost:6003/axios',{
username: 'lisi',
content: 123
},{
headers:{
"Content-Type": "application/json"
},
cancelToken: source.token
}
).then(function(ret){
console.log(ret.data);
})
source.cancel('不想请求了');
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
el-select自定义指令实现触底加载分页请求options数据(完整代码和接口可直接用)
某些情况下,下拉框需要做触底加载,发请求,获取option的数据,下面给大家分享el-select自定义指令实现触底加载分页请求options数据(附上完整代码和接口可直接用),感兴趣的朋友参考下吧2024-02-02
这篇文章主要介绍了vue2-使用vue-i18n搭建多语言切换环境的相关知识,在data(){}中获取的变量存在更新this.$i18n.locale的值时无法自动切换的问题,需要刷新页面才能切换语言,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要介绍了Vant主题定制如何修改颜色样式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue实现登录拦截，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
本文主要介绍了Vue CLI 中常用的加载器及其配置,及如何根据项目需求进行自定义扩展,具有一定的参考价值,感兴趣的可以了解一下2025-06-06
vue-cli 是 vue 官方团队推出的一款快速开发 vue 项目的构建工具，具有开箱即用并且提供简洁的自定义配置等功能。这篇文章主要介绍了快速了解vue-cli 3.0 新特性,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了vue elementui 动态追加下拉框、输入框功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-04-04
这篇文章主要介绍了vue使用canvas绘制圆环，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
详解vue-video-player使用心得（兼容m3u8）
这篇文章主要介绍了详解vue-video-player使用心得（兼容m3u8），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
uniapp项目页面跳转登录拦截uni.addInterceptor使用及说明
这篇文章主要介绍了uniapp项目页面跳转登录拦截uni.addInterceptor使用及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2026-03-03
最新评论