在前端开发中，我们经常需要处理多个异步操作。例如，我们需要从不同的 API 中获取数据，并在获取完成后将它们合并起来。在这种情况下，我们需要等待所有异步操作完成才能进行下一步处理。在过去，我们通常使用 Promise.all() 方法来处理这种情况，但它有一个缺点，即只要其中一个 Promise 被拒绝，整个 Promise.all() 就会被拒绝。这时候，我们就需要 ECMAScript 2021 中的 Promise.allSettled() 方法。
Promise.all() 和 Promise.allSettled() 的区别
Promise.all() 方法接收一个 Promise 数组，并返回一个新的 Promise，当数组中的所有 Promise 都被解决时，返回的 Promise 才会被解决。如果数组中的任何一个 Promise 被拒绝，返回的 Promise 就会被拒绝。
-- -------------------- ---- ------- ----- -------- - - ------------------------ - ----------- ----------------------- - ----------- ------------------------ - ---------- -- --------------------- ------------- -- --------------------- ------------ -- ----------------------
在上面的代码中，Promise.all() 方法将返回一个被拒绝的 Promise，因为 promises 数组中的第二个 Promise 被拒绝了。
相比之下，Promise.allSettled() 方法接收一个 Promise 数组，并返回一个新的 Promise，当数组中的所有 Promise 都被解决时，返回的 Promise 才会被解决。与 Promise.all() 不同的是，即使数组中的某个 Promise 被拒绝，返回的 Promise 也会被解决。返回的 Promise 将包含一个数组，其中每个 Promise 都被解决并带有一个对象，该对象表示 Promise 被解决的状态和值。
-- -------------------- ---- ------- ----- -------- - - ------------------------ - ----------- ----------------------- - ----------- ------------------------ - ---------- -- ---------------------------- ------------- -- --------------------- ------------ -- ----------------------
在上面的代码中，Promise.allSettled() 方法将返回一个被解决的 Promise，因为即使 promises 数组中的第二个 Promise 被拒绝，返回的 Promise 也会被解决，并且其结果将包含一个数组，其中每个 Promise 都被解决并带有一个对象，该对象表示 Promise 被解决的状态和值。
使用 Promise.allSettled() 处理多个 Promises
Promise.allSettled() 方法非常适合处理多个异步操作，因为它可以同时处理多个 Promises，并在所有 Promises 都被解决后返回一个包含所有 Promises 状态和值的数组。以下是一个示例代码，该代码使用 Promise.allSettled() 方法从三个 API 中获取数据，并在所有数据获取完成后将其合并为一个数组。
-- -------------------- ---- -------
----- ---- - ---------------------------------------------
----- ---- - ---------------------------------------------
----- ---- - ----------------------------------------------
----- -------- - -
------------
------------
-----------
--
----------------------------
------------- -- -
----- ---- - -------------------- ------- -- -
-- -------------- --- ------------ -
-----------------------
-
------ ----
-- ----
------------------
--
------------ -- ----------------------在上面的代码中，fetch() 方法用于从 API 中获取数据。Promise.allSettled() 方法将返回一个 Promise，该 Promise 在所有 Promises 都被解决后被解决。在 then() 方法中，我们使用 reduce() 方法将所有被解决的 Promises 的值合并为一个数组，并将其打印到控制台上。
总结
在本文中，我们了解了 Promise.all() 和 Promise.allSettled() 方法的区别，并学习了如何使用 Promise.allSettled() 方法处理多个 Promises。Promise.allSettled() 方法是一种非常有用的方法，它可以同时处理多个异步操作，并在所有操作完成后返回一个包含所有 Promises 状态和值的数组。在实际的开发中，我们可以使用 Promise.allSettled() 方法来处理多个异步操作，并将其结果合并为一个数组，以便进行下一步处理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d071abadd4f0e0ff96bc29