Promise.all 的異常處理，我希望大家一定要了解一下！
作者：林三心不學(xué)挖掘機(jī)
Promise.all還是很好用的，但是問(wèn)題來(lái)了，其中有一個(gè)錯(cuò)誤的話，就只會(huì)輸出這個(gè)失敗的值，而忽略了其他成功的值，那咋辦呢？
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心
背景
咱們?cè)陂_(kāi)發(fā)中，大多數(shù)時(shí)間都是一個(gè)異步操作一個(gè)異步操作去執(zhí)行的，但是有一些特殊情況，需要一股腦去執(zhí)行多個(gè)異步操作，比如：
- 多表單校驗(yàn)：只有所有表單都校驗(yàn)通過(guò)才能提交
- 多接口請(qǐng)求：只有所有接口都請(qǐng)求成功才能進(jìn)行下一步操作
這時(shí)候就可以用到Promise.all這個(gè)方法了
Promise.all
基本特性
簡(jiǎn)單說(shuō)說(shuō)這個(gè)方法的使用或特性吧：
- 接收一個(gè) Promise 數(shù)組，執(zhí)行結(jié)果返回一個(gè)新的 Promise
- 所有 Promise 都成功的時(shí)候，返回的 Promise 才是成功
- 要是有一個(gè) Promise 失敗，則返回的 Promise 是失敗
基本使用
// 模擬異步操作
const request = (delay, flag = true) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (flag) {
resolve(`成功了${delay}`)
} else {
reject(`失敗了${delay}`)
}
}, delay)
})
}
const fun = async (promises) => {
Promise.all(promises)
.then(res => {
console.log('res', res)
})
.catch(error => {
console.log('error', error)
})
}
fun([request(1000), request(500)])
// res [ '成功了1000', '成功了500' ]
fun([request(1000), request(500, false)])
// error 失敗了500問(wèn)題
Promise.all還是很好用的，但是問(wèn)題來(lái)了，其中有一個(gè)錯(cuò)誤的話，就只會(huì)輸出這個(gè)失敗的值，而忽略了其他成功的值，那咋辦呢？我們需要自己去收集才行：
const fun = async (promises) => {
Promise.all(
promises.map(promise => {
return promise.catch(err => err)
})
)
.then(res => {
console.log('res', res)
})
}
fun([request(1000), request(500, false)])
// res [ '成功了1000', '失敗了500' ]Promise.allSettled
其實(shí)在ES2020中，JavaScript提供了一個(gè)新語(yǔ)法Promise.allSettled，他能直接完成我們上面所做的處理：
- 接收一個(gè) Promise 數(shù)組，執(zhí)行結(jié)果返回一個(gè)成功的 Promise
- 返回 Promise 狀態(tài)為成功
- 返回 Promise 的值是一個(gè)數(shù)組
const fun = async (promises) => {
Promise.allSettled(promises)
.then(res => {
console.log('res', res)
})
}
fun([request(1000), request(500, false)])
// res [
// { status: 'fulfilled', value: '成功了1000' },
// { status: 'rejected', reason: '失敗了500' }
// ]責(zé)任編輯：武曉燕
來(lái)源：
前端之神
