前言
在 JavaScript 中处理异步操作是一项非常核心的技术，Promise 就是其中的重要概念之一。Promise.all() 查询一组异步任务的结果，它能够将这组异步操作作为一个并行的请求处理，最终返回所有的结果。而 ES12 中新增的 Promise.allSettled() 则是查询这些异步任务的结果，并且不会在其中任何一个 Promise 被 rejected 的时候停止执行，它会等到所有 Promise 完成之后才会返回结果。
本篇文章将详细介绍如何手写 Promise.allSettled() 方法的实现流程以及注意事项，帮助大家更好地理解 Promise 的使用方法。
实现 Promise.allSettled() 方法
1. 实现基本思路
首先，需要重新实现 Promise.all() 方法，并将其命名为 PromiseAllSettled。这个函数需要接收一个 Promise 数组，PromiseAllSettled 函数的实现流程参考如下：
- 创建一个新的 Promise 对象；
- 判断传入的 Promise 数组长度是否为 0，如果为 0 则直接返回一个 resolved 状态的 Promise 对象；
- 定义一个变量 results 用于存储所有 Promise 的结果；
- 定义一个变量 counter 用于记录完成的 Promise 的数量；
- 循环遍历所有的 Promise，记录它们的状态和结果；
- 所有 Promise 都执行完后，返回 results。
2. 代码实现
-- -------------------- ---- -------
----------------------------------- - -------- ---------- -
------ --- ----------------- -- -
-- ---------------- --- -- -
------ ------------
-
----- ------- - ---
--- ------- - --
----- ------------ - -- -- -
----------
-- -------- --- ---------------- -
------ -----------------
-
--
-------------------------- ------ -- -
------------------------------
------- -- -
-------------- - - ------- ------------ ----- --
---------------
--
-------- -- -
-------------- - - ------- ----------- ------ --
---------------
-
--
---
---
--3. 测试代码
接下来，我们需要编写一个测试用例来测试 PromiseAllSettled 的实现是否正确。测试代码参考如下：
-- -------------------- ---- -------
----- -------- - -
-------------------
------------------ ------------ -----
-------------------
------------------ ------------ -----
--
---------------------------------------------------
--------- -- -
----------------------- ---------
--
------- -- -
----------------------- -------
-
--4. 结果分析
在测试代码中，我们定义了一个包含 4 个 Promise 的数组，其中 2 个 Promise 被 reject 了。当我们运行测试代码时，会返回以下结果：
results: [
{ status: 'fulfilled', value: 1 },
{ status: 'rejected', reason: Error: error 1 },
{ status: 'fulfilled', value: 3 },
{ status: 'rejected', reason: Error: error 2 }
]测试结果表明，PromiseAllSettled 方法的实现是正确的。
注意事项
- 不能立即返回一个 rejected 状态的 Promise，必须等到所有 Promise 都执行完毕。
- 在 forEach 循环中不能使用 async/await，因为这会阻止 Promise 执行完毕，无法得到正确的结果。
- 需要注意 Promise 嵌套的情况，不能被封装在另一个 Promise 中。
总结
本文详细介绍了 ES12 中手写 Promise.allSettled 方法的实现流程以及注意事项，希望对大家掌握 Promise 的用法有所帮助。通过对 Promise 实现方法的深入学习和理解，不仅可以提升编程技能，还可以编写出更高效、健壮、易于维护的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa461448841e989466b227