随着前端开发的普及，异步编程已经成为了每一个前端工程师不可避免的任务。Promise是ES6中引入的一种处理异步编程的方式，它非常强大，可以解决回调地狱，使得代码更加简洁明了，也可以更好的处理链式调用和异常处理。在ES10中，Promise又新增了一些新方法来方便我们更好的编写异步代码，本文将分别介绍ES6的promise.all()和ES10的promise.allSettled()方法。
promise.all()
promise.all()方法接收一个数组作为参数，数组中的所有promise对象都会按照顺序执行。该方法返回一个promise对象，如果数组中的所有promise都返回成功，那么该方法返回的promise也会成功，并且返回值是一个数组，数组中包含了每一个promise返回的结果。如果数组中有一个promise失败，那么该方法返回的promise也会失败，并返回第一个失败的promise的错误信息。
下面是一个简单的示例，该示例中promise.all()接收一个包含三个promise对象的数组，这三个promise分别会延迟1秒、2秒、3秒后返回值：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
----------------- -----------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
----------------- -----------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
----------------- -----------
-- ------
---
---------------------- --------- ----------
------------ -- -
-------------------- -- ---------- ---------- --------- ---------- --------- ----------
--
------------ -- -
---------------------
---在上面的示例中，我们将三个promise对象传递给了promise.all()方法，并在其返回的promise对象上使用then方法对其进行操作。运行代码后，我们可以看到控制台输出了一个数组，该数组包含了这三个promise返回的结果。
promise.allSettled()
promise.allSettled()方法同样接收一个数组作为参数，该数组中的所有promise都会被执行，并且不管成功与否，它们的结果都会被收集到一个数组中返回。这意味着，即使数组中有一个promise失败了，promise.allSettled()方法也不会返回异常，它仍然会继续执行其他promise，最后返回的结果是在一个对象数组中，数组中每一个对象包含了每个promise的状态和结果。
下面是一个示例，该示例中我们将数组中的第二个promise设置为rejected状态，这样我们可以看到promise.allSettled()方法的执行结果：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
----------------- -----------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------- --------------- ------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
----------------- -----------
-- ------
---
----------------------------- --------- ----------
------------- -- -
---------------------
--
------------ -- -
---------------------
---在上面的示例中，我们使用了promise.allSettled()方法，将三个promise对象传递给了它，其中第二个promise对象演示了一个失败的情况，如果我们运行该代码，我们可以看到在控制台输出了如下的结果：
-- -------------------- ---- -------
-
- ------- ------------ ------ --------- --------- --
-
------- -----------
------- ------ -------- --------
-- ----------------
-- --- ------- -------------
-- ----------------
-- --- ------- -------------
-- ---------------
--
- ------- ------------ ------ --------- --------- -
-在上面的结果数组中，每个元素都是一个对象，其中有两个属性：status属性表示promise执行的状态，value属性表示promise对象的返回值或失败原因。在第二个Promise对象被拒绝后，我们仍然可以获取到其他两个promise的结果，且promise.allSettled()方法返回的promise对象状态为fulfilled。
总结
Promise是一种非常强大的处理异步编程的方式，在ES10中新增的promise.allSettled()方法可以非常方便的处理多个异步任务的执行，尤其是在多个异步任务执行出错时。建议在使用promise.all()和promise.allSettled()方法时，要始终谨记控制promise数组中的个数和顺序，以避免出现意料之外的错误。
以上就是ES10 之从 promise.all() 到 promise.allSettled()方法的详细介绍，希望对大家学习前端异步编程有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4df2448841e9894147cc0