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定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
Sep 01 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
javascript自定义滚动条实现代码
Apr 20 Javascript
关于RequireJS的简单介绍即使用方法
Oct 20 Javascript
jquery.validate表单验证插件使用详解
Jun 21 jQuery
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
微信小程序中使用echarts的实现方法
Apr 24 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 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
Discuz! Passport 通行证整合
2008/03/27 PHP
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
php Rename 更改文件、文件夹名称
2011/05/24 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
thinkphp中memcache的用法实例
2014/11/29 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
2018/10/31 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
Python pass 语句使用示例
2014/03/11 Python
Python3处理文件中每个词的方法
2015/05/22 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
python数字图像处理之高级滤波代码详解
2017/11/23 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
python实现逐个读取txt字符并修改
2018/12/24 Python
Python中的集合介绍
2019/01/28 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
瑞士灯具购物网站:Lampenwelt.ch
2018/07/08 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
创新型城市实施方案
2014/03/06 职场文书
入股协议书
2014/04/14 职场文书
新法人代表任命书
2014/06/06 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书