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阻止请求多次发送的更多相关文章

  1. 使用Typescript重构axios(五)——实现基础功能:处理请求的header

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  2. iOS之防止用户重复点击Button(按钮)问题

    在项目中,我们往往会遇到这样的问题:因为网络较慢的原因,用户会不耐烦的一直去点击按钮,这样导致的结果时:相关代码一遍一遍的被重复执行,如果按钮的事件是网络请求的话,这样又导致一种网络请求的循环.所以我 ...

  3. 谈谈防止Ajax重复点击提交

    首先说说防止重复点击提交是什么意思. 我们在访问有的网站,输入表单完成以后,单击提交按钮进行提交以后,提交按钮就会变为灰色,用户不能再单击第二次,直到重新加载页面或者跳转.这样,可以一定程度上防止用户 ...

  4. iOS防止button重复点击

    项目中常会遇到在按钮的点击事件中去执行一些耗时操作.如果处理不当经常会出现连续多次点击push多次的情况,造成不好的用户体验. 一种情况是用户快速连续点击,这种情况无法避免.另一种情况是点击一次后响应 ...

  5. 限制 button 在 3 秒内不可重复点击

    在下载或者上传文件过程中避免重复点击带来的多次同样的请求造成资源浪费,限制 button 的点击次数是很有必要的. 1. 增强用户体验,2. 减轻服务器压力. HTML 代码 <button i ...

  6. springboot实现防重复提交和防重复点击

    背景 同一条数据被用户点击了多次,导致数据冗余,需要防止弱网络等环境下的重复点击 目标 通过在指定的接口处添加注解,实现根据指定的接口参数来防重复点击 说明 这里的重复点击是指在指定的时间段内多次点击 ...

  7. 关于Android避免按钮重复点击事件

    最近测试人员测试我们的APP的时候,喜欢快速点击某个按钮,出现一个页面出现多次,测试人员能不能禁止这样.我自己点击了几下,确实存在这个问题,也感觉用户体验不太好.于是乎后来我搜了下加一个方法放在我们U ...

  8. 关于javascript中限定时间内防止按钮重复点击的思路

    前面的话 有一天心血来潮,1分钟内重复点击了多次博客园首页的刷新博文列表的刷新按钮.果不其然,ip当时就被禁用了.后来,重启自己的路由器,重新获取ip才可以访问博客园主页.那么,设置一个限定时间内(比 ...

  9. asp.net中如何防止用户重复点击提交按钮

    asp.net中如何防止用户重复点击提交按钮   asp.net 中防止因为网速慢等影响交互的问题导致用户可能点击多次提交按钮,从而导致数据库中出现多条重复的记录,经过亲自验证在网上找的方法,找到两个 ...

随机推荐

  1. C# 加载并显示菜单

    1,支持cui和cuix. 2,菜单组重复加载或显示,C#下都会崩溃.所以要判断. 3,菜单加到最后. public static AcadMenuGroup LoadMenu(AcadMenuGro ...

  2. 记录PHP的执行时间

    网上不少误导信息,实际上这个答案在PHP源码中的Zend文件夹下bench.php是有的 在此纠正下网络上复制粘贴造成的错误.希望后来人少踩点坑. function getmicrotime() { ...

  3. MFC如何在树形图边上添加动态小地图

    MFC如何在树形图边上添加动态小地图 https://www.jianshu.com/p/7b1d828bf5db (简书无法识别缩进的...早知道先在博客园发了) (转载请注明出处) 作者:梦镜谷雨 ...

  4. Java Spring 在线程中或其他位置获取 ApplicationContext 或 ServiceBean

    部分一转载自:http://blog.csdn.net/yang123111/article/details/32099329 via @yang123111 部分二转载自:http://www.cn ...

  5. h265文件分析(纯c解析代码)

    参考链接: 1. HEVC码流解析 https://blog.csdn.net/CrystalShaw/article/details/80624804   2. HEVC编码结构:序列参数集SPS. ...

  6. Java中的volatile变量有什么作用?

    vlolatile是一个特殊的的修饰符,只能修饰成员变量,在Java并发程序缺少同步类的情况下,多线程对成员变量的操作对其他线程是透明的.volatilel变量可以保证下一个读取操作会在前一个写操作之 ...

  7. MySQL data sync to Oracle with OGG(Remote Delivery)

    MySQL to Oracle with OGG 1. Install MySQL: yum install mysql-community-server [root@localhost ~]#  y ...

  8. Springboot 的错误处理功能的实现

    一.页面的形式返回 直接在resources的目录下创建public/error的路径,然后创建5xx.html或者4xx.html文件,如果出错就会自动跳转的相应的页面. 二.cotroller的形 ...

  9. Shiro的认识

    #2019.2.2 Apache Shiro是基于java的一个安全框架.他帮助我们完成:认证.授权.加密.会话管理.web集成.缓存等问题. 在了Shiro之前,先要了解一下什么是权限管理? 权限管 ...

  10. Qt 快捷键