理解和使用Promise.all和Promise.race

JavaScript的世界中，全部代碼都是單線程執行的。異步執行能夠用回調函數實現，可是某些場景並很差用，且不易複用。Promise對象這種鏈式寫法的好處在於，先統一執行邏輯，不關心如何處理結果，而後，根據結果是成功仍是失敗，在未來的某個時候調用success函數或fail函數。

Pomise.all的使用

Promise.all能夠將多個Promise實例包裝成一個新的Promise實例。同時，成功和失敗的返回值是不一樣的，成功的時候返回的是一個結果數組，而失敗的時候則返回最早被reject失敗狀態的值。
Promise.all中傳入的是數組，返回的也是是數組，而且會將進行映射，傳入的promise對象返回的值是按照順序在數組中排列的，可是注意的是他們執行的順序並非按照順序的，除非可迭代對象爲空。

可迭代對象：
遍歷Array能夠採用下標循環，遍歷Map和Set就沒法使用下標。爲了統一集合類型，ES6標準引入了新的iterable類型，Array、Map和Set都屬於iterable類型。具備iterable類型的集合能夠經過新的for ... of循環來遍歷。

示例代碼以下：

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圖標。

代碼模擬：

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒後醒來`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒後醒來', '2秒後醒來' ]
}).catch((error) => {
  console.log(error)
})

須要特別注意的是，Promise.all得到的成功結果的數組裏面的數據順序和Promise.all接收到的數組順序是一致的，即p1的結果在前，即使p1的結果獲取的比p2要晚。這帶來了一個絕大的好處：在前端開發請求數據的過程當中，偶爾會遇到發送多個請求並根據請求順序獲取和使用數據的場景，使用Promise.all毫無疑問能夠解決這個問題。

Promise.race的使用

顧名思義，Promse.race就是賽跑的意思，意思就是說，Promise.race([p1, p2, p3])裏面哪一個結果得到的快，就返回那個結果，無論結果自己是成功狀態仍是失敗狀態。

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'
})