Promises 是 JavaScript 中异步编程中最常用的一种方式之一。在 JavaScript 中，Promises 提供了一种优雅的解决方案，以解决回调地狱（callback hell）和代码风格不佳的问题。 在本文中，我们将了解在 ES6/ES7 和 ES10 中可用的两种 Promise API：Promise.all() 和 Promise.allSettled()。
什么是 Promise.all()？
Promise.all() 是 ES6 中的一个功能，它允许我们并行运行多个异步操作，并在所有操作完成之后收集它们的结果。让我们通过一个示例代码来了解它的工作原理：
const promise1 = Promise.resolve(1); const promise2 = Promise.resolve(2); const promise3 = Promise.resolve(3); Promise.all([promise1, promise2, promise3]) .then(values => console.log(values)); // [1, 2, 3]
在上面的示例中，我们创建了三个 Promise，并将它们传递到 Promise.all() 方法中。当所有 Promise 完成时，Promise.all() 返回一个数组，其中包含所有 Promise 的结果值，按照传递的 Promise 数组的顺序排列。
如果您传递给 Promise.all() 的 Promise 不是立即解决的，那么 Promise.all() 将等待所有 Promise 都完成，然后返回从 Promise 解决的结果数组。
如果其中任何一个 Promise 失败，Promise.all() 将立即拒绝并返回第一个失败 Promise 的错误原因。
如何使用 Promise.all()？
下面是一个使用 Promise.all() 的常见示例：
-- -------------------- ---- ------- ----- ---------- - -- -- ----------------------- ---- ----- ---------- - -- -- ----------------------- ---- ------------- ------------- ------------- ------------------ --------- -- - -------------------- --------- -- ------- --- ------- -- ---
在上面的示例中，我们创建了两个异步函数，它们将分别返回“result 1”和“result 2”，并将它们传递到 Promise.all() 方法中。当这两个 Promise 都解决时，我们打印并打印它们的结果到控制台中。
Promise.all() 可以让您在使用异步操作时，取回多个异步操作的结果。使用它来协调并行异步操作和收集结果。
什么是 Promise.allSettled()？
Promise.allSettled() 是 ES10 中的一个功能，它允许我们等待所有 Promise 完成，并在所有 Promise 解决或拒绝之后收集所有状态。让我们通过一个示例代码来了解它的工作原理：
const promise1 = Promise.resolve(1);
const promise2 = Promise.reject(new Error('error'));
const promise3 = Promise.resolve(3);
Promise.allSettled([promise1, promise2, promise3])
.then(results => console.log(results));在上面的示例中，我们将三个 Promise 传递给 Promise.allSettled() 方法。第一个 Promise 被解决，第二个 Promise 被拒绝，并且第三个 Promise 被解决。当所有 Promise 完成时，Promise.allSettled() 返回一个数组，其中包含所有 Promise 的状态，无论其成功或失败。
返回值数组的一个示例可能如下所示：
[
{status: "fulfilled", value: 1},
{status: "rejected", reason: Error: error},
{status: "fulfilled", value: 3}
]在返回值数组中，每个对象都具有两个属性：status 和 value 或 reason。status 可能为 fulfilled 或 rejected，分别表示 Promise 是否成功或失败。如果该 Promise 被解决，则 value 属性表示 Promise 的解决值，如果失败，则 reason 属性表示拒绝原因。
如何使用 Promise.allSettled()？
下面是一个使用 Promise.allSettled() 的常见示例：
-- -------------------- ---- ------- ----- ---------- - -- -- ----------------------- ---- ----- ---------- - -- -- ------------------ ---------------- -------------------- ------------- ------------- --------------- -- - --------------------- ---
在上面的示例中，我们创建了两个异步函数，它们将分别返回“result 1”和一个错误。当这两个异步操作都完成时，我们打印结果数组，其中包含所有 Promise 的状态和值或原因。
Promise.allSettled() 可以让您等待所有异步操作完成，并通过返回结果数组了解每个异步操作的状态和结果。
总结
在 JavaScript 中，Promises 提供了一种优雅的解决方案以解决回调地狱和代码风格不佳的问题。通过使用 Promise.all()，您可以并行运行多个异步操作，并在所有操作完成之后收集它们的结果。另外，通过使用 Promise.allSettled()，您可以等待所有 Promise 完成，并在所有 Promise 解决或拒绝之后收集所有状态。
使用 Promise.all() 和 Promise.allSettled() 可以让您更好地控制异步代码流，并且最大化利用 JavaScript 异步编程的优点，这是任何现代前端类开发工程师都需要掌握的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646efa56968c7c53b0d5c057