在前端开发中，我们经常需要处理多个 Promise 对象，其中一个 Promise 对象的状态是否已经完成可能会影响到整个程序的执行。而 Promise.allSettled 方法可以用来处理这种情况。然而，在一些旧版本的浏览器中，这个方法可能并不可用。那么我们该怎么做呢？本文将介绍在原生 JavaScript 中实现 Promise.allSettled 方法的方式，并提供示例代码。
Promise.allSettled 方法的作用
Promise.allSettled 方法用于接收一组 Promise 对象，并返回一个新的 Promise 对象。这个新的 Promise 对象在所有传入的 Promise 对象都已经执行完毕时才会被 resolve，其状态为一个数组，数组中每个元素都是一个对象，代表传入的 Promise 对象的执行结果。对象有一个 status 属性，其值为 "fulfilled"，"rejected" 或 "pending" 中的一个，分别表示对应的 Promise 对象已经完成、已经拒绝或者仍未完成。如果状态是 "fulfilled"，则对象还会包含一个 value 属性，它的值是对应的 Promise 对象的返回值。如果状态是 "rejected"，则对象还会包含一个 reason 属性，它的值是对应的 Promise 对象被拒绝的原因。
实现 Promise.allSettled 方法的方式
由于 Promise.allSettled 方法在一些浏览器版本中可能不存在，我们需要自己实现这个方法。简单来说，我们可以使用 Promise.all 方法来实现 Promise.allSettled 方法。Promise.all 方法用于接收一组 Promise 对象，并返回一个新的 Promise 对象。这个新的 Promise 对象在所有传入的 Promise 对象都已经执行完毕时才会被 resolve，其状态为一个数组，数组中每个元素的值就是对应的 Promise 对象的返回值。如果其中任意一个 Promise 对象被拒绝，那么这个新的 Promise 对象会被 reject。我们可以利用这个特性来实现 Promise.allSettled 方法。
具体地说，我们可以对每个传入的 Promise 对象都添加一个 catch 方法，这个方法会将一个被拒绝的 Promise 对象包装成一个带有 status 属性的对象，并返回这个对象。如果一个 Promise 对象被 resolve，我们可以使用 Promise.resolve 方法将它包装成一个带有 status 和 value 属性的对象，并返回这个对象。最后，我们可以使用 Promise.all 方法将这些对象组成的数组作为参数，返回一个新的 Promise 对象。
以下是实现 Promise.allSettled 方法的代码：
function allSettled(promises) {
return Promise.all(
promises.map(p => p.catch(error => ({ status: 'rejected', reason: error })))
.concat(promises.map(p => p.then(value => ({ status: 'fulfilled', value }))))
);
}示例代码
接下来，我们将通过一个示例来演示如何使用我们实现的 allSettled 方法来处理多个 Promise 对象。
假设我们需要获取两个不同的网站的数据，由于不同网站的访问速度可能不同，而我们不关心数据的到达顺序，所以我们可以使用 Promise.allSettled 方法来让程序等待所有异步数据的到达。
我们可以使用 fetch API 来获取数据，并将返回的 Promise 对象传入 allSettled 方法中。以下是示例代码：
-- -------------------- ---- -------
----- -- - ---------------------------------------
----- -- - ---------------------------------------
--------------- ----
------------- -- -
-- ----------- ------- -------
------------------------ ------ -- -
-- -------------- --- ------------ -
-------------- ------- - -- - ------- ------------- --------------
- ---- -
-------------- ------- - -- - ------- ------------ ---------------
-
---
---在以上示例代码中，我们使用了 fetch API 来获取数据，它会返回一个 Promise 对象。我们将这个 Promise 对象传入 allSettled 方法中，然后在 Promise 对象的 then 方法中遍历 allSettled 方法返回的结果数组，得到每个 Promise 对象的执行结果。如果一个 Promise 对象已经完成，我们就输出它的返回值。如果一个 Promise 对象被拒绝，我们就输出它被拒绝的原因。
总结
在本文中，我们介绍了原生 JavaScript 中实现 Promise.allSettled 方法的方式。我们可以使用 Promise.all 方法来实现 Promise.allSettled 方法，并利用 Promise 对象的 resolve 和 reject 特性来判断每个传入的 Promise 对象是否已经完成或者被拒绝。此外，我们还提供了一个示例来演示如何使用我们实现的 allSettled 方法来处理多个 Promise 对象。通过本文的介绍，相信读者已经对 Promise.allSettled 方法有了更深入的了解，并能够在实际开发中使用它来处理多个 Promise 对象。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1c8faf6b2d6eab3d004fd