在前端开发中，经常会遇到需要等待异步操作完成后才能继续执行的情况，如请求数据、读取文件等。在 ES2021 中，引入了新的异步等待函数 Promise.allSettled()，可以方便地等待多个异步操作完成后再执行下一步操作。本文将介绍如何使用 Promise.allSettled() 实现一种实用的异步等待函数，并提供示例代码。
Promise.allSettled() 的用法
Promise.allSettled() 是 ES2021 新引入的异步等待函数，它接收一个 Promise 数组作为参数，返回一个 Promise 对象。该 Promise 对象在所有 Promise 对象都完成后才会被 resolved。不同于 Promise.all()，即使其中某个 Promise 对象被 rejected，Promise.allSettled() 仍然会等待其它 Promise 对象完成后再执行。
Promise.allSettled() 返回的 Promise 对象的值是一个对象数组，数组中的每个对象都表示一个 Promise 对象。每个对象都有一个 status 属性，表示 Promise 对象的状态，可能的值为 "fulfilled" 或 "rejected"；还有一个 value 或 reason 属性，分别表示 Promise 对象的返回值或错误原因。
下面是一个示例，演示了如何使用 Promise.allSettled() 等待多个 Promise 对象完成：
----- -------- - -
------------------------ ----
------------------ -------------- - ---------
------------------------ ---
--
----------------------------
------------- -- -
---------------------- -- -
-- -------------- --- ------------ -
-------------------- ------------ --------------
- ---- -
-------------------- ----------- ---------------
-
---
---上述示例中，Promise.allSettled() 接收一个包含三个 Promise 对象的数组，其中第二个 Promise 对象被 reject。在 then() 方法中，我们可以遍历结果数组，判断每个 Promise 对象的状态和值。
实现一个异步等待函数
基于 Promise.allSettled() 的特性，我们可以实现一个实用的异步等待函数，用于等待多个异步操作完成后再执行下一步操作。下面是一个示例实现：
----- -------- ----------------- - ----- ------- - ----- ----------------------------- ----- --------- - --------------------- -- ------------- --- ------------- ----- -------- - --------------------- -- ------------- --- ------------ ------ - ---------- -------- -- -
上述代码中，我们定义了一个名为 waitAll() 的异步函数，它接收一个 Promise 数组作为参数。在函数内部，我们使用 Promise.allSettled() 等待所有 Promise 对象完成，并将结果存入 results 数组中。然后，我们使用 filter() 方法分别筛选出已完成和已拒绝的 Promise 对象，并将它们存入 fulfilled 和 rejected 数组中。最后，我们返回一个对象，包含 fulfilled 和 rejected 两个数组。
使用该函数的示例如下：
----- -------- - -
------------------------------------------------------
------------------------------------------------------
-----------------------------------------------------
--
-----------------
-------- ---------- -------- -- -- -
------------------------- -----------
------------------------ ----------
---上述示例中，我们使用 fetch() 方法获取三个 JSON 数据，并将它们存入一个 Promise 数组中。然后，我们调用 waitAll() 函数等待所有 Promise 对象完成，并在 then() 方法中打印已完成和已拒绝的 Promise 对象。
总结
本文介绍了 ES2021 中新引入的异步等待函数 Promise.allSettled() 的用法，并提供了一个示例实现一个实用的异步等待函数。使用该函数可以方便地等待多个异步操作完成后再执行下一步操作，提高了前端开发的效率和可靠性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/658ce0d2eb4cecbf2d2b5e72