目錄

• 的同步和非同步呼叫順序
• 例如
• Vue兩個非同步方法順序執行
• 第一個非同步方法
• 第二個非同步方法

Vue的同步和非同步呼叫順序

Vue中的方法呼叫順序是依次進行的，方法體內部也是依次執行的，但是，兩個方法體的執行順序並不能嚴格控制。

以下方法中都帶有promise函式或非同步呼叫。

 initUserData() {
  this.getPsCountryList() // 1 獲取國家列表stateOptions，方法內同步
  this.getTimeZone() // 2 獲取時區timezones，方法內同步
  this.getUserInfo() // 3 獲取使用者資訊
 }

在實際執行中，三個方法的執行順序是1-2-3，但是方法3始終不能獲取到stateOptions和timezones

背後的呼叫順序是1-2-3，但是，方法的執行時間並沒有嚴格控制。

如果想要做到方法呼叫和執行是同步的，可以使用async和await修飾符。

例如

 async initUserData() {
  await this.getPsCountryList() // 1 獲取國家列表stateOptions，方法內同步
  await this.getTimeZone() // 2 獲取時區timezones，方法內同步
  await this.getUserInfo() // 3 獲取使用者資訊
 }

Vue兩個非同步方法順序執行

需求：兩個非同步函式按順序執行，首先獲取第一個非同步函式的返回的值，接著在第二個非同步函式裡

方法：先在第一個非同步函式裡返回一個promise，接著用async和await呼叫它

第一個非同步方法

getAllNotice() {
    let data = {
     "searchParams": [{
      "fieldName": "equipmentId","operate": "eq","value":http://www.cppcns.com "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: nFlHjvCPWh
 
res.data.message,duration: 1000,icon: "none"
       })
      }
     })
    })    
   },

第二個非同步方法

//獲得當前的公告列表
   getNowNotice(){
    //獲取當前時間戳
    var timestamp = (new Date()).getTime();
    var _this = this
    console.log(timestamp);
    //將noticeList的結束時間轉換成時間戳
    for(var i=0; i<this.noticeList.length; i++){
     var endTimeStamp = TIME.TimeToTimeStamp(this.noticeList[i].endTime)
     console.log(endTimeStamp)
     if(endTimeStamp&www.cppcns.comgt;timestamp){
      _this.noticeNewList.push(this.noticeList[i])
     }
    }
    console.log("noticeNewList",_this.noticeNewList)
   }

用async和await

async onLoad(option) {
   await this.getAllNotice()
   await this.getNowNotice(nFlHjvCPWh)
  },

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援我們。