vue實現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例
用Promise來實現(xiàn)
function2(){
// 你的邏輯代碼
return Promise.resolve(/* 這里是需要返回的數(shù)據(jù)*/)
}
function3(){
// 你的邏輯代碼
return Promise.resolve(/* 這里是需要返回的數(shù)據(jù)*/)
}
// 調用
function1(){
this.function2().then(val => {
this.function3();
});
}
拓展知識:vue解決一個方法同時發(fā)送多個請求的問題
在項目開發(fā)過程中,讓人抓狂之一的問題就是一個點擊事件,當快速點擊的時候,它會重復發(fā)送多個請求。這是不允許出現(xiàn)的。
但是怎么解決這個問題呢?
一般處理方法,就是點擊的時候,立刻將該按鈕disabled,這樣就可以避免重復發(fā)送請求了。但是我發(fā)現(xiàn)這個有一個弊端,那就是:
如果,該事件有許多的驗證,比如電話、郵箱格式是否正確呀,必填的是否填了呀等等。一旦你點擊就把按鈕disabled了,發(fā)現(xiàn)該填的沒填,回去填完后發(fā)現(xiàn)按鈕不能點了?那是因為剛才點擊的時候被你disabled了,所以還得在驗證的方法中取消按鈕的disable。就造成了你點擊的時候,第一步,將按鈕disable了,然后一步一步向下驗證,如果驗證出錯,得取消disable,當所有驗證通過了,在請求的回調函數(shù)中,成功了也要取消disable,失敗了也要取消disable,因為失敗了用戶多半還會繼續(xù)點兩次,不取消disable會讓用戶發(fā)現(xiàn)怎么點不了了。這就造成了全篇都是按鈕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(){
/*這里是請求的接口、參數(shù)以及回調函數(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ù),我們只需要調用doPostAction這個函數(shù)就可以了,而那個500的功能就是你在這個時間段里,無論執(zhí)行了多少次這個點擊事件,它都只會執(zhí)行一次。
這樣就少了我們通篇disable來disable去
最后附上官網例子:點擊前往
以上這篇vue實現(xiàn)在一個方法執(zhí)行完后執(zhí)行另一個方法的示例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
詳解Vue3.0 + TypeScript + Vite初體驗
這篇文章主要介紹了詳解Vue3.0 + TypeScript + Vite初體驗,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-02-02
Vue導入excel表,導入失敗的數(shù)據(jù)自動下載
本文詳細講解了Vue導入excel表,導入失敗的數(shù)據(jù)自動下載的方法,文中通過示例代碼介紹的非常詳細。對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-11-11

