ES11 新特性：Promise.allSettled() 方法，你会用吗？
现在，前端的工作已经变得越来越复杂，需要应对多个异步操作，并正确地处理错误和异常情况。而 Promise 作为一种处理异步操作的方式，已经成为了 Web 开发的标准。
随着新版本的 JavaScript 的发布，Promise 也得到了不断的改进和优化。其中，ES11（也称为 ES2020）的一个新特性——Promise.allSettled() 方法，就是一个非常有用的改进，本文将介绍这个方法的详细用法和示例。
Promise.allSettled() 方法是什么？
Promise.allSettled() 方法可以接收一组 Promise 对象，并在它们全部完成之后返回一个数组，数组中的每一个元素都是一个对象，代表着接收到的每一个 Promise 对象的状态，这个对象有两个属性：status 和 value（或 reason）。其中 status 表示 Promise 对象的状态，value（或 reason）则表示 Promise 对象的返回值或失败原因。
Promise.allSettled() 方法的语法如下：
Promise.allSettled(promises) .then((results) => { // 处理结果 }) .catch((err) => { // 处理错误 });
其中，promises 是一个数组，包含一组 Promise 对象，results 是一个数组，包含了所有 Promise 对象的状态。
Promise.allSettled() 方法的用途
Promise.allSettled() 方法的用途非常广泛，例如：
- 并行获取多个数据源
如果你需要从多个数据源获取数据，而且它们的返回可能会有延迟或失败，你可以使用 Promise.allSettled() 方法，并在数据全部获取完成后统一处理它们的返回结果或失败原因：
const promises = [ fetch('/data/source1.json'), fetch('/data/source2.json'), fetch('/data/source3.json') ];
Promise.allSettled(promises) .then((results) => { // 处理结果 }) .catch((err) => { // 处理错误 });
- 处理多个异步操作的结果
如果你有多个异步操作，而且这些异步操作的结果都不一定会成功，你可以使用 Promise.allSettled() 方法，统一处理这些异步操作的结果：
const promises = [ fetch('/api/someData'), new Promise((resolve, reject) => { setTimeout(() => { resolve('定时器结束'); }, 1000); }), fetch('/api/anotherData'), ];
Promise.allSettled(promises) .then((results) => { // 处理结果 }) .catch((err) => { // 处理错误 });
这里包括了 fetch 请求和一个定时器，这些异步操作的返回都有可能是成功或失败。
- 等待多个 Promise 对象完成
如果你有多个 Promise 对象需要执行，而且一些 Promise 对象可能会失败，你可以使用 Promise.allSettled() 方法，等待所有 Promise 对象完成，不管它们的结果如何：
const promises = [ Promise.resolve('结果 1'), Promise.reject(new Error('Promise 错误')), Promise.resolve('结果 2'), ];
Promise.allSettled(promises) .then((results) => { // 处理结果 }) .catch((err) => { // 处理错误 });
代码示例解析
现在，我们来看一下一个更加详细的代码示例，丝毫不含其他冗杂感性的运行代码片段：
const urls = [ 'https://fake-url1.com', 'https://fake-url2.com', 'https://fake-url3.com' ];
const fetchList = urls.map(url => fetch(url));
Promise.allSettled(fetchList) .then((results) => { let successfulFetches = []; let brokenFetches = [];
-- -------------------- ---- -------
------------------------ -- -
-- -------------- --- ------------ -
-------------------------------------
- ---- -
----------------------------------
-
---
----------------------- -------------------
----------------------- ---------------});
这里，我们创建了一个字符串数组 urls，包含三个 URL，然后使用 map 方法，将每个 URL 转换成一个 fetch 对象，并将它们组合成一个 fetchList 数组，然后传入 Promise.allSettled() 方法中。
完成调用之后，我们可以迭代结果数组 results，并将成功的数据请求存储在 successfulFetches 变量中，将失败的数据请求存储在 brokenFetches 变量中，并最终在控制台打印出它们。
结论
Promise.allSettled() 方法是 ES11 的一个新特性，是 Promise 的一种非常有用的扩展，可以用于同时处理多个异步操作的结果。它的优点是，它不会有任何一个 Promise 对象导致整个操作失败，而且我们可以使用该方法来灵活地处理异步操作的结果，更好地掌握我们应用程序的状态。
请注意，Promise.allSettled() 方法与 Promise.all() 方法有一些不同。它不会在传递给方法的任何 Promise 对象失败时抛出异常，而是会在所有 promise 都完成后返回一组状态。
对于不支持此新特性的浏览器，请使用 polyfill 或库，如 es6-promise 或 Bluebird，以使其正常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676efcfee9a7045d0d6f7323