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

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

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

一般处理方法，就是点击的时候，立刻将该按钮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解决一个方法同时发送多个请求相关推荐

在springmvc中controller的一个方法处理多个不同请求
value的uri值为以下三类: A) 可以指定为普通的具体值: B) 可以指定为含有某变量的一类值(URI Template Patterns with Path Variables): @Req ...
java使用POST发送soap报文请求webservice返回500错误解析
本文使用JAX-WS2.2编译webservice,并使用HttpUrlConnection的POST方式对wsdl发送soap报文进行请求返回数据, 对错误Server returned HTTP ...
一个Https网站发送Http的 ajax请求的解决方法
一个Https网站发送Http的 ajax请求的解决方法参考文章: (1)一个Https网站发送Http的 ajax请求的解决方法 (2)https://www.cnblogs.com/yuming ...
vue在一个方法执行完后执行另一个方法
vue在一个方法执行完后执行另一个方法用Promise来实现. Promise是ES6的新特性,用于处理异步操作逻辑,用过给Promise添加then和catch函数,处理成功和失败的情况 ES7中 ...
Vue通过Axios向后台发送Post请求，浏览器Console提示405，后台显示Get请求不支持--解决办法
Vue通过Axios向后台发送Post请求,浏览器Console提示405,后台显示Get请求不支持–解决办法问题场景: axios默认是发送get请求,我要给后台发送一组用户填写的表单数据,逻辑简 ...
ASP.NET一般处理程序新建一个方法里使用context.Response.Write的解决方法
ASP.NET一般处理程序新建一个方法里使用context.Response.Write的解决方法参考文章: (1)ASP.NET一般处理程序新建一个方法里使用context.Response.Wr ...
解决：vue 用 axios 发送请求，每次都会发送两次请求
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 我的解决方法是后端加一个过滤器: package gentle.filter;import java ...
vue学习笔记之：为何data是一个方法
vue学习笔记之:为何data是一个方法在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
在同一个类中，一个方法调用另外一个有注解（比如@Async，@Transational）的方法，注解失效的原因和解决方法
在同一个类中,一个方法调用另外一个有注解(比如@Async,@Transational)的方法,注解失效的原因和解决方法参考文章: (1)在同一个类中,一个方法调用另外一个有注解(比如@Async, ...

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

vue解决一个方法同时发送多个请求相关推荐

最新文章

热门文章