Promise之Promise.all、Promise.race

Promise.all 可以將多個 Promise 實例包裝成一個新的 Promise 實例。同時,成功和失敗的返回值是不同的,成功的時候返回的是一個結果數組,而失敗的時候則返回最先被 reject 失敗狀態的值

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promse.reject('失敗')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失敗了,打出 '失敗'
})
  • Promse.all 在處理多個異步處理時非常有用,比如説一個頁面上需要等兩個或多個 ajax 的數據回來以後才正常顯示,在此之前只顯示 loading 圖標

Promise.all 裏的任務列表 [asyncTask(1),asyncTask(2),asyncTask(3)] ,我們是按照順序發起的。

但是根據結果來説,它們是異步的,互相之間並不阻塞,每個任務完成時機是不確定的,儘管如此,所有任務結束之

後,它們的結果仍然是按順序地映射到 resultList 裏,這樣就能和 Promise.all 裏的任務列表。這帶來了一個絕大的好處:在前端開發請求數據的過程中,偶爾會遇到發送多個請求並根據請求順序獲取和使用數據的場景,使用 Promise.all 毫無疑問可以解決這個問題

二、Promise.race()

Promise.race([p1, p2, p3]) 裏面哪個結果獲得的快,就返回那個結果,不管結果本身是成功狀態還是失敗狀態

  • 我們簡單看一下例子,返回結果為3,因為我們設置了定時器,第三個 Promise 執行的最快
Promise.race([
  new Promise(function(resolve, reject) {
    setTimeout(() => resolve(1), 1000)
  }),
  new Promise(function(resolve, reject) {
    setTimeout(() => resolve(2), 100)
  }),
  new Promise(function(resolve, reject) {
    setTimeout(() => resolve(3), 10)
  })
]).then(value => {
  console.log(value) // 3
})
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'
})