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

前端小智@大迁世界

发布于 2024-02-12 08:21:24

1520

发布于 2024-02-12 08:21:24

文章被收录于专栏：终身学习者

JavaScript 中的 Promises 是什么？

如果你偶然发现了这篇文章，你可能已经对 promises 很熟悉了。但对于那些新接触 JavaScript 的人来说，我们来详细解释一下。从本质上讲，Promise 对象表示异步操作的最终完成或失败。有趣的是，当 promise 被创建时，其值可能不会立即可用。

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

它们有3种状态：

Pending（待定）：这是初始状态，既没有实现也没有被拒绝。
Fulfilled（已实现）：当 promise 成功完成并产生值时的状态。
Rejected（已拒绝）：当发生错误并且 promise 中的操作不成功时的状态。

一旦 promise 被解决，你可以使用 .then() 来处理结果，使用 .catch() 来管理其执行过程中出现的任何错误。

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

理解 Promise.all()

当同时处理多个 promises 时，你可以利用内置的 Promise.all([]) 方法。此方法接受一个 promises 数组并返回一个统一的 promise。关键是，只有当所有输入的 promises 都成功解决时，这个组合的 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([]) 类似，但不同之处在于它会等待所有输入的 promises 完成或被拒绝，并返回描述每个 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

它通常用于处理不互相依赖的异步操作，你想知道每一个的结果。