1. 程式人生 > 其它 >Promise.all方法和Promise.race方法

Promise.all方法和Promise.race方法

Promise.all 方法用於將多個 Promise 例項,包裝成一個新的 Promise 例項。

var p = Promise.all([p1,p2,p3]);

Promise.all 方法用於將多個 Promise 例項,包裝成一個新的 Promise 例項。

上面程式碼中,Promise.all 方法接受一個數組作為引數,p1、p2、p3 都是 Promise 物件的例項。(Promise.all 方法的引數不一定是陣列,但是必須具有 iterator 介面,且返回的每個成員都是 Promise 例項。)

p 的狀態由 p1、p2、p3 決定,分成兩種情況。

  • (1)只有p1、p2、p3的狀態都變成fulfilled,p的狀態才會變成fulfilled,此時p1、p2、p3的返回值組成一個數組,傳遞給p的回撥函式。
  • (2)只要p1、p2、p3之中有一個被rejected,p的狀態就變成rejected,此時最先被reject的例項的返回值,會傳遞給p的回撥函式。看下面的一個例子

Promse.all在處理多個非同步處理時非常有用,比如說一個頁面上需要等兩個或多個ajax的資料回來以後才正常顯示,在此之前只顯示loading圖示。

需要特別注意的是,Promise.all獲得的成功結果的數組裡面的資料順序和Promise.all接收到的陣列順序是一致的,即p1的結果在前,即便p1的結果獲取的比p2要晚。這帶來了一個絕大的好處:在前端開發請求資料的過程中,偶爾會遇到傳送多個請求並根據請求順序獲取和使用資料的場景,使用Promise.all毫無疑問可以解決這個問題。

Promise.race 方法同樣是將多個 Promise 例項,包裝成一個新的 Promise 例項。

var p = Promise.race([p1,p2,p3]);

上面程式碼中,只要p1、p2、p3之中有一個例項率先改變狀態,p的狀態就改變了。不管結果本身是成功狀態還是失敗狀態。那個率先改變的Promise例項的返回值,就傳遞給p的返回值。

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

let p2 = new
Promise((resolve, reject) => { setTimeout(() => { reject('failed') }, 500) }) Promise.race([p1, p2]).then((result) => { console.log(result) }).catch((error) => { console.log(error) // 開啟的是 'failed' })

如果Promise.all方法和Promise.race方法的引數,不是Promise例項,就會先呼叫講到的Promise.resolve方法,將引數轉為Promise例項,再進一步處理。