Promise.allSettled的作用是什么

本篇內(nèi)容介紹了“Promise.allSettled的作用是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

引言

本文從四個(gè)方面循序漸進(jìn)介紹 Promise.allSettled ：

• Promise.all() 的缺陷

• 引入 Promise.allSettled()

• Promise.allSettled() 與 Promise.all() 各自的適用場(chǎng)景

• 手寫 Promise.allSettled() 實(shí)現(xiàn)

下面正文開始??

Promise.all() 的缺陷

我們?cè)谥暗囊黄恼轮?面試官問(wèn)：Promise.all 使用、原理實(shí)現(xiàn)及錯(cuò)誤處理 已經(jīng)介紹過(guò)，當(dāng)我們使用 Promise.all() 執(zhí)行過(guò)個(gè)  promise 時(shí)，只要其中任何一個(gè)promise 失敗都會(huì)執(zhí)行 reject ，并且 reject 的是第一個(gè)拋出的錯(cuò)誤信息，只有所有的 promise 都  resolve 時(shí)才會(huì)調(diào)用 .then 中的成功回調(diào)

const p1 = Promise.resolve(1) const p2 = Promise.resolve(2) const p3 = new Promise((resolve, reject) => {   setTimeout(reject, 1000, 'three'); });  Promise.all([p1, p2, p3]) .then(values => {     console.log('resolve: ', values) }).catch(err => {     console.log('reject: ', err) })   // reject:  three

注意：其中任意一個(gè) promise 被 reject ，Promise.all 就會(huì)立即被 reject ，數(shù)組中其它未執(zhí)行完的 promise  依然是在執(zhí)行的， Promise.all 沒有采取任何措施來(lái)取消它們的執(zhí)行

但大多數(shù)場(chǎng)景中，我們期望傳入的這組 promise 無(wú)論執(zhí)行失敗或成功，都能獲取每個(gè) promise 的執(zhí)行結(jié)果，為此，ES2020 引入了  Promise.allSettled()

Promise.allSettled()

Promise.allSettled() 可以獲取數(shù)組中每個(gè) promise 的結(jié)果，無(wú)論成功或失敗

const p1 = Promise.resolve(1) const p2 = Promise.resolve(2) const p3 = new Promise((resolve, reject) => {   setTimeout(reject, 1000, 'three'); });  Promise.allSettled([p1, p2, p3]) .then(values => {     console.log(values) })   /* [   {status: "fulfilled", value: 1},    {status: "fulfilled", value: 2},    {status: "rejected", reason: "three"} ] */

當(dāng)瀏覽器不支持 Promise.allSettled ，可以如此 polyfill：

if (!Promise.allSettled) {   const rejectHandler = reason => ({status: "rejected", reason})   const resolveHandler = value => ({status: "fulfilled", value})   Promise.allSettled = promises =>     Promise.all(       promises.map((promise) =>         Promise.resolve(promise)            .then(resolveHandler, rejectHandler)       )       // 每個(gè) promise 需要用 Promise.resolve 包裹下       // 以防傳遞非 promise     ); }  // 使用 const p1 = Promise.resolve(1) const p2 = Promise.resolve(2) const p3 = new Promise((resolve, reject) => {   setTimeout(reject, 1000, 'three'); }) const promises = [p1, p2, p3] Promise.allSettled(promises).then(console.log)

Promise.allSettled() 與 Promise.all() 各自的適用場(chǎng)景

Promise.allSettled() 更適合：

• 彼此不依賴，其中任何一個(gè)被 reject ，對(duì)其它都沒有影響

• 期望知道每個(gè) promise 的執(zhí)行結(jié)果

Promise.all() 更適合：

• 彼此相互依賴，其中任何一個(gè)被 reject ，其它都失去了實(shí)際價(jià)值

手寫 Promise.allSettled 源碼

與 Promise.all 不同的是，當(dāng) promise 被 reject 之后，我們不會(huì)直接 reject ，而是記錄下該 reject  的值和對(duì)應(yīng)的狀態(tài) 'rejected' ;

同樣地，當(dāng) promise 對(duì)象被 resolve 時(shí)我們也不僅僅局限于記錄值，同時(shí)也會(huì)記錄狀態(tài) 'fulfilled' 。

當(dāng)所有的 promise 對(duì)象都已執(zhí)行(解決或拒絕)，我們統(tǒng)一 resolve 所有的 promise 執(zhí)行結(jié)果數(shù)組

MyPromise.allSettled = function (promises) {     return new MyPromise((resolve, reject) => {       promises = Array.isArray(promises) ? promises : []       let len = promises.length       const argslen = len       // 如果傳入的是一個(gè)空數(shù)組，那么就直接返回一個(gè)resolved的空數(shù)組promise對(duì)象       if (len === 0) return resolve([])       // 將傳入的參數(shù)轉(zhuǎn)化為數(shù)組，賦給args變量       let args = Array.prototype.slice.call(promises)       // 計(jì)算當(dāng)前是否所有的 promise 執(zhí)行完成，執(zhí)行完畢則resolve       const compute = () => {         if(--len === 0) {            resolve(args)         }       }       function resolvePromise(index, value) {         // 判斷傳入的是否是 promise 類型         if(value instanceof MyPromise) {            const then = value.then           then.call(value, function(val) {             args[index] = { status: 'fulfilled', value: val}             compute()           }, function(e) {             args[index] = { status: 'rejected', reason: e }             compute()           })         } else {           args[index] = { status: 'fulfilled', value: value}           compute()         }       }           for(let i = 0; i < argslen; i++){         resolvePromise(i, args[i])       }     })   }

總結(jié)

彼此相互依賴，一個(gè)失敗全部失效(全無(wú)或全有)用 Promise.all ;相互獨(dú)立，獲取每個(gè)結(jié)果用 Promise.allSettled

“Promise.allSettled的作用是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！