axios取消重复请求
axios官网文档上取消请求的两种方式
使用CancelToken.source工厂创建一个取消令牌:
[code]var CancelToken = axios.CancelToken; var source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 处理错误 } }); //取消请求(消息参数是可选的) source.cancel('操作被用户取消。');
还可以通过将执行器函数传递给CancelToken构造函数来创建取消令牌:
[code]var CancelToken = axios.CancelToken; var cancel; axios.get('/ user / 12345',{ cancelToken:new CancelToken(function executor(c){ //一个执行器函数接收一个取消函数作为参数 cancel = c; }) }); // 取消请求 clear();
根据文档上的第二种方法,我们可以在拦截器里统一处理取消重复请求
[code]let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识 let cancelToken = axios.CancelToken; let removePending = (config) => { for(let p in pending){ if(pending[p]效果.u === config.url + '&' + config.method) { //当当前请求在数组中存在时执行函数体 pending[p].f(); //执行取消操作 pending.splice(p, 1); //把这条记录从数组中移除 } } } //添加请求拦截器 axios.interceptors.request.use(config=>{ removePending(config); //在一个ajax发送前执行一下取消操作 config.cancelToken = new cancelToken((c)=>{ // 这里的ajax标识我是用请求地址&请求方式拼接的字符串,当然你可以选择其他的一些方式 pending.push({ u: config.url + '&' + config.method, f: c }); }); return config; },error => { return Promise.reject(error); }); //添加响应拦截器 axios.interceptors.response.use(response=>{ removePending(res.config); //在一个ajax响应后再执行一下取消操作,把已经完成的请求从pending中移除 return response; },error =>{ return { data: { } }; 返回一个空对象,主要是防止控制台报错 });
同一个请求,没有完成的请求将被取消
未完成的ajax被取消
结论
利用这个方法,一方面可以防止重复点击不同页码导致的表格数据闪烁,另外可以做实时搜索,始终获取最新结果。
作者:大田角
链接:https://www.jianshu.com/p/4445595488e2
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
- ajax取消重复请求
- vue.js学习笔记(五)--axios中取消请求
- vue项目中 axios请求拦截器与取消pending请求功能
- axios取消请求的实践记录分享
- Retrofit2.0+ RxJava 优雅的取消重复避免并取消请求(十一)
- Retrofit2.0+ RxJava 优雅的取消重复避免并取消请求(十一)
- 防止HttpClient重复请求
- firefox调试::此地址使用了一个通常应该用于其他网页浏览的端口。由于安全原因,Firefox 取消了该请求。
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
- axios发送post请求,springMVC接收不到数据问题
- 使用 Vuex + axios 发送请求
- 如何通过禁用按钮避免jQuery.ajax重复请求
- 防止ajax重复发送请求
- 实时请求获取数据重复显示解决办法
- HTTP代理实现请求报文的拦截与篡改8补--自动设置与取消ADSL拔号连接的代理
- vue2.0 axios发送post请求,后端参数获取不到的解决方式
- NSURLSession如何取消请求
- 详解iOS AFNetworking取消正在进行的网络请求
- 数据库返回的数据由于空格导致请求到的数据出现重复问题