停止使用 Promise.all() ，Promise.allSettled() 更强大！

最新推荐文章于 2026-04-21 10:08:11 发布

原创最新推荐文章于 2026-04-21 10:08:11 发布 · 556 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

夕阳_醉了

关注

标签

#前端

分类前端开发

代码可运行

引言

在 JavaScript 中，Promise 对象是处理异步操作的强大工具。它们允许我们优雅地管理异步操作的成功和失败，并提供链式操作的机制。本文将深入探讨 Promise 对象的基本概念，以及 Promise.all() 和 Promise.allSettled() 这两个方法的用法和区别，帮助你更有效地利用 Promise 对象解决异步问题。

JavaScript 中的 Promise 对象

const promise = new Promise((resolve, reject) => {
   // 一些异步操作
   if (/* 操作成功 */) {
     resolve(result);
   } else {
     reject(error);
   }
});

Promise 对象有三种状态：

**等待状态 (Pending)**：这是初始状态，既没有完成，也没有失败。
**已完成状态 (Fulfilled)**：当 Promise 对象成功完成并产生一个值时，它处于此状态。
**已拒绝状态 (Rejected)**：当 Promise 对象执行过程中发生错误，导致操作失败时，它处于此状态。

一旦 Promise 对象完成，你可以使用 .then() 方法来处理结果，使用 .catch() 方法来处理执行过程中发生的任何错误。

promise
   .then(result => {
     console.log('成功:', result);
   })
   .catch(error => {
     console.error('错误:', error);
   });

理解 Promise.all()

当同时处理多个 Promise 对象时，你可以利用内置的 Promise.all([]) 方法。该方法接受一个 Promise 对象数组，并返回一个统一的 Promise 对象。关键在于，这个组合的 Promise 对象只有在所有输入的 Promise 对象都成功完成时才会完成。如果其中一个失败，整个 Promise 对象就会被拒绝。以下是一个示例：

const promise1 = fetch('https://api.example.com/data1');
const promise2 = fetch('https://api.example.com/data2');
const promise3 = fetch('https://api.example.com/data3');

Promise.all([promise1, promise2, promise3])
   .then(values => {
     console.log('所有数据已获取:', values);
   })
   .catch(error => {
     console.error('发生错误:', error);
   });

这种方法通常用于处理多个相关的异步任务，这些任务的执行彼此依赖，因此我们希望所有异步任务都成功完成才能继续执行代码。

了解 Promise.allSettled()

Promise.allSettled([]) 与 Promise.all([]) 类似，但它会等待所有输入的 Promise 对象完成或被拒绝，并返回一个包含每个结果描述对象的 Promise 对象数组。

const promise1 = Promise.resolve('成功 1');
const promise2 = Promise.reject('错误 2');
const promise3 = Promise.resolve('成功 3');

Promise.allSettled([promise1, promise2, promise3])
   .then(results => {
     results.forEach(result => {
       if(result.status === 'fulfilled') {
         console.log('成功获取值:', result.value);
       } else {
         console.error('拒绝原因:', result.reason);
       }
     });
  });
//输出
// 成功获取值: 成功 1
// 拒绝原因: 错误 2
// 成功获取值: 成功 3

它通常用于处理相互独立的异步操作，你希望了解每个操作的结果。