前言
ES11 (也称为 ES2020) 在 2020 年 6 月份正式发布。在这个新版本中，JavaScript 新增了一些非常有用的功能，其中一个是 Promise.allSettled() 方法。在以往，开发者们使用 Promise.all() 方法来同时并行处理多个异步操作。但是，当 Promise 出现异常时，Promise.all() 方法会立即停止执行并返回一个异常对象。在 ES2020 中，这个问题已经得到了解决。Promise.allSettled() 方法在 Promise 异常时不会直接终止执行，它允许在所有 Promise 结束后返回一个数组，其中包含每个 Promise 的状态。
在本文中，我们将探讨 Promise.allSettled() 方法的特性、使用方式、示例代码以及其它相关细节。希望这篇文章对你了解 Promise 的使用会有所帮助。
Promise.allSettled() 方法
Promise.allSettled() 方法返回一个 Promise。这个 Promise 在所有输入的 Promise 都完成后才会解决。当所有 Promise 都完成时，返回一个数组，其中包含每个 Promise 对象的结果。每个结果对象都有一个 status 字段表示 Promise 的状态，它可以设置为 "fulfilled" 或 "rejected"。在 "fulfilled" 状态下，结果对象还包含一个 value 字段表示 Promise 的返回值。在 "rejected" 状态下，结果对象还包含一个 reason 字段表示 Promise 的失败原因。
这里是 Promise.allSettled() 方法的语法：
Promise.allSettled(iterable);
注意：Promise.allSettled() 方法是在 ECMAScript 2020 标准中引入的，因此它可能不被所有浏览器和 JavaScript 引擎所支持。在使用 Promise.allSettled() 之前，请先检查您的环境是否支持它。
Promise.allSettled() 使用示例
下面是 Promise.allSettled() 方法的使用示例：
-- -------------------- ---- ------- --- -------- - - ------------------- ------------------ ----------------- ------------------- ------------------ -------------- ---------- -- ------------------------------------------- -- - ------------------------ -- --------------------- ---
在这个示例中，我们创建了一个包含 4 个 Promise 的数组。其中两个 Promise 被处理为 "fulfilled" 状态，另外两个被处理为 "rejected" 状态。在最后的 then() 方法中，我们使用 results 数组迭代所有 Promise 的结果。下面是控制台的输出：
{status: "fulfilled", value: 1}
{status: "rejected", reason: Error: Error! at <anonymous>:3:21}
{status: "fulfilled", value: 2}
{status: "rejected", reason: Error: Another error! at <anonymous>:5:21}这个示例展示了 Promise.allSettled() 方法的用法。即使有 Promise 抛出异常，方法仍然会在全部 Promise 都结束后返回一个由结果对象组成的数组。这使得开发者可以更轻松地了解哪些 Promise 成功哪些失败。
Promise.allSettled() 方法的响应式编程
在响应式编程中，我们的程序通常需要监听多个源。这些源返回的结果在一段时间内可能是不确定的。例如，我们可以监视获取商品价格和库存以确定一种商品是否下架或重定价。在这种情况下，我们要监听多个 Promise，并在所有 Promise 完成后执行一些操作。
在以前的版本中，我们可能会使用 Promise.all() 方法来执行这个操作。如果有一个 Promise 抛出异常，这个方法就会立即停止执行并抛出一个异常。但是在某些情况下，我们可能需要知道所有 Promise 的状态，而不是简单地停止执行并抛出异常。我们可以使用 Promise.allSettled() 方法。下面是一个使用 Promise.allSettled() 的代码示例：
let getStock = new Promise((resolve, reject) => setTimeout(() => resolve({stock: 100}), 500));
let getPrice = new Promise((resolve, reject) => setTimeout(() => reject(new Error("Unable to fetch price")), 200));
Promise.allSettled([getStock, getPrice]).then((results) => {
results.forEach((result) => console.log(result));
});在这个示例中，我们创建了两个 Promise。一个是获取商品库存，另一个是获取商品价格。其中，获取库存的 Promise 设置了一个 500ms 后才会返回 resolved 状态。获取价格的 Promise 设置了一个 200ms 后才会返回 rejected 状态。因此，我们可以在控制台中看到如下的输出：
{status: "fulfilled", value: {stock: 100}}
{status: "rejected", reason: Error: Unable to fetch price at <anonymous>:2:51}Promise.allSettled() 返回一个数组，其中包含所有 Promise 的状态。这个示例展示了如何使用 Promise.allSettled() 方法在执行时更加灵活。如果我们使用 Promise.all() 方法，它会在 getPrice 抛出异常时立即停止执行并抛出异常。而在使用 allSettled() 方法时，程序并不受到 getPrice 异常抛出的影响。他依然会在 500ms 后返回另一个获取商品库存的 Promise 的 resolved 结果。
结论
在 ES11 中，Promise.allSettled() 方法为 JavaScript 带来了更加灵活和精准的异步编程方式。通过 allSettled() 方法，我们可以自由地检测和检索多个 Promise 的结果。希望这篇文章能够对你更好地理解 Promise 异步编程有所帮助。如果您想上手使用 Promise.allSettled() 方法，记得及时更新你自己的环境，以确保你的代码能够正常运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671cfd369babaf620fb3db0a