如何避免ajax重复请求？

2024-06-09 06:14:29

在前端开发的过程中，如果没有注意限制和封锁经常会出现很多重复的ajax请求，导致服务器压力很大，今天小千就来给大家提供几个解决方案，看到就是赚到。

1. UI层面的拦截

当用户动了动发财的小手点击完按钮后，就立即禁用按钮，并开启等待动画，如果收到服务器的成功响应返回后，再隐藏动画，一定要设置超时，时间不能太长，如果过长，用户会骂街的。

2. JS层面的封锁

(1) 暴力点击

如果用户连续暴力点击按钮，我们可以通过函数防抖来做，其实就是闭包里的setTimeout 与clearTimeout结合使用, 连续的点击会把上一次点击处理函数清掉，我们的 ajax请求会在最后一次点击后再发出去。

(2)多tab页快速切换

多个tab页快速切换也是常见的场景，如果用户从tab1快速切换到tab2，再从tab2快速切换到tab1，不避免的同一个tab 要重复发起多次请求。

还有一个问题就是，在单页面应用中，切换tab后dom 结构销毁了，此时数据回来了，如果去操作了已经销毁的dom，那么控制台会报错。而在vue ，react 等不需要开发者手动操作的dom的框架，如果我们去修改状态，还会报出如下的警告信息，这就很难看了。

解决这个问题的思路就是abort掉上一个请求。XMLHttpRequest对象有abort方法，可以直接调用。

如果使用第三方的请求库的话，比如axios，我们可以为我们的请求创建一个cancel token ,在每个请求设置一个token，在页面切换，或者组件销毁前，只需要通过source.cancel取消就好了，其实原理还是通过xhr的abort方法实现。

具体的代码以及流程可以参考如下。

不同的使用场景，我们可以灵活的组合以上的解决方案，不知道这样做的话，是否能挽回服务器的心，我又想起了夕阳下的奔跑，那是我与服务器美好邂逅，也是我们逝去的青春…

本文来自千锋教育，转载请注明出处

如何避免ajax重复请求？相关推荐

取消Ajax请求 || Ajax重复请求问题
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
DWZ基于ajax重复请求的修复
在同一个通用上传插件,每次都需要客户端去请求服务器,返回的html页面,如果请求的间隔很短的话,ajax会认为是重复作废的请求,这个时候需要修改一下源码来达到在短时间内重复请求也能得到响应找到js/d ...
php 禁止ajax 重复请求,js ajax请求防止重复提交
好长时间没写js代码了刚好遇到这样的问题.我们系统多数表单没有做防止重复提交的. 由于不想在后端这边处理,因为假如由后端处理的话,就需要在页面加载的时候给出一次性的token值,加大了开发的工作量不说 ...
技术分享：如何避免ajax重复请求？
在前端开发的过程中,如果没有注意限制和封锁经常会出现很多重复的ajax请求,导致服务器压力很大.今天小千就来给大家提供几个解决方案,看到就是赚到. 1.UI层面的拦截当用户动了动发财的小手点击完按钮 ...
避免Ajax多次发送重复请求
第一:多次发送Ajax重复请求由于系统使用Ajax请求时,没有对Ajax重复请求做处理,导致多次重复发送Ajax请求时,前台数据会出现重复加载的问题. 解决方案: 怎样防止重复发送 Ajax 请求? ...
ajax前端取消用户发送重复请求
回到文章总目录 ajax重复发送请求发送相同的请求. 我们的用户不断点击某个发送请求,服务端响应比较慢或者响应快,都回提升服务端的压力. 我们在前端设置好响应机制,减少服务端的压力. 前端设置通通的 ...
Ajax中请求被缓存的问题
Ajax中请求被缓存的问题在Ajax开发中,会遇到浏览器缓存内容的问题,比如,某个元素注册了鼠标事件(onmouseover),事件触发后会通过 xmlhttprequest到服务器获取内容,在不刷 ...
php ajax jquery 表单重复提交,Jquery 防止Ajax重复提交权威解决方案
/** * jquery ajax请求过滤,防止ajax请求重复发送,对ajax发送错误时进行统一处理 */ $(function(){ var pendingRequests = {}; // 所有 ...
java 防止url重复请求_Web项目如何防止客户端重复发送请求
在Web项目中,有一些请求或操作会对数据产生影响(比如新增.删除.更新),针对这类请求一般都需要做一些保护,以防止用户有意或无意的重复发起这样的请求导致的数据错乱. 本文总结了一些防止客户端重复发送请 ...

最新文章

热门文章