你为什么还在用Promise.all?

请停止在JavaScript中使用Promise.all()

什么是JavaScript中的Promise

如果您偶然发现这篇文章,那么您可能已经熟悉了promise。 但是,对于那些JavaScript新手来说,让我们来详细说明一下。 从本质上讲,Promise对象表示异步操作的最终完成或失败。 有趣的是,当创建promise时,其值可能无法立即可用。

const promise = new Promise((resolve, reject) => {
  // Some asynchronous operation
  if (/* operation is successful */) {
    resolve(result);
  } else {
    reject(error);
  } 
});

它们有3种状态:

• Pending:这是初始状态,既未实现也未拒绝
• Fulfilled:当promise成功完成并导致值时的状态
• Rejected:在promise执行期间发生错误时的状态

一旦promise已确定,您可以使用.then()来处理结果和.catch()来管理执行期间出现的任何错误。

promise
  .then(result => {
    console.log(‘Success:’, result);
  }) 
  .catch(error => {
    console.error(‘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(‘All data fetched:’, values);
  })
  .catch(error => {
    console.error(‘An error occurred:’, error);
  }); 

当有多个相关的异步任务以及它们的工作相互依赖时,通常会使用此方法,因此我们希望它们都成功才能继续代码执行。

揭示Promise.allSettled()

使用Promise.allSettled([])类似于使用Promise.all([]),不同之处在于它将等待所有输入promise要么兑现要么拒绝,并返回描述每个promise结果的对象数组。

const promise1 = Promise.resolve(‘Success 1’); 
const promise2 = Promise.reject(‘Error 2’);
const promise3 = Promise.resolve(‘Success 3’);  

Promise.allSettled([promise1, promise2, promise3])
  .then(results => {
    results.forEach(result => {
      if(result.status === ‘fulfilled’) {
        console.log(‘Fulfilled with value:’, result.value);
      } else {
        console.error(‘Rejected with reason:’, result.reason);
      }
    });
 });  

//结果  
// Fulfilled with value: Success 1
// Rejected with reason: Error 2 
// Fulfilled with value: Success 3

它通常用于处理不依赖于彼此的异步操作,并且您希望知道每个操作的结果。

为什么Promise.allSettled()更加出色

总的来说,在大多数常见情况下,使用Promise.allSettled()而不是Promise.all()具有其优势:

全面的结果信息

如果任何promise被拒绝,Promise.all()会立即被拒绝,这使得确定其他promise的状态变得困难,特别是在其他promise成功解析的同时。 使用Promise.allSettled([])可以给你一个完整的结果图片。

优雅的错误处理

当您希望无论失败与否都继续执行时,Promise.all()的“快速失败”方法可能会受到限制,而Promise.allSettled()允许您单独处理每个promise的结果。

批量操作

在处理批量操作的同时单个操作是独立的,您可能不希望整个批处理由于操作失败而失败。

更明智的决策

使用Promise.allSettled()后,在访问所有promise的结果后,您可以做出更明智的决定。 例如,当您从不同的API获取数据时,如果其中一个失败,您可以决定是否应该继续处理数据或提供带有错误消息的通知。

增强的用户体验

如果必要,提供部分结果和错误通知通常比仅使用一些通用消息失败整个操作的UX要好。 Promise.allSettled()使这种方法很容易实现。

最后的话

总之,在某些情况下,Promise.all()可能很有价值,但Promise.allSettled()为大多数场景提供了更灵活、更具弹性的方法。