1. 程式人生 > 實用技巧 >【js】Promise.all食用指南

【js】Promise.all食用指南

我之前看Promise,裡面有個方法叫all,因為介面是非同步的,當你的業務必須拿到幾個不同介面的所有資料後,再進行比較或者邏輯操作,這個時候就可以用到這個方法。
此處貼上示例程式碼,是以Vue2為框架的背景下:

 // 搭配async await 進一步優化
 // 介面1
 async getA(){
  // return一個Promise例項物件
  return await new Promise((resolve,reject)=>{
       this.API1().then(res=>{
           resolve(res)
        })
    }).catch(error => {
     console.log(error)
   })
  }
 // 介面2
 async getB(){
  // return一個Promise例項物件
  return await new Promise((resolve,reject)=>{
       this.API1().then(res=>{
           resolve(res)
        })
    }).catch(error => {
     console.log(error)
   })
}

 `promise.all是等待所有非同步資源載入完畢後再執行程式碼。`
 // 引數是一個數組,數組裡面是一個個介面方法呼叫
 // 注意:如果有一個介面失敗都不能成功返回
getPromiseAll([this.getA(),this.getB()]).then(res=>{
    console.log(res)  //  [{data:{...}},{data:{...}}]  返回一個數組,陣列的元素代表不同介面的響應資料
})