自行實現(xiàn)Promise.allSettled的Polyfill處理
引言
如果因為瀏覽器太過老舊,不支持最新的 Promise.allSettled API,我們可以使用 polyfill 技術(shù),簡單地自己用 Promise.all, 自行實現(xiàn) Promise.allSettled.
完整代碼實現(xiàn)如下:
if (!Promise.allSettled) { const rejectHandler = reason => ({ status: 'rejected', reason }); const resolveHandler = value => ({ status: 'fulfilled', value }); Promise.allSettled = function (promises) { const convertedPromises = promises.map(p => Promise.resolve(p).then(resolveHandler, rejectHandler)); return Promise.all(convertedPromises); }; }
在這段代碼中,promises.map 接受輸入值,使用 p => Promise.resolve(p)
將它們轉(zhuǎn)換為 Promise(以防傳遞了非 Promise 類型的 primitive 值),然后將 .then 處理程序添加到每個值。
該處理程序?qū)⒊晒Φ慕Y(jié)果值轉(zhuǎn)換為 {status:'fulfilled', value}
,并將錯誤原因轉(zhuǎn)換為 {status:'rejected', reason}
。 這正是 Promise.allSettled
的格式。
現(xiàn)在我們可以使用 Promise.allSettled 來獲取所有給定 Promise 的結(jié)果,即使其中一些被 reject.
Promise.race
與 Promise.all 類似,但僅等待第一個已經(jīng) resolved 的 Promise 并獲取其結(jié)果(或錯誤)。
語法:
let promise = Promise.race(iterable);
下列代碼將會打印第一個狀態(tài)變?yōu)?fulfilled 的 Promise 的值,即1:
Promise.race([ new Promise((resolve, reject) => setTimeout(() => resolve(1), 1000)), new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 2000)), new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)) ]).then(alert); // 1
這里的第一個promise是最快的,所以就變成了結(jié)果。 在第一個確定的 Promise win the race
之后,所有進一步的結(jié)果/錯誤都將被忽略。
Promise.any
與 Promise.race 類似,但只等待第一個 fulfilled 的 Promise 并獲得其結(jié)果。 如果所有給定的 Promise 都被拒絕,則返回的 Promise 會被 AggregateError 拒絕——這是一個特殊的錯誤對象,它將所有 Promise 錯誤存儲在它的 errors 屬性中。
語法:
let promise = Promise.any(iterable);
下列例子結(jié)果為1:
Promise.any([ new Promise((resolve, reject) => setTimeout(() => reject(new Error("Whoops!")), 1000)), new Promise((resolve, reject) => setTimeout(() => resolve(1), 2000)), new Promise((resolve, reject) => setTimeout(() => resolve(3), 3000)) ]).then(alert); // 1
這里的第一個promise是最快的,但是被 reject 了,所以第二個promise就變成了結(jié)果。 在第一個 fulfilled 的 Promise win the race
之后,所有進一步的結(jié)果都將被忽略。
這是一個所有 Promise 都失敗的例子:
Promise.any([ new Promise((resolve, reject) => setTimeout(() => reject(new Error("Ouch!")), 1000)), new Promise((resolve, reject) => setTimeout(() => reject(new Error("Error!")), 2000)) ]).catch(error => { console.log(error.constructor.name); // AggregateError console.log(error.errors[0]); // Error: Ouch! console.log(error.errors[1]); // Error: Error! });
如我們所見,失敗的 Promise 的錯誤對象在 AggregateError 對象的 errors 屬性中可用。
以上就是Promise.allSettled 的 Polyfill 處理的詳細內(nèi)容,更多關(guān)于Promise.allSettled Polyfill 處理的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章

Electron?網(wǎng)絡攔截實戰(zhàn)示例詳解