ES11 中的 Promise.allSettled 方法：一种更好的处理异步任务的方式-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，经常需要处理一些异步任务，如请求数据、调用接口等。随着 ES6 规范的发布，我们可以用 Promise 对象来处理这些异步任务，而且 ES11 中新增的 Promise.allSettled 方法让异步任务的处理更加方便。

本文将介绍 ES11 中的 Promise.allSettled 方法的使用，包括它的作用、如何使用以及示例代码等内容。

Promise.allSettled 的作用

在 ES11 中，Promise.allSettled 方法用于接收一个 Promise 数组作为输入，等待所有 Promise 执行完成后返回一个 Promise 对象。这个 Promise 对象的结果是一个数组，数组中每个元素表示对应 Promise 对象的执行结果信息，即 Promise 对象的执行状态（已解决或已拒绝）和对应的值或原因。

和 Promise.all 方法不同的是，Promise.allSettled 方法不会在所有 Promise 都已经解决或被拒绝之前就停止执行，即使有些 Promise 状态是被拒绝的。这个方法保证了所有 Promise 执行完成后一定会有一个结果返回。

如何使用 Promise.allSettled

Promise.allSettled 方法的使用非常简单。下面是一个示例：

// javascriptcn.com 代码示例
const p1 = Promise.resolve(1);
const p2 = Promise.reject(2);
const p3 = Promise.resolve(3);

Promise.allSettled([p1, p2, p3])
  .then((results) => {
    console.log(results);
  })
  .catch((err) => {
    console.log(err);
  });

这个例子中我们定义了三个 Promise 对象，分别是：

p1：一个已解决的 Promise，返回值为 1。
p2：一个已拒绝的 Promise，原因为 2。
p3：一个已解决的 Promise，返回值为 3。

我们把这三个 Promise 对象放到 Promise.allSettled 方法中，然后在 then 方法中打印结果。

运行这个代码，会看到如下输出：

[
  { status: 'fulfilled', value: 1 },
  { status: 'rejected', reason: 2 },
  { status: 'fulfilled', value: 3 }
]

可以看到，该方法返回的是一个数组，每个元素都包含了一个 Promise 对象的执行状态和对应的值或原因。

示例代码

下面给出一个更复杂的示例，展示了如何利用 Promise.allSettled 方法来处理多个异步任务的结果。该示例模拟了一个在线购物的场景。在该场景中，需要向服务器请求多个 API 接口来获取用户的订单信息，然后根据订单信息渲染出一个订单列表。

// javascriptcn.com 代码示例
const apiUrls = [
  'https://example.com/api/orders/1',
  'https://example.com/api/orders/2',
  'https://example.com/api/orders/3',
];

const promises = apiUrls.map(
  (url) =>
    fetch(url)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to get order data');
        }
        return response.json();
      })
);

Promise.allSettled(promises)
  .then((results) => {
    const orders = results.reduce((acc, result) => {
      if (result.status === 'fulfilled') {
        const order = result.value;
        acc.push(`
          <li>
            <h3>Order ID: ${order.id}</h3>
            <p>Customer name: ${order.customer_name}</p>
            <p>Total amount: $${order.total_amount}</p>
          </li>
        `);
      } else {
        console.error(result.reason);
      }
      return acc;
    }, []);

    const ordersList = document.querySelector('.orders');
    ordersList.innerHTML = orders.join('');
  })
  .catch((err) => {
    console.error(err);
  });

在这个示例中，我们定义了一个包含三个 URL 的数组 apiUrls，这三个 URL 分别对应了获取三个订单信息的 API 接口。

然后，我们使用 map 方法把每个 URL 转换成一个 Promise 对象，以便使用 Promise.allSettled 方法处理多个异步任务的执行结果。在这个过程中，我们使用了 fetch 方法来发起 HTTP 请求，并处理了 Promise 对象的执行结果。

接下来，我们调用 Promise.allSettled 方法，等待所有 Promise 对象执行完成并返回结果。在 then 方法中，我们使用 reduce 方法把 Promise 对象的执行结果处理成一个数组，这个数组包含了所有已经被解决的 Promise 对象的订单信息。最后，我们把渲染好了的订单列表插入到页面中供用户查看。

总结

通过本文，我们介绍了 ES11 中新增的 Promise.allSettled 方法的作用，如何使用以及示例代码等内容。这个方法在处理多个异步任务时非常有用，它可以保证所有 Promise 执行完成后返回执行结果，即使其中某个 Promise 被拒绝了。希望本文能够帮助你更好地理解和运用 Promise.allSettled 方法来处理异步任务。

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