ajax请求_重复的ajax请求让人很受伤
重复的ajax请求让人很受伤
重复的ajax请求一波又一波的袭来,服务器正躲在角落里瑟瑟发抖,它内心是崩溃的,这算是遭了罪了, 前端小王子为啥没有做好限制和封锁,真是伤不起啊,哎,不如意事常八九,能与人言无二三...... 以上场景是我们平时在开发中稍微不注意就会重现的,也因此伤了多少服务器的心;我们作为前端开发人员,应该正视而且重视这个问题。在这里,给大家提供以下几种解决方案:
1
UI层面的拦截
当用户动了动发财的小手点击完按钮后,就立即禁用按钮, 并开启等待动画,如果收到服务器的成功响应返回后,再隐藏动画,一定要设置超时,时间不能太长,如果过长,用户会骂街的。
1.$("#submit").prop("disabled",true); //按钮禁用
2.showLoading() //显示动画
3.$.ajax({
...
timeout: 4000, // 设置超时时间
complete:function(){
hideLoading() //隐藏动画
}
})
2
JS层面的封锁
(1) 暴力点击如果用户连续暴力点击按钮,我们可以通过函数防抖来做,其实就是闭包里的setTimeout 与clearTimeout结合使用, 连续的点击会把上一次点击处理函数清掉,我们的 ajax请求会在最后一次点击后再发出去。
obtn.onclick = (function(){
var timer;
return function(){
if(timer){
clearTimeout(timer)
}
timer= setTimeout(() => {
console.log("ajax发送; 查询结果")
}, 500)
}
})()
(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方法实现。具体的代码以及流程可以参考如下。
var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function(thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
不同的使用场景,我们可以灵活的组合以上的解决方案, 不知道这样做的话,是否能挽回服务器的心,我又想起了夕阳下的奔跑,那是我与服务器美好邂逅,也是我们逝去的青春......
更多推荐
- decorator 装饰器
- 如何讲清楚闭包?
- 如何讲清楚JS原型链?
- 如何讲清楚async和await?
- 如何讲清楚Promise?
- 开发Web应用为啥要使用TypeScript?
苦逼的日子,有你真好看见这个分享了吗,点它
ajax请求_重复的ajax请求让人很受伤相关推荐
- axios不发起请求_重复的ajax请求让人很受伤
重复的ajax请求让人很受伤 重复的ajax请求一波又一波的袭来,服务器正躲在角落里瑟瑟发抖,它内心是崩溃的,这算是遭了罪了, 前端小王子为啥没有做好限制和封锁,真是伤不起啊,哎,不如意事常八九,能与 ...
- tab 触发ajax请求,防止重复发送ajax请求的思索
原标题:防止重复发送ajax请求的思索 防止重复发ajax请求是平时开发中遇到频次较高的问题了.我通常解决方案有如下几种, 1.UI限制 点击完按钮后,就禁用按钮, 并开启显示等待动画,收到服务器的成 ...
- ajax保存避免重复提交,ajax 实现防止重复提交
搜索热词 下面是编程之家 jb51.cc 通过网络收集整理的代码片段. 编程之家小编现在分享给大家,也给大家做个参考. 防止ajax重复提交 提交 /** * 模拟ajax提交 * @fn 回调函数 ...
- ajax按钮禁止重复提交,Ajax禁止重复提交
var pendingRequests = []; var generatePendingRequestKey = function (obj) { return obj.data || {}; } ...
- springboot转发http请求_如何实现Http请求报头的自动转发
HeaderForwarder组件不仅能够从当前接收请求提取指定的HTTP报头,并自动将其添加到任何一个通过HttpClient发出的请求中,它同时也提供了一种基于Context/ContextSco ...
- ios开发循环网络请求_如何简化网络请求接口开发
日常开发中,需要大量和后端对接接口,很容易写出大量的模板代码,比如把对接口的请求放到组件内,或者虽然有数据访问层,但是有大量 get,post 方法的调用,传参的字符串拼接,异常处理等等,有些逻辑是可 ...
- java接口允许ajax访问_服务允许AJAX请求,允许跨域请求
当工作时间,因为需要JS 进行AJAX请求,这时候存在跨域问题,当出现这种情况时,有多种方案解决比如使用JSONP,也有一种简单的方式,就是在过滤器里面增加返回请求允许跨域head配置. 代码如下: ...
- axios创建实例对象发送ajax请求_解决一个网页请求多个服务器场景---axios工作笔记009
然后我们再去看看,我们利用 axios去创建实例对象来发送ajax请求 可以看到上面我们创建了一个duanzi的axios对象. 然后我们在这个duanzi的axios对象中,指定默认的baseURL ...
- java的ajax请求_[Java教程]ajax请求技术
[Java教程]ajax请求技术 0 2016-07-21 20:00:03 1.写在前面: 阅读要求: 具有一定的HTML.CSS.JavaScript.Json基础 2.什么是ajax Ajax: ...
最新文章
- 【GLib】GLib学习笔记(二):源码编译
- elasticsearch5.3安装插件head
- 使用jQuery开发tab选项卡插件
- pdf虚拟打印机下载win7_虚拟打印机(smartprinter) v4.2官方版
- Win-MASM64汇编语言-DUP/TIMES
- 企业邮件系统搭建-关于不能往yahoo,sina,hotmail地址发邮件的问题一
- Helm 3 完整教程(八):Helm 函数讲解(2)字符串函数
- 传智播客-刘意-java深入浅出精华版学习笔记Day10
- “L3级”自动驾驶落地指导思想:高速辅助人,低速替代人
- 移动简报026—智慧餐厅出新服务:吃饭用微信就可排队;支付宝上线银行卡安全险:盗刷最高获赔 50 万;高德正式发布车载导航App...
- 通过IMSI判断运营商的方法
- QWebEngineView如何忽略SSL证书错误
- 异地多活场景下的数据同步之道
- WannaCry勒索病毒分析过程**上**
- 理工科er怎么发一作SCI
- 该卸载PhotoShop了!MIT用AI实现3分钟自动抠图,精细到头发丝
- 源于生活的设计之一:职责问题
- 设置路由器自动拨号上网
- 基于单片机的数字温度计及电压表
- 第一季 天龙八部(老)
热门文章
- 用 Python 快速实现 HTTP 和 FTP 服务器
- java创建线程代码_Java创建与结束线程代码示例
- 用于WWW传输控制的是HTML,控制传输
- C语言如何获取文件大小?fseek() + ftell()
- ThreadLocal怎么实现线程隔离的?可见性问题?为什么要重新定义一个threadLocalHashCode?为什么有内存泄露?弱引用又是什么?
- Mocha and Math 运算
- java scoket网络编程_嵌入式狗的JAVA之路 socket 网络编程
- Java强引用、软引用、弱引用、虚引用的区别
- C语言字符型数组ppt,C语言第13讲指针与字符串(字符数组).ppt
- java处理日期的工具类DateUtil