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 31 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
详解基于angular路由的requireJs按需加载js
Jan 20 Javascript
jQuery快速高效制作网页交互特效
Feb 24 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
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下实现折线图效果的代码
2007/04/28 PHP
网页常用特效代码整理
2006/06/23 Javascript
一个对于Array的简单扩展
2006/10/03 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
javascript时间自动刷新实现原理与步骤
2013/01/06 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
jQuery中:animated选择器用法实例
2014/12/29 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
python通过post提交数据的方法
2015/05/06 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
Form表单及django的form表单的补充
2019/07/25 Python
使用Python的turtle模块画国旗
2019/09/24 Python
详解Python绘图Turtle库
2019/10/12 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Python ini文件常用操作方法解析
2020/04/26 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
信息管理专业推荐信
2013/10/29 职场文书
统计员岗位职责
2013/11/14 职场文书
小学班级口号
2014/06/09 职场文书
入党积极分子对十八届四中全会期盼的思想汇报
2014/10/17 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
VUE递归树形实现多级列表
2022/07/15 Vue.js