axios 重复点击利用CancelToken阻止请求多次发送
import axios from 'axios';
axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';
let pending = []; //声明一个数组用于存储每个ajax请求的取消函数和ajax标识
let cancelToken = axios.CancelToken;
let removePending = (ever) => {
for(let p in pending){
if(pending[p].u === ever.url + '&' + ever.method) { //当当前请求在数组中存在时执行函数体
pending[p].f(); //执行取消操作
pending.splice(p, 1); //把这条记录从数组中移除
}
}
}
//http request 拦截器
axios.interceptors.request.use(
config => {
config.data = JSON.stringify(config.data);
config.headers = {
'Content-Type':'application/x-www-form-urlencoded'
}
// ------------------------------------------------------------------------------------
removePending(config); //在一个ajax发送前执行一下取消操作
config.cancelToken = new cancelToken((c)=>{
// 这里的ajax标识我是用请求地址&请求方式拼接的字符串,当然你可以选择其他的一些方式
pending.push({ u: config.url + '&' + config.method, f: c });
});
// -----------------------------------------------------------------------------------------
return config;
},
error => {
return Promise.reject(err);
}
);
//http response 拦截器
axios.interceptors.response.use(
response => {
// ------------------------------------------------------------------------------------------
removePending(res.config); //在一个ajax响应后再执行一下取消操作,把已经完成的请求从pending中移除
// -------------------------------------------------------------------------------------------
if(response.data.errCode ==2){
router.push({
path:"/login",
querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
})
}
return response;
},
error => {
return Promise.reject(error)
}
)
axios 重复点击利用CancelToken阻止请求多次发送的更多相关文章
- 使用Typescript重构axios(五)——实现基础功能:处理请求的header
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- iOS之防止用户重复点击Button(按钮)问题
在项目中,我们往往会遇到这样的问题:因为网络较慢的原因,用户会不耐烦的一直去点击按钮,这样导致的结果时:相关代码一遍一遍的被重复执行,如果按钮的事件是网络请求的话,这样又导致一种网络请求的循环.所以我 ...
- 谈谈防止Ajax重复点击提交
首先说说防止重复点击提交是什么意思. 我们在访问有的网站,输入表单完成以后,单击提交按钮进行提交以后,提交按钮就会变为灰色,用户不能再单击第二次,直到重新加载页面或者跳转.这样,可以一定程度上防止用户 ...
- iOS防止button重复点击
项目中常会遇到在按钮的点击事件中去执行一些耗时操作.如果处理不当经常会出现连续多次点击push多次的情况,造成不好的用户体验. 一种情况是用户快速连续点击,这种情况无法避免.另一种情况是点击一次后响应 ...
- 限制 button 在 3 秒内不可重复点击
在下载或者上传文件过程中避免重复点击带来的多次同样的请求造成资源浪费,限制 button 的点击次数是很有必要的. 1. 增强用户体验,2. 减轻服务器压力. HTML 代码 <button i ...
- springboot实现防重复提交和防重复点击
背景 同一条数据被用户点击了多次,导致数据冗余,需要防止弱网络等环境下的重复点击 目标 通过在指定的接口处添加注解,实现根据指定的接口参数来防重复点击 说明 这里的重复点击是指在指定的时间段内多次点击 ...
- 关于Android避免按钮重复点击事件
最近测试人员测试我们的APP的时候,喜欢快速点击某个按钮,出现一个页面出现多次,测试人员能不能禁止这样.我自己点击了几下,确实存在这个问题,也感觉用户体验不太好.于是乎后来我搜了下加一个方法放在我们U ...
- 关于javascript中限定时间内防止按钮重复点击的思路
前面的话 有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮.果不其然,ip当时就被禁用了.后来,重启自己的路由器,重新获取ip才可以访问博客园主页.那么,设置一个限定时间内(比 ...
- asp.net中如何防止用户重复点击提交按钮
asp.net中如何防止用户重复点击提交按钮 asp.net 中防止因为网速慢等影响交互的问题导致用户可能点击多次提交按钮,从而导致数据库中出现多条重复的记录,经过亲自验证在网上找的方法,找到两个 ...
随机推荐
- Python-接口自动化(十)
ddt+unnittest+excel处理测试数据(九) (十一)ddt 1.利用ddt实现数据驱动,ddt是第三方模块,在终端输入pip install ddt 进行安装 导入:from ddt i ...
- SpringBoot配置ActiveMQ
1.添加依赖 <!-- activeMQ --> <dependency> <groupId>org.springframework.boot</groupI ...
- 记-统计svn与git的log日志中的代码行变更
任务要求 统计指定时间内,指定git地址与svn地址上的所有人员的代码行变更情况. 解决方案 最初为根据数据库中存储的所有git与svn地址来统计所有人员的提交代码行.之后由于库中存储的地址不全,改为 ...
- js 取一定范围内的整数
function selectNum(lowNum,upNum) { var num = upNum-lowNum+1; // Math.floor() 向下取整 return Math.floor( ...
- php短信验证码接口接入流程及代码示例
对于绝大部分企业来说,所使用的短信验证码接口都是第三方短信服务商所提供,目前市场上短信服务商有很多,在此向大家推荐一家动力思维乐信,运营13年,值得信赖! 就拿动力思维乐信短信验证码接口为例,详细介绍 ...
- C#的ArrayList与JS的push,转字符串逗号分隔
拼接字符串是常用的基本代码,但是还是有很多人习惯用"+"拼接字符串,这样做有以下缺点: 1)为了去掉尾部(或头部)分隔符,写法复杂 2)容易出现BUG报错,比如空值 C#中推荐大家 ...
- CentOS6.5 - yum对Mysql的安装与配置
一.mysql的安装 1.查看是否安装mysql [root@localhost ~]# rpm -qa | grep mysql 如果有进行卸载(以下三种方式选一种即可): -.el6.x86_64 ...
- python异常(概念、捕获、传递、抛出)
异常 目标 异常的概念 捕获异常 异常的传递 抛出异常 01. 异常的概念 程序在运行时,如果 Python 解释器 遇到 到一个错误,会停止程序的执行,并且提示一些错误信息,这就是 异常 程序停止执 ...
- WINDOWS SERVER 2016 IE使用FLASH PLAYER的方法
Windows Server 2016出于安全的考虑,默认禁用了Flash Player.把Windows Server 2016作为日常操作系统的童鞋会发现,IE里完全没有Flash Player这 ...
- Groovy学习笔记-使用多赋值
1.方法返回多个结果:返回数组,将多个变量逗号隔开,放在左侧圆括号中 def splitName (fullName) { fullName.split(' ') } def (firstName, ...