如何防止重复发送ajax请求
先来说说重复发送ajax请求带来的问题 - 场景一:用户快速点击按钮,多次相同的请求打到服务器,给服务器造成压力。如果碰到提交表单操作,而且恰好后端没有做兼容处理,那么可能会造成数据库中插入两条及以上的相同数据 - 场景二:用户频繁切换下拉筛选条件,第一次筛选数据量较多,花费的时间较长,第二次筛选数据量较少,请求后发先至,内容先显示在界面上。但是等到第一次的数据回来之后,就会覆盖掉第二次的显示的数据。筛选结果和查询条件不一致,用户体验很不好
为了解决上述问题,通常会采用以下几种解决方案 - 状态变量
发送ajax请求前,btnDisable置为true,禁止按钮点击,等到ajax请求结束解除限制,这是我们最常用的一种方案
但该方案也存在以下弊端: - 与业务代码耦合度高 - 无法解决上述场景二存在的问题
函数节流和函数防抖
固定的一段时间内,只允许执行一次函数,如果有重复的函数调用,可以选择使用函数节流忽略后面的函数调用,以此来解决场景一存在的问题
也可以选择使用函数防抖忽略前面的函数调用,以此来解决场景二存在的问题
该方案能覆盖场景一和场景二,不过也存在一个大问题: - wait time是一个固定时间,而ajax请求的响应时间不固定,wait time设置小于ajax响应时间,两个ajax请求依旧会存在重叠部分,wait time设置大于ajax响应时间,影响用户体验。总之就是wait time的时间设定是个难题
作为一个成熟的ajax应用,它应该能自己在pending过程中选择请求拦截和请求取消 - 请求拦截
用一个数组存储目前处于pending状态的请求。发送请求前先判断这个api请求之前是否已经有还在pending的同类,即是否存在上述数组中,如果存在,则不发送请求,不存在就正常发送并且将该api添加到数组中。等请求完结后删除数组中的这个api。
请求取消
用一个数组存储目前处于pending状态的请求。发送请求时判断这个api请求之前是否已经有还在pending的同类,即是否存在上述数组中,如果存在,则找到数组中pending状态的请求并取消,不存在就将该api添加到数组中。然后发送请求,等请求完结后删除数组中的这个api
接下来介绍一下本文的主角 的 (查看详情)。通过 的 ,我们可以轻松做到请求拦截和请求取消
官网示例中,先定义了一个 ,定义可以在axios源码目录下找到
示例中调用了的source方法,所以接下来我们再去目录下看看source方法
source方法返回一个具有和属性的对象,这两个属性都和构造函数有关联,所以接下来我们再看看构造函数
所以souce.token是一个CancelToken的实例,而source.cancel是一个函数,调用它会在CancelToken的实例上添加一个reason属性,并且将实例上的promise状态resolve掉
官网另一个示例
它与第一个示例的区别就在于每个请求都会创建一个CancelToken实例,从而它拥有多个cancel函数来执行取消操作
我们执行axios.get,最后其实是执行axios实例上的request方法,方法定义在
request方法返回一个链式调用的promise,等同于
在阅读源码的过程中,这些编程小技巧都是非常值得学些的
接下来看看中的方法
如果是cancel方法立即执行,创建了CancelToken实例上的reason属性,那么就会抛出异常,从而被response拦截器中的rejected方法捕获,并不会发送请求,这个可以用来做请求拦截
如果cancel方法延迟执行,那么我们接着去找中的defaults.adapter
终于找到中的
可以看到xhrAdapter创建了XMLHttpRequest对象,发送ajax请求,在这之后如果执行cancel函数将cancelToken.promise状态resolve掉,就会调用request.abort(),可以用来请求取消
剩下要做的就是将cancelToken从业务代码中剥离出来。我们在项目中,大多都会对axios库再做一层封装来处理一些公共逻辑,最常见的就是在response拦截器里统一处理返回code。那么我们当然也可以将cancelToken的配置放在request拦截器。可参考demo
每次执行request拦截器,判断pendingAjax数组中是否还存在同样的url。如果存在,则删除数组中的这个api并且执行数组中在pending的ajax请求的cancel函数进行请求取消,然后就正常发送第二次的ajax请求并且将该api添加到数组中。等请求完结后删除数组中的这个api
每次执行request拦截器,判断pendingAjax数组中是否还存在同样的url。如果存在,则执行自身的cancel函数进行请求拦截,不重复发送请求,不存在就正常发送并且将该api添加到数组中。等请求完结后删除数组中的这个api
是基于 的封装,针对 ,也有类似的解决方案 查看详情。大家可以针对各自的项目进行选取
如何防止重复发送ajax请求相关推荐
- tab 触发ajax请求,防止重复发送ajax请求的思索
原标题:防止重复发送ajax请求的思索 防止重复发ajax请求是平时开发中遇到频次较高的问题了.我通常解决方案有如下几种, 1.UI限制 点击完按钮后,就禁用按钮, 并开启显示等待动画,收到服务器的成 ...
- [js] 说说防止重复发送ajax请求的方法有哪些?各自有什么优缺点?
[js] 说说防止重复发送ajax请求的方法有哪些?各自有什么优缺点? // 方法一 防抖function debounce(f, ms) { let time; return function(){ ...
- axios不发起请求_重复的ajax请求让人很受伤
重复的ajax请求让人很受伤 重复的ajax请求一波又一波的袭来,服务器正躲在角落里瑟瑟发抖,它内心是崩溃的,这算是遭了罪了, 前端小王子为啥没有做好限制和封锁,真是伤不起啊,哎,不如意事常八九,能与 ...
- ajax请求_重复的ajax请求让人很受伤
重复的ajax请求让人很受伤 重复的ajax请求一波又一波的袭来,服务器正躲在角落里瑟瑟发抖,它内心是崩溃的,这算是遭了罪了, 前端小王子为啥没有做好限制和封锁,真是伤不起啊,哎,不如意事常八九,能与 ...
- JavaWeb 第6章 Ajax 与 JQuery 任务1:使用原生 JavaScript 发送 Ajax请求
JavaWeb 应用设计及实战 目录 上一章 下一章 上一个任务/上一节 下一个任务/下一节 实例链接 点我 目录 任务1 使用原生 JavaScript 发送 Ajax 请求 6. ...
- ajax发送动态字符传,如何发送ajax请求文件与其他字符串的变量?
我想创建ajax调用并发送数据与文件和其他变量,我也使用django,如果它的帮助.如何发送ajax请求文件与其他字符串的变量? 我尝试: js文件: $("#save-new-reques ...
- 使用rest_framework写api接口的一些注意事项(axios发送ajax请求)
1. 类继承GenericAPIView,定义queryset 印象深刻的事: 由于原来对于继承关系不太清楚,写接口 APIView/泛指GenericAPIView不太关注queryset 没有设置 ...
- Vue之axios发送Ajax请求
2.10 axios发送ajax请求 axios github 2.10.1 准备工程 创建一个django工程,例如 login.创建完成之后,再创建一个子应用,例如users.最后再设置一下模板文 ...
- 前端学axios还是ajax,【Web前端问题】axios发送ajax请求问题?
在程序里借助axios库发送ajax请求,但是失败了,返回这个 然而在同一个位置换成jquery的代码却能成功,代码如下,不知axios哪里写的不对??谢谢~ //axios axios.post(& ...
最新文章
- Caffe 中关于 LetNet-5 网络的定义文件 lenet.prototxt 解析
- python web框架对比_Python六大开源框架对比
- python如何安装scrapy_Python爬虫之Scrapy的安装
- java 多线程 总结_Java 多线程总结
- 在CentOS7环境下部署TiDB
- 具有预先训练模型的AI人脸识别
- 米饭里面加点它,4大病症一周见效,一定要告诉家里做饭的人~
- presentation编程软件_编程难学?web相关知识,跟着淼哥学php全栈之路6
- fill函数 神奇的迭代器
- C语言课程设计:课程管理系统
- UDP实时图像传输进阶篇——1080P视频传输
- 机器学习(8)——回归和异常值处理(安然数据集)
- 中英文数据库检索策略对比
- javafx 教程_示例介绍:JavaFX 8打印
- Lib库使用学习笔记
- 很酷的智能家居/工业路由器两用的物联网WiFi模块 MQTT/TCP协议 MIPS+LINUX+Openwrt技术覆盖
- 软件工程——四则运算2
- Creo 3.0-7.0 安装说明
- 微型计算机原理与接口技术 教案,微型计算机原理与接口技术教学网站的设计和开发...
- sql的介绍——SQL Server数据库管理系统
热门文章
- JAVA 2022.7.12课程总结
- IntelliJ IDEA的下载安装
- 1012: 求绝对值(C语言)
- java通过身份证号计算周岁年龄(附js计算)
- Java 循环结构 - for, while 及 do...while
- [19保研]中国科学院自动化研究所“智能计算与控制”大学生暑期夏令营2018年招生简章...
- 20200313_vivox23连接电脑没反应
- 四国军棋游戏V0.3.5(未完成)
- 【Python + Mysql + UI】学生信息管理系统(附代码)
- axure 8 表格合并_CAD插件表格批量提取1.4安装教程