前言
大家好，我是林三心， 用最通俗易懂的话讲最难的知识点 是我的座右铭， 基础是进阶的前提 是我的初心
背景
咱们在开发中，大多数时间都是一个异步操作一个异步操作去执行的，但是有一些特殊情况，需要一股脑去执行多个异步操作，比如：
多表单校验：只有所有表单都校验通过才能提交
多接口请求：只有所有接口都请求成功才能进行下一步操作
这时候就可以用到
Promise.all
这个方法了
Promise.all
基本特性
简单说说这个方法的使用或特性吧：
接收一个 Promise 数组，执行结果返回一个新的 Promise
所有 Promise 都成功的时候，返回的 Promise 才是成功
要是有一个 Promise 失败，则返回的 Promise 是失败
基本使用
// 模拟异步操作
const request = (delay, flag = true) => {
returnnewPromise((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
问题
Promise.all
还是很好用的，但是问题来了，其中有一个错误的话，就只会输出这个失败的值，而忽略了其他成功的值，那咋办呢？我们需要自己去收集才行：
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
其实在
ES2020
中，JavaScript提供了一个新语法
Promise.allSettled
，他能直接完成我们上面所做的处理：
接收一个 Promise 数组，执行结果返回一个成功的 Promise
返回 Promise 状态为成功
返回 Promise 的值是一个数组
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' }
// ]
结语
点个【赞】和【在看】是对林三心最大的鼓励，林三心会非常开心的~~~
关注公众号【前端之神】，回复【加群】，即可获得加入【千人前端学习大群】的方式
