快捷導(dǎo)航

vue解決一個方法同時發(fā)送多個請求的問題

更新時間：2018年09月25日 14:14:35 作者：狂野的心跳

今天小編就為大家分享一篇vue解決一個方法同時發(fā)送多個請求的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

在項目開發(fā)過程中，讓人抓狂之一的問題就是一個點擊事件，當快速點擊的時候，它會重復(fù)發(fā)送多個請求。這是不允許出現(xiàn)的。

但是怎么解決這個問題呢？

一般處理方法，就是點擊的時候，立刻將該按鈕disabled，這樣就可以避免重復(fù)發(fā)送請求了。但是我發(fā)現(xiàn)這個有一個弊端，那就是：

如果，該事件有許多的驗證，比如電話、郵箱格式是否正確呀，必填的是否填了呀等等。一旦你點擊就把按鈕disabled了，發(fā)現(xiàn)該填的沒填，回去填完后發(fā)現(xiàn)按鈕不能點了？那是因為剛才點擊的時候被你disabled了，所以還得在驗證的方法中取消按鈕的disable。就造成了你點擊的時候，第一步，將按鈕disable了，然后一步一步向下驗證，如果驗證出錯，得取消disable，當所有驗證通過了，在請求的回調(diào)函數(shù)中，成功了也要取消disable，失敗了也要取消disable，因為失敗了用戶多半還會繼續(xù)點兩次，不取消disable會讓用戶發(fā)現(xiàn)怎么點不了了。這就造成了全篇都是按鈕disable的設(shè)置與取消。一旦有修改，很難維護的。

在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(){
  /*這里是請求的接口、參數(shù)以及回調(diào)函數(shù)等*/
 },
 postAction(){
  this.doPostAction()
 }
 },
 created(){
 this.doPostAction = _.debounce(this.sendAjax,500);
 }
}
</script>

我們首先將發(fā)送請求的ajax方法寫在一個函數(shù)里面，在這里就是sendAjax函數(shù)，其次，我們引入lodash，然后將sendAjax這個函數(shù)用一個方法自定義一下，在這里就是doPostAction，其中_是我們引入的lodash，_.debounce是一個限制操作頻率的函數(shù)，里面的是500是毫秒單位。

當執(zhí)行點擊事件的時候，也就是postAction函數(shù)，我們只需要調(diào)用doPostAction這個函數(shù)就可以了，而那個500的功能就是你在這個時間段里，無論執(zhí)行了多少次這個點擊事件，它都只會執(zhí)行一次。

這樣就少了我們通篇disable來disable去

最后附上官網(wǎng)例子：點擊前往

以上這篇vue解決一個方法同時發(fā)送多個請求的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: