你为什么还在用Promise.all?

news2024/11/20 3:35:26

请停止在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

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