面試手寫實(shí)現(xiàn)Promise.all
前言
(?﹏?)曾經(jīng)真實(shí)發(fā)生在一個(gè)朋友身上的真實(shí)事件，面試官讓他手寫一個(gè)Promise.all，朋友現(xiàn)場發(fā)揮不太好，沒有寫出來，事后他追問面試官給的模糊評(píng)價(jià)是基礎(chǔ)不夠扎實(shí)，原理性知識(shí)掌握較少... 當(dāng)然整場面試失利，并不僅僅是這一個(gè)題目，肯定還有其他方面的原因。
但是卻給我們敲響一個(gè)警鐘：Promise手寫實(shí)現(xiàn)、Promise靜態(tài)方法實(shí)現(xiàn)早已經(jīng)是面試中的高頻考題，如果你對(duì)其還不甚了解，耽誤你10分鐘，我們一起干到他懂O(∩_∩)O
常見面試手寫系列
最近很想做一件事情，希望可以將前端面試中常見的手寫題寫成一個(gè)系列，嘗試將其中涉及到的知識(shí)和原理都講清楚，如果你對(duì)這個(gè)系列也感興趣，歡迎一起來學(xué)習(xí)噢，目前已有66+手寫題實(shí)現(xiàn)啦！
1. 點(diǎn)擊查看日拱一題源碼地址（目前已有66+個(gè)手寫題實(shí)現(xiàn)）
Promise.resolve
簡要回顧
- Promise.resolve(value) 方法返回一個(gè)以給定值解析后的Promise 對(duì)象。
- 如果這個(gè)值是一個(gè) promise ，那么將返回這個(gè) promise ；
- 如果這個(gè)值是thenable（即帶有"then" 方法），返回的promise會(huì)“跟隨”這個(gè)thenable的對(duì)象，采用它的最終狀態(tài)；否則返回的promise將以此值完成。
這是MDN上的解釋，我們挨個(gè)看一下
- Promise.resolve最終結(jié)果還是一個(gè)Promise，并且與Promise.resolve(該值)傳入的值息息相關(guān)
- 傳入的參數(shù)可以是一個(gè)Promise實(shí)例，那么該函數(shù)執(zhí)行的結(jié)果是直接將實(shí)例返回
- 這里最主要需要理解跟隨，可以理解成Promise最終狀態(tài)就是這個(gè)thenable對(duì)象輸出的值
小例子
// 1. 非Promise對(duì)象，非thenable對(duì)象
Promise.resolve(1).then(console.log) // 1
// 2. Promise對(duì)象成功狀態(tài)
const p2 = new Promise((resolve) => resolve(2))
Promise.resolve(p2).then(console.log) // 2
// 3. Promise對(duì)象失敗狀態(tài)
const p3 = new Promise((_, reject) => reject('err3'))
Promise.resolve(p3).catch(console.error) // err3
// 4. thenable對(duì)象
const p4 = {
then (resolve) {
setTimeout(() => resolve(4), 1000)
}
}
Promise.resolve(p4).then(console.log) // 4
// 5. 啥都沒傳
Promise.resolve().then(console.log) // undefined
源碼實(shí)現(xiàn)
Promise.myResolve = function (value) {
// 是Promise實(shí)例，直接返回即可
if (value && typeof value === 'object' && (value instanceof Promise)) {
return value
}
// 否則其他情況一律再通過Promise包裝一下
return new Promise((resolve) => {
resolve(value)
})
}
// 測試一下，還是用剛才的例子
// 1. 非Promise對(duì)象，非thenable對(duì)象
Promise.myResolve(1).then(console.log) // 1
// 2. Promise對(duì)象成功狀態(tài)
const p2 = new Promise((resolve) => resolve(2))
Promise.myResolve(p2).then(console.log) // 2
// 3. Promise對(duì)象失敗狀態(tài)
const p3 = new Promise((_, reject) => reject('err3'))
Promise.myResolve(p3).catch(console.error) // err3
// 4. thenable對(duì)象
const p4 = {
then (resolve) {
setTimeout(() => resolve(4), 1000)
}
}
Promise.myResolve(p4).then(console.log) // 4
// 5. 啥都沒傳
Promise.myResolve().then(console.log) // undefined
疑問
從源碼實(shí)現(xiàn)中，并沒有看到對(duì)于thenable對(duì)象的特殊處理呀！其實(shí)確實(shí)也不需要在Promise.resolve中處理，真實(shí)處理的地方應(yīng)該是在Promise構(gòu)造函數(shù)中，如果你對(duì)這塊感興趣，馬上就會(huì)寫Promise的實(shí)現(xiàn)篇，期待你的閱讀噢。
Promise.reject
簡要回顧
Promise.reject() 方法返回一個(gè)帶有拒絕原因的Promise對(duì)象。
Promise.reject(new Error('fail'))
.then(() => console.log('Resolved'),
(err) => console.log('Rejected', err))
// 輸出以下內(nèi)容
// Rejected Error: fail
// at <anonymous>:2:16
源碼實(shí)現(xiàn)
reject實(shí)現(xiàn)相對(duì)簡單，只要返回一個(gè)新的Promise，并且將結(jié)果狀態(tài)設(shè)置為拒絕就可以
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()方法用于將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例。這個(gè)靜態(tài)方法應(yīng)該是面試中最常見的啦
const p = Promise.all([p1, p2, p3])
最終p的狀態(tài)由p1、p2、p3決定，分成兩種情況。
（1）只有p1、p2、p3的狀態(tài)都變成fulfilled，p的狀態(tài)才會(huì)變成fulfilled，此時(shí)p1、p2、p3的返回值組成一個(gè)數(shù)組，傳遞給p的回調(diào)函數(shù)。
（2）只要p1、p2、p3之中有一個(gè)被rejected，p的狀態(tài)就變成rejected，此時(shí)第一個(gè)被reject的實(shí)例的返回值，會(huì)傳遞給p的回調(diào)函數(shù)。
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. 有一個(gè)Promise失敗了
const p12 = Promise.all([ p1, p2, p4 ])
.then(console.log)
.catch(console.log) // err4
// 3. 有兩個(gè)Promise失敗了，可以看到最終輸出的是err4，第一個(gè)失敗的返回值
const p13 = Promise.all([ p1, p4, p5 ])
.then(console.log)
.catch(console.log) // err4
源碼實(shí)現(xiàn)
Promise.myAll = (promises) => {
return new Promise((rs, rj) => {
// 計(jì)數(shù)器
let count = 0
// 存放結(jié)果
let result = []
const len = promises.length
if (len === 0) {
return rs([])
}
promises.forEach((p, i) => {
// 注意有的數(shù)組項(xiàng)有可能不是Promise，需要手動(dòng)轉(zhuǎn)化一下
Promise.resolve(p).then((res) => {
count += 1
// 收集每個(gè)Promise的返回值
result[ i ] = res
// 當(dāng)所有的Promise都成功了，那么將返回的Promise結(jié)果設(shè)置為result
if (count === len) {
rs(result)
}
// 監(jiān)聽數(shù)組項(xiàng)中的Promise catch只要有一個(gè)失敗，那么我們自己返回的Promise也會(huì)失敗
}).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. 有一個(gè)Promise失敗了
const p12 = Promise.myAll([ p1, p2, p4 ])
.then(console.log)
.catch(console.log) // err4
// 3. 有兩個(gè)Promise失敗了，可以看到最終輸出的是err4，第一個(gè)失敗的返回值
const p13 = Promise.myAll([ p1, p4, p5 ])
.then(console.log)
.catch(console.log) // err4
// 與原生的Promise.all返回是一致的
Promise.allSettled
簡要回顧
有時(shí)候，我們希望等到一組異步操作都結(jié)束了，不管每一個(gè)操作是成功還是失敗，再進(jìn)行下一步操作。顯然Promise.all(其只要是一個(gè)失敗了，結(jié)果即進(jìn)入失敗狀態(tài))不太適合，所以有了Promise.allSettled
Promise.allSettled()方法接受一個(gè)數(shù)組作為參數(shù)，數(shù)組的每個(gè)成員都是一個(gè) Promise 對(duì)象，并返回一個(gè)新的 Promise 對(duì)象。只有等到參數(shù)數(shù)組的所有 Promise 對(duì)象都發(fā)生狀態(tài)變更（不管是fulfilled還是rejected），返回的 Promise 對(duì)象才會(huì)發(fā)生狀態(tài)變更,一旦發(fā)生狀態(tài)變更，狀態(tài)總是fulfilled，不會(huì)變成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. 有一個(gè)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. 有兩個(gè)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"
}
]
*/
可以看到：
- 不管是全部成功還是有部分失敗，最終都會(huì)進(jìn)入Promise.allSettled的.then回調(diào)中
- 最后的返回值中，成功和失敗的項(xiàng)都有status屬性，成功時(shí)值是fulfilled，失敗時(shí)是rejected
- 最后的返回值中，成功含有value屬性，而失敗則是reason屬性
源碼實(shí)現(xiàn)
Promise.myAllSettled = (promises) => {
return new Promise((rs, rj) => {
let count = 0
let result = []
const len = promises.length
// 數(shù)組是空的話，直接返回空數(shù)據(jù)
if (len === 0) {
return rs([])
}
promises.forEach((p, i) => {
Promise.resolve(p).then((res) => {
count += 1
// 成功屬性設(shè)置
result[ i ] = {
status: 'fulfilled',
value: res
}
if (count === len) {
rs(result)
}
}).catch((err) => {
count += 1
// 失敗屬性設(shè)置
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. 有一個(gè)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. 有兩個(gè)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()方法同樣是將多個(gè) Promise 實(shí)例，包裝成一個(gè)新的 Promise 實(shí)例。
const p = Promise.race([p1, p2, p3])
只要p1、p2、p3之中有一個(gè)實(shí)例率先改變狀態(tài)，p的狀態(tài)就跟著改變。那個(gè)率先改變的 Promise 實(shí)例的返回值，就傳遞給p的回調(diào)函數(shù)。
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
})
源碼實(shí)現(xiàn)
聰明的你一定馬上知道該怎么實(shí)現(xiàn)了，只要了解哪個(gè)實(shí)例先改變了，那么Promise.race就跟隨這個(gè)結(jié)果，那么就可以寫出以下代碼
Promise.myRace = (promises) => {
return new Promise((rs, rj) => {
promises.forEach((p) => {
// 對(duì)p進(jìn)行一次包裝，防止非Promise對(duì)象
// 并且對(duì)齊進(jìn)行監(jiān)聽，將我們自己返回的Promise的resolve，reject傳遞給p，哪個(gè)先改變狀態(tài)，我們返回的Promise也將會(huì)是什么狀態(tài)
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
})
結(jié)尾
也許你我素未謀面，但很可能相見恨晚。希望這里能成為你的棲息之地，我愿和你一起收獲喜悅，奔赴成長。
以上就是第一篇手寫實(shí)現(xiàn)原理解析啦，更多關(guān)于面試手寫Promise.all的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了微信小程序 模塊化的相關(guān)資料,需要的朋友可以參考下2016-10-10
Three.js?Interpolant實(shí)現(xiàn)動(dòng)畫插值
這篇文章主要為大家介紹了Three.js?Interpolant實(shí)現(xiàn)動(dòng)畫插值示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
微信小程序動(dòng)態(tài)的加載數(shù)據(jù)實(shí)例代碼
這篇文章主要介紹了 微信小程序動(dòng)態(tài)的加載數(shù)據(jù)實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了微信小程序 Template詳解及簡單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01
JS處理數(shù)據(jù)實(shí)現(xiàn)分頁功能
這篇文章介紹了JS處理數(shù)據(jù)實(shí)現(xiàn)分頁功能的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-01-01
這篇文章主要介紹了微信小程序 WXML、WXSS 和JS介紹及詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家介紹了JS前端中的設(shè)計(jì)模式和使用場景示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
小程序開發(fā)踩坑：頁面窗口定位（相對(duì)于瀏覽器定位）（推薦）
這篇文章主要介紹了小程序開發(fā)頁面窗口定位，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了微信小程序 MD5加密登錄密碼詳解及實(shí)例代碼的相關(guān)資料,這里附有實(shí)例代碼，需要的朋友可以參考下2017-01-01
autojs寫一個(gè)畫板實(shí)現(xiàn)AI換頭狗頭蛇
這篇文章主要為大家介紹了autojs寫一個(gè)畫板實(shí)現(xiàn)AI換頭狗頭蛇過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01