理解和使用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' })