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 相关文章推荐
JQuery+CSS提示框实现思路及代码(纯手工打造)
May 07 Javascript
理解JavaScript事件对象
Jan 25 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
AngularJS中$http使用的简单介绍
Mar 17 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
vue2.0结合Element实现select动态控制input禁用实例
May 12 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
Vue 去除路径中的#号
Apr 19 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
解决LayUI数据表格复选框不居中显示的问题
Sep 25 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
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
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
cache_lite试用
2007/02/14 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
动态加载js和css(外部文件)
2013/04/17 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
JQuery实现定时刷新功能代码
2017/05/09 jQuery
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
JavaScript实现新年倒计时效果
2018/11/17 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
2019/03/19 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
十分钟教你上手ES2020新特性
2020/02/12 Javascript
如何基于js判断浏览器版本
2020/02/20 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
简单谈谈python中的Queue与多进程
2016/08/25 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
Python:slice与indices的用法
2019/11/25 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
Pytorch中.new()的作用详解
2020/02/18 Python
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
好家长事迹材料
2014/01/23 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
让生命充满爱观后感
2015/06/08 职场文书
服务器间如何实现文件共享
2022/05/20 Servers