在前端开发中，异步编程是必不可少的技能。为了解决回调地狱和异步操作的顺序问题，ES6 引入了 Promise 对象。Promise 对象可以将异步操作封装成一个对象，可以更加优雅和可读的处理异步操作。
在 ECMAScript 2020（ES11）中，Promise.allSettled 方法被引入，它可以解决 Promise.all 方法的一些局限性，提供了更加灵活的异步编程方案。本文将介绍 Promise.allSettled 的用法和应用场景，并提供示例代码。
Promise.all 方法的局限性
Promise.all 方法可以将多个 Promise 对象封装成一个新的 Promise 对象，当所有的 Promise 对象都成功时，这个新的 Promise 对象才算成功；当其中一个 Promise 对象失败时，这个新的 Promise 对象就算失败。
例如，下面的代码将两个异步操作封装成 Promise 对象，并通过 Promise.all 方法将它们合并成一个新的 Promise 对象：
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
-------------------
-- ------
---
---------------------- ----------
---------------- --------- -- -
-------------------- ---------
--
------------ -- -
-------------------
---在上面的代码中，promise1 会在 1 秒后返回成功结果，promise2 会在 2 秒后返回失败结果。由于 Promise.all 方法会等待所有的 Promise 对象都返回结果后再返回新的 Promise 对象，所以在 2 秒后，Promise.all 方法会返回一个失败结果，结果为 'promise2'。
但是，Promise.all 方法有一个局限性，即只要有一个 Promise 对象失败，就会立即返回失败结果。这个限制在某些场景下是不够灵活的，例如，我们需要同时处理多个异步操作，但不希望失败的操作影响其他操作的结果。
Promise.allSettled 方法的用法和应用场景
Promise.allSettled 方法是一个新的方法，它可以将多个 Promise 对象封装成一个新的 Promise 对象，当所有的 Promise 对象都返回结果时，这个新的 Promise 对象才算成功，不管每个 Promise 对象返回的结果是成功还是失败，都会被放在一个数组中返回。
例如，下面的代码将两个异步操作封装成 Promise 对象，并通过 Promise.allSettled 方法将它们合并成一个新的 Promise 对象：
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
-------------------
-- ------
---
----------------------------- ----------
------------- -- -
---------------------
---在上面的代码中，promise1 会在 1 秒后返回成功结果，promise2 会在 2 秒后返回失败结果。由于 Promise.allSettled 方法会等待所有的 Promise 对象都返回结果后再返回新的 Promise 对象，所以在 2 秒后，Promise.allSettled 方法会返回一个成功结果，结果为：
- - ------- ------------ ------ ---------- -- - ------- ----------- ------- ---------- - -
可以看到，每个 Promise 对象的结果都被放在一个对象中，对象中包含了结果的状态（'fulfilled' 或 'rejected'）和结果本身（value 或 reason）。这样就可以更加灵活的处理异步操作的结果，不管成功还是失败，都可以被处理。
Promise.allSettled 方法的应用场景很广泛，例如：
- 处理多个异步操作，并对每个操作的结果进行处理。
- 不希望失败的操作影响其他操作的结果。
- 需要等待所有的异步操作都完成后再进行下一步操作。
示例代码
下面的代码演示了 Promise.allSettled 方法的用法和应用场景：
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
-------------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----------------------------- --------- ----------
------------- -- -
---------------------
----- ---------------- - --------------------- -- ------------- --- ----------------------- -- --------------
------------------------------
----- --------------- - --------------------- -- ------------- --- ---------------------- -- ---------------
-----------------------------
---在上面的代码中，promise1 会在 1 秒后返回成功结果，promise2 会在 2 秒后返回失败结果，promise3 会在 3 秒后返回成功结果。由于 Promise.allSettled 方法会等待所有的 Promise 对象都返回结果后再返回新的 Promise 对象，所以在 3 秒后，Promise.allSettled 方法会返回一个成功结果，结果为：
- - ------- ------------ ------ ---------- -- - ------- ----------- ------- ---------- -- - ------- ------------ ------ ---------- - -
可以看到，每个 Promise 对象的结果都被放在一个对象中，对象中包含了结果的状态（'fulfilled' 或 'rejected'）和结果本身（value 或 reason）。我们可以通过 filter 和 map 方法对结果进行处理，例如，将所有成功的结果放在一个数组中，将所有失败的结果放在另一个数组中。
总结
Promise.allSettled 方法是 ECMAScript 2020（ES11）中引入的新方法，它可以将多个 Promise 对象封装成一个新的 Promise 对象，当所有的 Promise 对象都返回结果时，这个新的 Promise 对象才算成功，不管每个 Promise 对象返回的结果是成功还是失败，都会被放在一个数组中返回。Promise.allSettled 方法的应用场景很广泛，在处理多个异步操作时非常有用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6587e5f4eb4cecbf2dd19220