ES12（也称作 ES2021）是 JavaScript 语言的最新版本，其中最有用的新增之一是 Promise.allSettled 方法。该方法允许我们并行地处理多个异步任务或 Promise，并等待所有任务或 Promise 完成后再一起返回结果。本文将详细介绍该方法的用法和实际应用场景，以及如何运用该方法提高前端开发的效率。
Promise.all 方法的局限性
在 ES6 中，引入了新的 Promise 对象，能够处理异步操作，这个对象主要包含三种状态：Pending、Fulfilled 和 Rejected。同时，Promise 对象还提供了 all 方法，用于并行处理多个异步操作并等待它们全部完成。该方法接收一个 Promise 数组作为参数，当所有 Promise 都成功时，该方法返回一个包含所有 Promise 结果的数组；当其中任何一个 Promise 失败时，该方法会直接返回一个拒绝状态的 Promise。
例如，如果我们需要从三个不同的远程接口获取数据，可以用 Promise.all 方法实现并行处理，等到所有数据都返回了再聚合在一起：
const results = await Promise.all([
fetch('http://example.com/api/data1'),
fetch('http://example.com/api/data2'),
fetch('http://example.com/api/data3')
]);这种方式非常高效，但也存在一些局限性。例如，当其中任何一个 Promise 被拒绝时，Promise.all 立即返回拒绝状态的 Promise，此时没有办法获取已经被解决的 Promise 的结果。这在某些情况下可能导致问题。
Promise.allSettled 的作用
ES12 引入了 Promise.allSettled 方法，来解决上述问题。该方法接收一个 Promise 数组作为参数，不管 Promise 成功还是失败，最后都会返回一个包含所有 Promise 的状态和结果的数组。这意味着即便其中有 Promise 被拒绝，我们也能获取到另外 Promise 的结果。
例如，如果我们使用 Promise.allSettled 方法获取三个异步操作的结果，即使其中一个 Promise 被拒绝，我们也能够获取所有 Promise 的结果：
-- -------------------- ---- ------- ----- ------- - ----- -------------------- -------------------------------------- -------------------------------------- ------------------------------------- --- -- ------ ------ -- - -- -------- ------------ ------ ---------- -- -------- ----------- ------- ----------------- -- --------- -- -------- ------------ ------ --------- -- -
我们可以看到，结果数组中包含了每个 Promise 的状态和结果，无论是否被 Promise 被拒绝，我们都能够获取到它的解决结果。
Promise.allSettled 的实际应用
Promise.allSettled 方法在实际开发中非常有用。例如，我们可以用它来对多个异步操作的状态进行聚合和分析。比如说，我们可以在多个接口请求中，同时发送请求并检查它们的状态。这种场景下，我们可以使用 Promise.allSettled 方法来一次性处理所有请求，而不需要每个请求分别处理：
-- -------------------- ---- -------
----- ------------- - -
--------------------
--------------------
--------------------
-------------------
--
----- ------- - ----- ----------------------------------
-- -----------
----- ------------ - --------------- -- -------- --- -------------
-- -----------
----- ---- - -------------------- -- -- -
-- --------- --- ------------ -
------------------
-
------ ----
-- ----在上述代码中，我们首先向多个远程接口发出请求，并使用 Promise.allSettled 方法处理这些请求。根据返回结果，我们分别进行了两种不同的处理。首先，我们通过 every 方法检查是否所有请求都已成功完成。其次，我们使用 reduce 方法将每个已经成功返回的数据收集起来。
总结
ES12 中新增的 Promise.allSettled 方法能够并发处理多个异步操作并等待结果。它的主要优点在于，不管 Promise 成功或失败，它都能获取到所有 Promise 的状态和结果。通过使用该方法，我们可以更加高效地处理多个异步操作，并且可以更好地利用 JavaScript 的异步编程功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/644f5d61980a9b385b8e51ac