面試手寫實現Promise.all
前言
(ಥ﹏ಥ)曾經真實發生在一個朋友身上的真實事件,面試官讓他手寫一個Promise.all,朋友現場發揮不太好,沒有寫出來,事後他追問面試官給的模糊評價是基礎不夠紮實,原理性知識掌握較少… 當然整場面試失利,並不僅僅是這一個題目,肯定還有其他方面的原因。
但是卻給我們敲響一個警鐘:Promise手寫實現、Promise靜態方法實現早已經是面試中的高頻考題,如果你對其還不甚瞭解,耽誤你10分鐘,我們一起幹到他懂O(∩_∩)O
常見面試手寫系列
最近很想做一件事情,希望可以將前端面試中常見的手寫題寫成一個系列,嘗試將其中涉及到的知識和原理都講清楚,如果你對這個系列也感興趣,歡迎一起來學習噢,目前已有66+手寫題實現啦!
1. 點擊查看日拱一題源碼地址(目前已有66+個手寫題實現)
2.WalkonNet專欄
Promise.resolve
簡要回顧
- Promise.resolve(value) 方法返回一個以給定值解析後的Promise 對象。
- 如果這個值是一個 promise ,那麼將返回這個 promise ;
- 如果這個值是thenable(即帶有"then" 方法),返回的promise會“跟隨”這個thenable的對象,采用它的最終狀態;否則返回的promise將以此值完成。
這是MDN上的解釋,我們挨個看一下
- Promise.resolve最終結果還是一個Promise,並且與Promise.resolve(該值)傳入的值息息相關
- 傳入的參數可以是一個Promise實例,那麼該函數執行的結果是直接將實例返回
- 這裡最主要需要理解跟隨,可以理解成Promise最終狀態就是這個thenable對象輸出的值
小例子
// 1. 非Promise對象,非thenable對象 Promise.resolve(1).then(console.log) // 1 // 2. Promise對象成功狀態 const p2 = new Promise((resolve) => resolve(2)) Promise.resolve(p2).then(console.log) // 2 // 3. Promise對象失敗狀態 const p3 = new Promise((_, reject) => reject('err3')) Promise.resolve(p3).catch(console.error) // err3 // 4. thenable對象 const p4 = { then (resolve) { setTimeout(() => resolve(4), 1000) } } Promise.resolve(p4).then(console.log) // 4 // 5. 啥都沒傳 Promise.resolve().then(console.log) // undefined
源碼實現
Promise.myResolve = function (value) { // 是Promise實例,直接返回即可 if (value && typeof value === 'object' && (value instanceof Promise)) { return value } // 否則其他情況一律再通過Promise包裝一下 return new Promise((resolve) => { resolve(value) }) } // 測試一下,還是用剛才的例子 // 1. 非Promise對象,非thenable對象 Promise.myResolve(1).then(console.log) // 1 // 2. Promise對象成功狀態 const p2 = new Promise((resolve) => resolve(2)) Promise.myResolve(p2).then(console.log) // 2 // 3. Promise對象失敗狀態 const p3 = new Promise((_, reject) => reject('err3')) Promise.myResolve(p3).catch(console.error) // err3 // 4. thenable對象 const p4 = { then (resolve) { setTimeout(() => resolve(4), 1000) } } Promise.myResolve(p4).then(console.log) // 4 // 5. 啥都沒傳 Promise.myResolve().then(console.log) // undefined
疑問
從源碼實現中,並沒有看到對於thenable對象的特殊處理呀!其實確實也不需要在Promise.resolve中處理,真實處理的地方應該是在Promise構造函數中,如果你對這塊感興趣,馬上就會寫Promise的實現篇,期待你的閱讀噢。
Promise.reject
簡要回顧
Promise.reject() 方法返回一個帶有拒絕原因的Promise對象。
Promise.reject(new Error('fail')) .then(() => console.log('Resolved'), (err) => console.log('Rejected', err)) // 輸出以下內容 // Rejected Error: fail // at <anonymous>:2:16
源碼實現
reject實現相對簡單,隻要返回一個新的Promise,並且將結果狀態設置為拒絕就可以
Promise.myReject = function (value) { return new Promise((_, reject) => { reject(value) }) } // 測試一下 Promise.myReject(new Error('fail')) .then(() => console.log('Resolved'), (err) => console.log('Rejected', err)) // Rejected Error: fail // at <anonymous>:9:18
Promise.all
簡要回顧
Promise.all()方法用於將多個 Promise 實例,包裝成一個新的 Promise 實例。這個靜態方法應該是面試中最常見的啦
const p = Promise.all([p1, p2, p3])
最終p的狀態由p1、p2、p3決定,分成兩種情況。
(1)隻有p1、p2、p3的狀態都變成fulfilled,p的狀態才會變成fulfilled,此時p1、p2、p3的返回值組成一個數組,傳遞給p的回調函數。
(2)隻要p1、p2、p3之中有一個被rejected,p的狀態就變成rejected,此時第一個被reject的實例的返回值,會傳遞給p的回調函數。
const p1 = Promise.resolve(1) const p2 = new Promise((resolve) => { setTimeout(() => resolve(2), 1000) }) const p3 = new Promise((resolve) => { setTimeout(() => resolve(3), 3000) }) const p4 = Promise.reject('err4') const p5 = Promise.reject('err5') // 1. 所有的Promise都成功瞭 const p11 = Promise.all([ p1, p2, p3 ]) .then(console.log) // [ 1, 2, 3 ] .catch(console.log) // 2. 有一個Promise失敗瞭 const p12 = Promise.all([ p1, p2, p4 ]) .then(console.log) .catch(console.log) // err4 // 3. 有兩個Promise失敗瞭,可以看到最終輸出的是err4,第一個失敗的返回值 const p13 = Promise.all([ p1, p4, p5 ]) .then(console.log) .catch(console.log) // err4
源碼實現
Promise.myAll = (promises) => { return new Promise((rs, rj) => { // 計數器 let count = 0 // 存放結果 let result = [] const len = promises.length if (len === 0) { return rs([]) } promises.forEach((p, i) => { // 註意有的數組項有可能不是Promise,需要手動轉化一下 Promise.resolve(p).then((res) => { count += 1 // 收集每個Promise的返回值 result[ i ] = res // 當所有的Promise都成功瞭,那麼將返回的Promise結果設置為result if (count === len) { rs(result) } // 監聽數組項中的Promise catch隻要有一個失敗,那麼我們自己返回的Promise也會失敗 }).catch(rj) }) }) } // 測試一下 const p1 = Promise.resolve(1) const p2 = new Promise((resolve) => { setTimeout(() => resolve(2), 1000) }) const p3 = new Promise((resolve) => { setTimeout(() => resolve(3), 3000) }) const p4 = Promise.reject('err4') const p5 = Promise.reject('err5') // 1. 所有的Promise都成功瞭 const p11 = Promise.myAll([ p1, p2, p3 ]) .then(console.log) // [ 1, 2, 3 ] .catch(console.log) // 2. 有一個Promise失敗瞭 const p12 = Promise.myAll([ p1, p2, p4 ]) .then(console.log) .catch(console.log) // err4 // 3. 有兩個Promise失敗瞭,可以看到最終輸出的是err4,第一個失敗的返回值 const p13 = Promise.myAll([ p1, p4, p5 ]) .then(console.log) .catch(console.log) // err4 // 與原生的Promise.all返回是一致的
Promise.allSettled
簡要回顧
有時候,我們希望等到一組異步操作都結束瞭,不管每一個操作是成功還是失敗,再進行下一步操作。顯然Promise.all(其隻要是一個失敗瞭,結果即進入失敗狀態)不太適合,所以有瞭Promise.allSettled
Promise.allSettled()方法接受一個數組作為參數,數組的每個成員都是一個 Promise 對象,並返回一個新的 Promise 對象。隻有等到參數數組的所有 Promise 對象都發生狀態變更(不管是fulfilled還是rejected),返回的 Promise 對象才會發生狀態變更,一旦發生狀態變更,狀態總是fulfilled,不會變成rejected
還是以上面的例子為例, 我們看看與Promise.all有什麼不同
const p1 = Promise.resolve(1) const p2 = new Promise((resolve) => { setTimeout(() => resolve(2), 1000) }) const p3 = new Promise((resolve) => { setTimeout(() => resolve(3), 3000) }) const p4 = Promise.reject('err4') const p5 = Promise.reject('err5') // 1. 所有的Promise都成功瞭 const p11 = Promise.allSettled([ p1, p2, p3 ]) .then((res) => console.log(JSON.stringify(res, null, 2))) // 輸出 /* [ { "status": "fulfilled", "value": 1 }, { "status": "fulfilled", "value": 2 }, { "status": "fulfilled", "value": 3 } ] */ // 2. 有一個Promise失敗瞭 const p12 = Promise.allSettled([ p1, p2, p4 ]) .then((res) => console.log(JSON.stringify(res, null, 2))) // 輸出 /* [ { "status": "fulfilled", "value": 1 }, { "status": "fulfilled", "value": 2 }, { "status": "rejected", "reason": "err4" } ] */ // 3. 有兩個Promise失敗瞭 const p13 = Promise.allSettled([ p1, p4, p5 ]) .then((res) => console.log(JSON.stringify(res, null, 2))) // 輸出 /* [ { "status": "fulfilled", "value": 1 }, { "status": "rejected", "reason": "err4" }, { "status": "rejected", "reason": "err5" } ] */
可以看到:
- 不管是全部成功還是有部分失敗,最終都會進入Promise.allSettled的.then回調中
- 最後的返回值中,成功和失敗的項都有status屬性,成功時值是fulfilled,失敗時是rejected
- 最後的返回值中,成功含有value屬性,而失敗則是reason屬性
源碼實現
Promise.myAllSettled = (promises) => { return new Promise((rs, rj) => { let count = 0 let result = [] const len = promises.length // 數組是空的話,直接返回空數據 if (len === 0) { return rs([]) } promises.forEach((p, i) => { Promise.resolve(p).then((res) => { count += 1 // 成功屬性設置 result[ i ] = { status: 'fulfilled', value: res } if (count === len) { rs(result) } }).catch((err) => { count += 1 // 失敗屬性設置 result[i] = { status: 'rejected', reason: err } if (count === len) { rs(result) } }) }) }) } // 測試一下 const p1 = Promise.resolve(1) const p2 = new Promise((resolve) => { setTimeout(() => resolve(2), 1000) }) const p3 = new Promise((resolve) => { setTimeout(() => resolve(3), 3000) }) const p4 = Promise.reject('err4') const p5 = Promise.reject('err5') // 1. 所有的Promise都成功瞭 const p11 = Promise.myAllSettled([ p1, p2, p3 ]) .then((res) => console.log(JSON.stringify(res, null, 2))) // 輸出 /* [ { "status": "fulfilled", "value": 1 }, { "status": "fulfilled", "value": 2 }, { "status": "fulfilled", "value": 3 } ] */ // 2. 有一個Promise失敗瞭 const p12 = Promise.myAllSettled([ p1, p2, p4 ]) .then((res) => console.log(JSON.stringify(res, null, 2))) // 輸出 /* [ { "status": "fulfilled", "value": 1 }, { "status": "fulfilled", "value": 2 }, { "status": "rejected", "reason": "err4" } ] */ // 3. 有兩個Promise失敗瞭 const p13 = Promise.myAllSettled([ p1, p4, p5 ]) .then((res) => console.log(JSON.stringify(res, null, 2))) // 輸出 /* [ { "status": "fulfilled", "value": 1 }, { "status": "rejected", "reason": "err4" }, { "status": "rejected", "reason": "err5" } ] */
Promise.race
簡單回顧
Promise.race()方法同樣是將多個 Promise 實例,包裝成一個新的 Promise 實例。
const p = Promise.race([p1, p2, p3])
隻要p1、p2、p3之中有一個實例率先改變狀態,p的狀態就跟著改變。那個率先改變的 Promise 實例的返回值,就傳遞給p的回調函數。
const p1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, 1) }) const p2 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 2) }) Promise.race([p1, p2]).then((value) => { console.log(value) // 2 }) Promise.race([p1, p2, 3]).then((value) => { console.log(value) // 3 })
源碼實現
聰明的你一定馬上知道該怎麼實現瞭,隻要瞭解哪個實例先改變瞭,那麼Promise.race就跟隨這個結果,那麼就可以寫出以下代碼
Promise.myRace = (promises) => { return new Promise((rs, rj) => { promises.forEach((p) => { // 對p進行一次包裝,防止非Promise對象 // 並且對齊進行監聽,將我們自己返回的Promise的resolve,reject傳遞給p,哪個先改變狀態,我們返回的Promise也將會是什麼狀態 Promise.resolve(p).then(rs).catch(rj) }) }) } // 測試一下 const p1 = new Promise((resolve, reject) => { setTimeout(resolve, 500, 1) }) const p2 = new Promise((resolve, reject) => { setTimeout(resolve, 100, 2) }) Promise.myRace([p1, p2]).then((value) => { console.log(value) // 2 }) Promise.myRace([p1, p2, 3]).then((value) => { console.log(value) // 3 })
結尾
也許你我素未謀面,但很可能相見恨晚。希望這裡能成為你的棲息之地,我願和你一起收獲喜悅,奔赴成長。
以上就是第一篇手寫實現原理解析啦,更多關於面試手寫Promise.all的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 字節飛書面試promise.all實現示例
- Promise靜態四兄弟實現示例詳解
- 前端JavaScript之Promise
- 徹底搞懂 javascript的Promise
- JS Promise axios 請求結果後面的.then() 是什麼意思