Promise.all的异常处理，前端开发者需了解

Posted 2022-12-02 清颖~

文章目录

• • • Promise.all的基本使用
    • 问题: 需自己catch返回失败的值
    • Promise.allSettled 方法

背景
咱们在开发中，大多数时间都是一个异步操作一个异步操作去执行的，但是有一些特殊情况，需要一股脑去执行多个异步操作，比如：
多表单校验：只有所有表单都校验通过才能提交
多接口请求：只有所有接口都请求成功才能进行下一步操作
这时候就可以用到Promise.all这个方法了。

Promise.all
基本特性

• 接收一个 Promise 数组，执行结果返回一个新的 Promise
• 所有 Promise 都成功的时候，返回的 Promise 才是成功
• 要是有一个 Promise 失败，则返回的 Promise 是失败

Promise.all的基本使用

// 模拟异步操作
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

问题: 需自己catch返回失败的值

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/FCZhmQZBXI_yFkP9KEw5Kg