vue axios路由跳转取消所有请求 和 防止重复请求
2024-09-25 08:22:58
直接上干货
在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖。
或者是跳转路由的时候取消还未返回的请求
第一步: axios 怎么取消:
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// An executor function receives a cancel function as a parameter
cancel = c;
})
}); 第二步: 这是取消一个axios 如果是多个呢?那么我们就需要有个地方给存下来
vuex
state: {
// axios取消请求
axiosPromiseCancel: [],
}
第三步: axios 拦截器axios.js
import store from './store';
const CancelToken = axios.CancelToken; let cancel;
// 防止重复请求
let removePending = (config) => {
for (let k in store.state['axiosPromiseCancel']) {
if (store.state['axiosPromiseCancel'][k].u === config.url + '&' + config.method) { //当前请求在数组中存在时执行函数体
store.state['axiosPromiseCancel'][k].f(); //执行取消操作
store.state['axiosPromiseCancel'].splice(k, 1); //把这条记录从数组中移除
}
}
};
axios.interceptors.request.use(config=>{
// 这个是 取消重点
removePending(config);
config.cancelToken = new CancelToken((cancel) => {
store.state['axiosPromiseCancel'].push({ u: config.url + '&' + config.method, f: cancel });
});
return config;
});
axios.interceptors.response.use(res=>{
removePending(res.config);
// do something...
},error=>{
if (axios.isCancel(error)) {
// 为了终结promise链 就是实际请求 不会走到.catch(rej=>{});这样就不会触发错误提示之类了。
return new Promise(() => {});
}else{
return Promise.reject(error)
}});
第四步: 就是在router 里做取消动作了 router.js
import store from './store';
router.beforeEach((to, from, next) => {
if(store.state['axiosPromiseCancel'].length > 0) {
store.state['axiosPromiseCancel'].forEach(e => {
e && e.f()
});
}
store.state['axiosPromiseCancel'] = [];
})
最新文章
- AutoMapper的介绍与使用(二)
- Jenkins进阶系列之——02email-ext邮件通知模板
- 用javascript实现简单排序算法
- 屏蔽Win10升级通知方法
- (转)mysql各个主要版本之间的差异
- jquery UI Draggable和Droppable 案例
- Memcached总结二:Memcached环境安装设置以及连接memcache服务器
- CSS Hank兼容浏览器的
- 查看UDP连接情况
- gitlab应用
- asp.net mvc项目远程发布到windows server服务器
- Java批量压缩下载
- iis7 设置http 自动跳转到https
- Django REST Framework API Guide 02
- 20款最好的JavaScript开发框架
- PetaPoco在ASP.NET Core 2.2中使用注入方式访问数据库
- SNF快速开发平台MVC-Grid++集成打印
- 注册ActiveX控件
- Javascript的闭包及其使用技巧实例
- Ajax核心技术之XMLHttpRequest
热门文章
- JMeter CSRFToken认证登陆(正则提取器的使用)
- [一本通学习笔记] AC自动机
- Js script type=";text/template";的使用简单说明
- Centos6.5安装Nmap、tcpdump、mysql、tomcat、靶场WAVSEP
- leetcode 925. Long Pressed Name
- js打开新窗口,js打开居中窗口,js打开自定义窗口
- java基础之 变量
- bbs论坛注册功能(1)
- python 请求服务器的本质
- 使用命令行生成动态库dll