vue解决一个方法同时发送多个请求的问题


Posted in Javascript onSeptember 25, 2018

在项目开发过程中,让人抓狂之一的问题就是一个点击事件,当快速点击的时候,它会重复发送多个请求。这是不允许出现的。

但是怎么解决这个问题呢?

一般处理方法,就是点击的时候,立刻将该按钮disabled,这样就可以避免重复发送请求了。但是我发现这个有一个弊端,那就是:

如果,该事件有许多的验证,比如电话、邮箱格式是否正确呀,必填的是否填了呀等等。一旦你点击就把按钮disabled了,发现该填的没填,回去填完后发现按钮不能点了?那是因为刚才点击的时候被你disabled了,所以还得在验证的方法中取消按钮的disable。就造成了你点击的时候,第一步,将按钮disable了,然后一步一步向下验证,如果验证出错,得取消disable,当所有验证通过了,在请求的回调函数中,成功了也要取消disable,失败了也要取消disable,因为失败了用户多半还会继续点两次,不取消disable会让用户发现怎么点不了了。这就造成了全篇都是按钮disable的设置与取消。一旦有修改,很难维护的。

在vue中,有一个lodash,我们只需引入就可以使用了。比如以下代码:

<template>
 <div>
 <div class="bindBtn">
  <button class="bindDataBtn" @click="postAction">提交</button>
 </div>
 </div>
</template>
<script>
import _ from 'lodash'
export default {
 data() {
 return {
 
 }
 },
 mounted() {
 
 },
 methods: {
 sendAjax(){
  /*这里是请求的接口、参数以及回调函数等*/
 },
 postAction(){
  this.doPostAction()
 }
 },
 created(){
 this.doPostAction = _.debounce(this.sendAjax,500);
 }
}
</script>

我们首先将发送请求的ajax方法写在一个函数里面,在这里就是sendAjax函数,其次,我们引入lodash,然后将sendAjax这个函数用一个方法自定义一下,在这里就是doPostAction,其中_是我们引入的lodash,_.debounce是一个限制操作频率的函数,里面的是500是毫秒单位。

当执行点击事件的时候,也就是postAction函数,我们只需要调用doPostAction这个函数就可以了,而那个500的功能就是你在这个时间段里,无论执行了多少次这个点击事件,它都只会执行一次。

这样就少了我们通篇disable来disable去

最后附上官网例子:点击前往

以上这篇vue解决一个方法同时发送多个请求的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript事件列表解说
Dec 22 Javascript
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
Mar 01 Javascript
js 3种归并操作的实例代码
Oct 30 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
Nov 27 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
微信小程序开发之toast等弹框提示使用教程
Jun 08 Javascript
JavaScript实现封闭区域布尔运算的示例代码
Jun 25 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
Vue2.0学习系列之项目上线的方法步骤(图文)
Sep 25 #Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 #Javascript
vue观察模式浅析
Sep 25 #Javascript
详解搭建es6+devServer简单开发环境
Sep 25 #Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 #Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 #Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 #Javascript
You might like
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
ThinkPHP内置jsonRPC的缺陷分析
2014/12/18 PHP
php在linux下检测mysql同步状态的方法
2015/01/15 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
微信小程序的线程架构【推荐】
2019/05/14 Javascript
微信小程序实现左滑动删除效果
2020/03/30 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
js的新生代垃圾回收知识点总结
2019/08/22 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
Python字符遍历的艺术
2008/09/06 Python
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python 制作糗事百科爬虫实例
2016/09/22 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
对python中Json与object转化的方法详解
2018/12/31 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
英国露营设备和户外服装购物网站:Simply Hike
2019/05/05 全球购物
Java如何支持I18N?
2016/10/31 面试题
一份婚庆公司创业计划书
2014/01/11 职场文书
设计顾问服务计划书
2014/05/04 职场文书
投资意向协议书
2015/01/29 职场文书