vue解決一個方法同時傳送多個請求的問題
在專案開發過程中,讓人抓狂之一的問題就是一個點選事件,當快速點選的時候,它會重複傳送多個請求。這是不允許出現的。
但是怎麼解決這個問題呢?
一般處理方法,就是點選的時候,立刻將該按鈕disabled,這樣就可以避免重複傳送請求了。但是我發現這個有一個弊端,那就是:
前端精品教程:百度網盤下載
如果,該事件有許多的驗證,比如電話、郵箱格式是否正確呀,必填的是否填了呀等等。一旦你點選就把按鈕disabled了,發現該填的沒填,回去填完後發現按鈕不能點了?那是因為剛才點選的時候被你disabled了,所以還得在驗證的方法中取消按鈕的disable。就造成了你點選的時候,第一步,將按鈕disable了,然後一步一步向下驗證,如果驗證出錯,得取消disable,當所有驗證通過了,在請求的回撥函式中,成功了也要取消disable,失敗了也要取消disable,因為失敗了使用者多半還會繼續點兩次,不取消disable會讓使用者發現怎麼點不了了。這就造成了全篇都是按鈕disable的設定與取消。一旦有修改,很難維護的。
在vue中,有一個lodash,我們只需引入就可以使用了。比如以下程式碼:
前端精品教程:百度網盤下載
?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<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去
最後附上官網例子:點選前往