vue axios重复点击取消上一次请求封装的方法


Posted in Javascript onJune 19, 2019

使用场景

重复点击或者多tab标签使用一个视图等(当然也可以用加载中或者透明背景禁止请求中再次点击)

封装代码

来自于互联网

let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识
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); 
  }
 }
}

// http请求拦截器
axios.interceptors.request.use(config => {

 removePending(config); //在一个axios发送前执行一下取消操作
 config.cancelToken = new cancelToken((c)=>{
  // 这里的axios标识我是用请求地址&请求方式拼接的字符串,当然你可以选择其他的一些方式
  pending.push({ u: config.url + '&' + config.method, f: c }); 
 });
 
 return Promise.resolve(config)
}, error => {
 return Promise.reject(error)
})

// http响应拦截器
axios.interceptors.response.use(data => { 
 
 removePending(data.config); //在一个axios响应后再执行一下取消操作,把已经完成的请求从pending中移除
 
 return Promise.resolve(data)
 
}, error => {
 //加载失败
 return {'data':{}}
 // return Promise.reject(error)
})

经过多次测试发现不同请求也给我取消了,原因是没有校验请求参数,也就是说get请求可以用,修改以下代码

pending.push({ u: config.url + '&' + config.method, f: c });

修改为:

pending.push({ u: config.url + JSON.stringify(config.data) +'&' + config.method, f: c });//config.data为请求参数

上面判断也需要修改,这样get请求和post都可以用了

解决分析

(个人理解)

官方提供了axios.CancelToken来取消上一次请求方法,因此只需要判断上一次请求是否重复。声明数组变量 pending用于存储每个请求实例的axios标识(请求方式,请求参数,请求url)和该实例的取消函数;在请求拦截器中创建取消函数实例,将请求的标识(判断重复标识)及 该请求实例取消函数 push到pending数组中,创建取消上一次请求方法 removePending,该方法主要判断axios请求标识是否重复,重复则执行该实例的取消函数,并且从 pending中移除标识及该实例取消函数。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
javascript 控制 html元素 显示/隐藏实现代码
Sep 01 Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 Javascript
ASP中Sub和Function的区别说明
Aug 30 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 Javascript
node打造微信个人号机器人的方法示例
Apr 26 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
Seajs源码详解分析
Apr 02 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 Javascript
浅谈JavaScript作用域
Dec 06 Javascript
javascript创建元素和删除元素实例小结
Jun 19 #Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 #Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 #Javascript
js简单遍历获取对象中的属性值的方法示例
Jun 19 #Javascript
ionic4+angular7+cordova上传图片功能的实例代码
Jun 19 #Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
Jun 19 #Javascript
JavaScript箭头函数中的this详解
Jun 19 #Javascript
You might like
PHP print类函数使用总结
2010/06/25 PHP
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
javascript封装的sqlite操作类实例
2015/07/17 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
解析vue中的$mount
2017/12/21 Javascript
详解webpack之scss和postcss-loader的配置
2018/01/09 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
python常用知识梳理(必看篇)
2017/03/23 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
解决Django migrate不能发现app.models的表问题
2019/08/31 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python selenium操作cookie的实现
2020/03/18 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
JD Sports瑞典:英国领先的运动时尚商店
2018/01/28 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
父亲八十大寿答谢词
2014/01/23 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
医院护士见习期自我鉴定
2014/04/10 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
2014年英语工作总结
2014/12/20 职场文书
财务人员岗位职责
2015/02/03 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
普通员工辞职信范文
2015/05/12 职场文书
Python读写yaml文件
2022/03/20 Python
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技
Python中的socket网络模块介绍
2022/07/23 Python