Promise.all 和 Promise.allSettled

本文将探讨处理多个Promise的方法:Promise.all 与 Promise.allSettled 之间的区别以及何时使用它们。

1. Promise.all:高期望

Promise.all 是一种广泛使用的方法,它接受一个 Promise 数组,并返回一个新的 Promise。当数组中的所有 Promise 都成功时,新的 Promise 也成功;当数组中的任何一个 Promise 失败时,新的 Promise 就会失败。换句话说,它期望所有 Promise 要么成功,要么失败,然后根据情况提供一个结果。

让我们来看一个示例:

javascript 复制代码
const promises = [

  fetch('https://api.example.com/data1'),

  fetch('https://api.example.com/data2'),

  fetch('https://api.example.com/data3'),

];

  


Promise.all(promises)

  .then((results) => {

    // 处理成功的结果

  })

  .catch((error) => {

    // 处理任何错误

  });

在这个示例中,如果任何请求失败,整个Promise.all都会失败,并且你需要在catch块中处理错误。

2. Promise.allSettled:接受现实

与此不同,Promise.allSettled 是 JavaScript Promise API 的较新添加。它也接受一个 Promise 数组,但不会在任何 Promise 拒绝时中断。相反,它会等待所有 Promise 都 "settled"(无论是成功还是失败),并返回一个包含每个 Promise 结果的对象数组。

下面是如何使用Promise.allSettled:

javascript 复制代码
const promises = [

  fetch('https://api.example.com/data1'),

  fetch('https://api.example.com/data2'),

  fetch('https://api.example.com/data3'),

];

  


Promise.allSettled(promises)

  .then((results) => {

    results.forEach((result) => {

      if (result.status === 'fulfilled') {

        // 处理成功的结果

        console.log('已完成:', result.value);

      } else {

        // 处理错误

        console.log('已拒绝:', result.reason);

      }

    });

  });

在这个示例中,即使某些Promise被拒绝,Promise.allSettled仍然会成功,并提供有关每个Promise状态的信息。这在你需要独立了解每个Promise的结果(无论成功或失败)时非常有用。

3. 何时使用

  1. Promise.all: 当你需要所有的 Promise 都成功才能被认为是成功操作,如果有一个 Promise 失败,就中止整个操作。

  2. Promise.allSettled: 当你希望等待所有Promise完成,并需要知道每个Promise的结果,无论成功与否。这在需要单独报告每个 Promise 的状态时非常有用。

4. 总结

Promise.all 和 Promise.allSettled 都是处理多个Promise 的强大工具,选择取决于具体的使用情况,以及是否需要一刀切的行为(Promise.all)或需要单独处理每个 Promise 的结果(Promise.allSettled)。

希望本文对您有所帮助!

相关推荐
Rain50917 分钟前
2.1 Nest.js 项目初始化与模块化架构
开发语言·前端·javascript·后端·架构·数据分析·node.js
拾年2751 小时前
从零手写 Ajax:用原生 XHR 搭建前后端交互全流程
前端·javascript·ajax
拉勾科研工作室2 小时前
区块链工程毕业论文题目【249个】
开发语言·javascript
小林ixn2 小时前
你以为你懂 + 号?看完这篇 Bun + TS 实战,才发现以前全写错了
前端·javascript·typescript
jvxiao3 小时前
你真的懂作用域吗?从编译原理角度深度 JS 的作用域
前端·javascript
Darling噜啦啦3 小时前
二叉树与递归算法实战:从树结构到 LeetCode 爬楼梯,一文吃透前端数据结构与递归思维
前端·javascript·数据结构
Sammyyyyy4 小时前
月之暗面 Kimi Code 0.4.0 发布,终端 AI 编码助手全面采用 TypeScript,实现毫秒级启动
前端·javascript·人工智能·ai·typescript·servbay
宋拾壹5 小时前
fastadmin列表中查看列表,并且添加增加相应的数据
javascript·php·fastadmin
云水一下6 小时前
Vue.js从零到精通系列(三):组件化基础——Props、Emits、插槽与生命周期
前端·javascript·vue.js
小糯米6016 小时前
JavaScript表达式与运算符
开发语言·javascript·ecmascript