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. springmvc核心技术

    目录 异常处理 类型转换器 数据验证 文件上传与下载 拦截器 异常处理 Spring MVC中, 系统的DAO, Service, Controller层出现异常, 均通过throw Exceptio ...

  2. 分享身为linux爱好者的成长及学习经历

    成长是无尽的阶梯,一步一步的攀登,回望来时的路,会心一笑:转过头,面对前方,无言而努力的继续攀登.现在来和linux爱好者说说我的成长经历,在我的大学时光里我从一个一无所知的少年转变成了一个见多识广的 ...

  3. 关于Phabricator Arcanist以及提交项目代码

    git配置 github的使用:https://github.com/runchen0518/OnlineJudge/blob/master/README.md $ git config --glob ...

  4. 随机函数rand()与srand()

    一.int rand(void); 函数所在的头文件是stdlib.h: 其内部实现线性同除法,不是真正的随机数.通常rand()%x是指在x范围内取模,返回值0-x; 系统默认随机种子是1: 二.v ...

  5. Spring Cloud分布式微服务云架构集成项目

    Spring Cloud集成项目有很多,下面我们列举一下和Spring Cloud相关的优秀项目,我们的企业架构中用到了很多的优秀项目,说白了,也是站在巨人的肩膀上去整合的.在学习Spring Clo ...

  6. [面经]杭州某初创公司FPGA工程师实习

    面试时间:2017年8月17日 面试时长:约1小时 面试形式:面对面 面试公司:杭州某初创公司,致力于开发VR相关产品 面试职位:FPGA工程师(实习) 面试官:公司现任FPGA开发工程师,双控硕士毕 ...

  7. php字符串转数组

    下面代码包括了含有中文汉字的字符. function str2arr($str) { $length = mb_strlen($str, 'utf-8'); $array = []; for ($i= ...

  8. Python Day2 Learning record

    一.python初始化模块                                                        Python的强大之处在于他有非常丰富和强大的标准库和第三方库 ...

  9. SpringCloud----熔断机制 -- 断路器hystrix

    参考借鉴:http://www.cnblogs.com/chry/p/7279856.html SpringCloud Netflix实现了断路器库的名字叫Hystrix. 在微服务架构下,通常会有多 ...

  10. Unity3d对象池

    Singleton.cs 12345678910111213 using UnityEngine;/// <summary>/// 单例模版类/// </summary>pub ...