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 相关文章推荐
Dojo 学习笔记入门篇 First Dojo Example
Nov 15 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
javascript实现切换td中的值
Dec 05 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
Vue 短信验证码组件开发详解
Feb 14 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
分享一个vue实现的记事本功能案例
Apr 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
认识并使用PHP超级全局变量
2010/01/26 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
yii2安装详细流程
2018/05/23 PHP
phpstudy隐藏index.php的方法
2020/09/21 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
用 JavaScript 迁移目录
2006/12/18 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
jquery实现异步文件上传ajaxfileupload.js
2020/10/23 jQuery
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
Python单体模式的几种常见实现方法详解
2017/07/28 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
python3 读取Excel表格中的数据
2018/10/16 Python
学习python的前途 python挣钱
2019/02/27 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
基于HTML5 Canvas:字符串,路径,背景,图片的详解
2013/05/09 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
三年级数学教学反思
2014/01/31 职场文书
关于保护环境的建议书
2014/08/26 职场文书
债务授权委托书范本
2014/10/17 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
python获取带有返回值的多线程
2022/05/02 Python
springboot实现string转json json里面带数组
2022/06/16 Java/Android