随着前端技术的不断发展，我们经常会遇到需要并行处理多个异步操作的情况。在 ES6 中，Promise.all() 方法为我们提供了一种并行执行多个异步操作并在所有操作都执行完成后返回结果的解决方案。而在 ECMAScript 2021（ES12） 中，Promise.allSettled() 方法被引入，为我们提供了一种更加强大且灵活的解决方案。
Promise.all() 方法和 Promise.allSettled() 方法的区别
在介绍 Promise.allSettled() 方法之前，我们先来了解一下 Promise.all() 方法。Promise.all() 方法接受一个包含多个 Promise 的数组作为参数，返回一个新的 Promise 对象，当数组中的所有 Promise 都完成时，这个 Promise 才会完成，并返回一个由所有 Promise 的结果组成的数组。如果其中任何一个 Promise 被拒绝（rejected），这个 Promise 同样也被拒绝，并返回被拒绝的 Promise 的结果。
-- -------------------- ---- ------- ------------- ------------------------- ------------------------ ---------------- -- - -------------------- -- --------- -------- --- ------------- ------------------------- ------------------ ---------------- ---------------- -- - ------------------- -- ------ ------ ---
相比之下，Promise.allSettled() 方法则更加灵活。Promise.allSettled() 方法同样接受一个 Promise 数组作为参数，但不同的是，它不会在任何 Promise 被拒绝时立即拒绝，而是等待所有 Promise 都执行完毕，无论是被解决（fulfilled）还是被拒绝，都会返回一个由所有 Promise 执行结果组成的数组。这个数组中的每一项都包含有关每个 Promise 执行结果的信息，包括状态（fulfilled 或 rejected）和结果值（value 或 reason）。
Promise.allSettled([
Promise.resolve('hello'),
Promise.reject(new Error('Error!'))
]).then((result) => {
console.log(result); // [{status: 'fulfilled', value: 'hello'}, {status: 'rejected', reason: Error}]
});Promise.allSettled() 方法的应用场景
Promise.allSettled() 方法可以应用于许多场景中，特别是当你需要同时进行多个异步操作，并且希望了解每个操作的状态和结果时，这个方法尤其有用。
举个例子，假设我们需要从两个不同的 API 中获取一些数据，并等待它们全部完成，然后才进行下一步的操作。使用 Promise.all() 方法处理这个任务时，如果其中一个 API 请求失败，我们将丢失该API请求返回的所有数据。但使用 Promise.allSettled() 方法时，我们可以知道我们使用两个API操作的状态，以及哪一个 API 的操作失败了。如下所示：
-- -------------------- ---- -------
--------------------
--------------
-------------
--
--------------- -- -
----- ------------- - --------------------- -- ------------- --- ------------
-- --------------------- - -- -
------------------ --- --- -------- ----------
- ---- -
---------------- --- -------- -----------
-
---Promise.allSettled() 方法的兼容性
由于 Promise.allSettled() 方法是 ES12 中引入的新特性，所以它并不是所有浏览器都支持的。在撰写本文时，以下主流浏览器已经支持 Promise.allSettled() 方法：
- Chrome 76+
- Firefox 74+
- Safari 13.1+
- Edge 79+
- Opera 63+
对于不支持 Promise.allSettled() 方法的浏览器，可以使用 Polyfill 或者自己实现 Promise.allSettled() 方法的功能。
总结
Promise.allSettled() 方法是一个强大且灵活的异步操作解决方案。它能够并行执行多个异步操作，返回一个按执行顺序排序的 Promise 对象数组，每个 Promise 对象都包含了操作的状态和结果。灵活的状态返回方式为我们提供了更大的操作空间和错误回收机制，值得我们在实际的开发中使用。
示例代码
-- -------------------- ---- -------
-- - ------ -------
----- ------ - -------------------------------------------------------
-------------- -- -----------------
----- ------ - -----------------------------------------------------
-------------- -- -----------------
----- ------ - ---------------------------------------------------------------
-------------- -- -----------------
--------------------------- ------- --------
--------------- -- -
------------------ ----- --------------- ------------
---------------------- -- -
----- - ------- ------ ------ - - -------
-- ------- --- ------------ -
--------------------- -------
- ---- -- ------- --- ----------- -
---------------------- --------
-
---
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fa8f3af6b2d6eab317a3c1