使用 ES2021 的新特性实现一种实用的异步等待函数

在前端开发中，经常会遇到需要等待异步操作完成后才能继续执行的情况，如请求数据、读取文件等。在 ES2021 中，引入了新的异步等待函数 Promise.allSettled()，可以方便地等待多个异步操作完成后再执行下一步操作。本文将介绍如何使用 Promise.allSettled() 实现一种实用的异步等待函数，并提供示例代码。

Promise.allSettled() 的用法

Promise.allSettled() 是 ES2021 新引入的异步等待函数，它接收一个 Promise 数组作为参数，返回一个 Promise 对象。该 Promise 对象在所有 Promise 对象都完成后才会被 resolved。不同于 Promise.all()，即使其中某个 Promise 对象被 rejected，Promise.allSettled() 仍然会等待其它 Promise 对象完成后再执行。

Promise.allSettled() 返回的 Promise 对象的值是一个对象数组，数组中的每个对象都表示一个 Promise 对象。每个对象都有一个 status 属性，表示 Promise 对象的状态，可能的值为 "fulfilled" 或 "rejected"；还有一个 value 或 reason 属性，分别表示 Promise 对象的返回值或错误原因。

下面是一个示例，演示了如何使用 Promise.allSettled() 等待多个 Promise 对象完成：

const promises = [
  Promise.resolve('Promise 1'),
  Promise.reject(new Error('Promise 2 error')),
  Promise.resolve('Promise 3')
];

Promise.allSettled(promises)
  .then(results => {
    results.forEach(result => {
      if (result.status === 'fulfilled') {
        console.log('Promise fulfilled:', result.value);
      } else {
        console.log('Promise rejected:', result.reason);
      }
    });
  });

上述示例中，Promise.allSettled() 接收一个包含三个 Promise 对象的数组，其中第二个 Promise 对象被 reject。在 then() 方法中，我们可以遍历结果数组，判断每个 Promise 对象的状态和值。

实现一个异步等待函数

基于 Promise.allSettled() 的特性，我们可以实现一个实用的异步等待函数，用于等待多个异步操作完成后再执行下一步操作。下面是一个示例实现：

async function waitAll(promises) {
  const results = await Promise.allSettled(promises);
  const fulfilled = results.filter(result => result.status === 'fulfilled');
  const rejected = results.filter(result => result.status === 'rejected');
  return { fulfilled, rejected };
}

上述代码中，我们定义了一个名为 waitAll() 的异步函数，它接收一个 Promise 数组作为参数。在函数内部，我们使用 Promise.allSettled() 等待所有 Promise 对象完成，并将结果存入 results 数组中。然后，我们使用 filter() 方法分别筛选出已完成和已拒绝的 Promise 对象，并将它们存入 fulfilled 和 rejected 数组中。最后，我们返回一个对象，包含 fulfilled 和 rejected 两个数组。

使用该函数的示例如下：

const promises = [
  fetch('https://jsonplaceholder.typicode.com/todos/1'),
  fetch('https://jsonplaceholder.typicode.com/todos/2'),
  fetch('https://jsonplaceholder.typicode.com/todos/3')
];

waitAll(promises)
  .then(({ fulfilled, rejected }) => {
    console.log('Fulfilled:', fulfilled);
    console.log('Rejected:', rejected);
  });

上述示例中，我们使用 fetch() 方法获取三个 JSON 数据，并将它们存入一个 Promise 数组中。然后，我们调用 waitAll() 函数等待所有 Promise 对象完成，并在 then() 方法中打印已完成和已拒绝的 Promise 对象。

总结

本文介绍了 ES2021 中新引入的异步等待函数 Promise.allSettled() 的用法，并提供了一个示例实现一个实用的异步等待函数。使用该函数可以方便地等待多个异步操作完成后再执行下一步操作，提高了前端开发的效率和可靠性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658ce0d2eb4cecbf2d2b5e72