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 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
JavaScript创建对象的七种方式全面总结
Aug 21 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
Mar 05 Javascript
详解mpvue实现对苹果X安全区域的适配
Jul 31 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
idea编译器vue缩进报错问题场景分析
Jul 04 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
再说下636单管机
2021/03/02 无线电
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
jQuery弹出层插件Lightbox_me使用指南
2015/04/21 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
理解Angular数据双向绑定
2016/01/10 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
ES6下React组件的写法示例代码
2017/05/04 Javascript
深入探究angular2 UI组件之primeNG用法
2017/07/26 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
JavaScript遍历数组的方法代码实例
2020/01/14 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
[01:06:32]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第一局
2016/02/28 DOTA
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
django使用html模板减少代码代码解析
2017/12/12 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
基于python 微信小程序之获取已存在模板消息列表
2019/08/05 Python
Python实现朴素贝叶斯的学习与分类过程解析
2019/08/24 Python
Python:slice与indices的用法
2019/11/25 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
Django操作session 的方法
2020/03/09 Python
哥伦比亚最大的网上商店:Linio哥伦比亚
2016/09/25 全球购物
积极分子思想汇报
2014/01/04 职场文书
争论的故事教学反思
2014/02/06 职场文书
学校文明单位申报材料
2014/05/06 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
国家助学金感谢信
2015/01/21 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python