Vue中的同步和異步調(diào)用順序詳解
更新時(shí)間：2022年01月24日 11:55:55 作者：neoeson
這篇文章主要介紹了Vue中的同步和異步調(diào)用順序，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Vue的同步和異步調(diào)用順序
Vue中的方法調(diào)用順序是依次進(jìn)行的，方法體內(nèi)部也是依次執(zhí)行的，但是，兩個(gè)方法體的執(zhí)行順序并不能嚴(yán)格控制。
以下方法中都帶有promise函數(shù)或異步調(diào)用。
?? ?initUserData() {
?? ? ?this.getPsCountryList() // 1 獲取國(guó)家列表stateOptions，方法內(nèi)同步
?? ? ?this.getTimeZone() // 2 獲取時(shí)區(qū)timezones，方法內(nèi)同步
?? ? ?this.getUserInfo() // 3 獲取用戶信息
?? ?}在實(shí)際運(yùn)行中，三個(gè)方法的執(zhí)行順序是1-2-3，但是方法3始終不能獲取到stateOptions和timezones
背后的調(diào)用順序是1-2-3，但是，方法的執(zhí)行時(shí)間并沒(méi)有嚴(yán)格控制。
如果想要做到方法調(diào)用和執(zhí)行是同步的，可以使用async和await修飾符。
例如
?? ?async initUserData() {
?? ? ?await this.getPsCountryList() // 1 獲取國(guó)家列表stateOptions，方法內(nèi)同步
?? ? ?await this.getTimeZone() // 2 獲取時(shí)區(qū)timezones，方法內(nèi)同步
?? ? ?await this.getUserInfo() // 3 獲取用戶信息
?? ?}Vue兩個(gè)異步方法順序執(zhí)行
需求：兩個(gè)異步函數(shù)按順序執(zhí)行，首先獲取第一個(gè)異步函數(shù)的返回的值，接著在第二個(gè)異步函數(shù)里面調(diào)用
方法：先在第一個(gè)異步函數(shù)里返回一個(gè)promise，接著用async和await調(diào)用它
第一個(gè)異步方法
getAllNotice() {
?? ??? ??? ??? ?let data = {
?? ??? ??? ??? ??? ?"searchParams": [{
?? ??? ??? ??? ??? ??? ?"fieldName": "equipmentId",
?? ??? ??? ??? ??? ??? ?"operate": "eq",
?? ??? ??? ??? ??? ??? ?"value": "000000"
?? ??? ??? ??? ??? ?}],
?? ??? ??? ??? ??? ?"size": -1
?? ??? ??? ??? ?}
?? ??? ??? ??? ?return new Promise((resolve) => {
?? ??? ??? ??? ??? ?API.getNotice(data).then(res => {
?? ??? ??? ??? ??? ??? ?console.log(res)
?? ??? ??? ??? ??? ??? ?if (res.data.code == "200") {
?? ??? ??? ??? ??? ??? ??? ?this.noticeList = res.data.data.list
?? ??? ??? ??? ??? ??? ??? ?console.log(this.noticeList)
?? ??? ??? ??? ??? ??? ??? ?resolve();
?? ??? ??? ??? ??? ??? ??? ?return
?? ??? ??? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ??? ??? ?uni.showToast({
?? ??? ??? ??? ??? ??? ??? ??? ?title: res.data.message,
?? ??? ??? ??? ??? ??? ??? ??? ?duration: 1000,
?? ??? ??? ??? ??? ??? ??? ??? ?icon: "none"
?? ??? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ?})?? ??? ??? ??? ?
?? ??? ??? ?},第二個(gè)異步方法
//獲得當(dāng)前的公告列表
?? ??? ??? ?getNowNotice(){
?? ??? ??? ??? ?//獲取當(dāng)前時(shí)間戳
?? ??? ??? ??? ?var timestamp = (new Date()).getTime();
?? ??? ??? ??? ?var _this = this
?? ??? ??? ??? ?console.log(timestamp);
?? ??? ??? ??? ?//將noticeList的結(jié)束時(shí)間轉(zhuǎn)換成時(shí)間戳
?? ??? ??? ??? ?for(var i=0; i<this.noticeList.length; i++){
?? ??? ??? ??? ??? ?var endTimeStamp = TIME.TimeToTimeStamp(this.noticeList[i].endTime)
?? ??? ??? ??? ??? ?console.log(endTimeStamp)
?? ??? ??? ??? ??? ?if(endTimeStamp>timestamp){
?? ??? ??? ??? ??? ??? ?_this.noticeNewList.push(this.noticeList[i])
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ??? ?console.log("noticeNewList",_this.noticeNewList)
?? ??? ??? ?}用async和await
async onLoad(option) {
?? ??? ??? ?await this.getAllNotice()
?? ??? ??? ?await this.getNowNotice()
?? ??? ?},以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用vue構(gòu)建多頁(yè)面應(yīng)用的示例
這篇文章主要介紹了使用vue構(gòu)建多頁(yè)面應(yīng)用的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
vue3封裝一個(gè)帶動(dòng)畫(huà)的關(guān)閉按鈕示例詳解
這篇文章主要為大家介紹了vue3封裝一個(gè)帶動(dòng)畫(huà)的關(guān)閉按鈕示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
Vue?3?表單與后端數(shù)據(jù)交互之查詢并回顯數(shù)據(jù)步驟流程
本文給大家介紹Vue3表單與后端數(shù)據(jù)交互之查詢并回顯數(shù)據(jù)步驟流程,結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-12-12
vue 實(shí)現(xiàn)LED數(shù)字時(shí)鐘效果（開(kāi)箱即用）
這篇文章主要介紹了vue 實(shí)現(xiàn)LED數(shù)字時(shí)鐘效果（開(kāi)箱即用）,每一個(gè)數(shù)字由七個(gè)元素構(gòu)成，即每一個(gè)segment元素，本文給大家分享實(shí)現(xiàn)實(shí)例，感興趣的朋友一起看看吧2019-12-12
vue elementui簡(jiǎn)易側(cè)拉欄的使用小結(jié)
這篇文章主要介紹了vue elementui簡(jiǎn)易側(cè)拉欄的使用,增加了側(cè)拉欄,目的是可以選擇多條數(shù)據(jù)展示數(shù)據(jù),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要介紹了Vue腳手架中的 render 理解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細(xì)介紹了vue仿ios列表左劃刪除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要為大家詳細(xì)介紹了vue v-model表單控件綁定的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
vue+element-ui實(shí)現(xiàn)主題切換功能
這篇文章主要介紹了vue+element-ui實(shí)現(xiàn)主題切換功能，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06
vue+el-menu實(shí)現(xiàn)菜單欄無(wú)限多層級(jí)分類
這篇文章主要為大家詳細(xì)介紹了vue+el-menu實(shí)現(xiàn)菜單欄無(wú)限多層級(jí)分類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03