前言
大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心
背景
咱们在开发中,大多数时间都是一个异步操作一个异步操作去执行的,但是有一些特殊情况,需要一股脑去执行多个异步操作,比如:
- 多表单校验:只有所有表单都校验通过才能提交
- 多接口请求:只有所有接口都请求成功才能进行下一步操作
这时候就可以用到Promise.all这个方法了
Promise.all
基本特性
简单说说这个方法的使用或特性吧:
- 接收一个 Promise 数组,执行结果返回一个新的 Promise
- 所有 Promise 都成功的时候,返回的 Promise 才是成功
- 要是有一个 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
问题
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' } // ]
原文地址:https://mp.weixin.qq.com/s/WxdJbnupQ9-vs1kIcEANiA?