简介
Promise.all 是 Promise 对象的一个方法，用来将多个 Promise 实例包装成一个新的 Promise 实例。它接收一个数组作为参数，数组中的每个元素都是一个 Promise 实例，返回的新 Promise 实例的状态全部基于传入的所有 Promise 实例的状态。
在实际开发中，我们经常需要在多个异步任务都完成后再处理下一步操作。Promise.all 提供了一种方便的方式，可以让我们更加高效地完成这种任务。
本文将介绍 Promise.all 的具体实现方式，并附上示例代码。
实现
首先，我们需要明确 Promise.all 的实现逻辑。它的实现思路如下：
- 参数是一个数组，数组的每个元素都是一个
Promise实例； - 返回一个新的
Promise实例； - 如果数组中的所有
Promise实例都完成了，返回的Promise实例状态为fulfilled，并将每个Promise实例的结果传入新的Promise实例的then方法中； - 如果数组中的任意一个
Promise实例被拒绝了，返回的Promise实例状态为rejected，并将第一个被拒绝的Promise实例的错误原因传入新的Promise实例的catch方法中。
接下来，我们来实现这个思路。
-- -------------------- ---- -------
-------- ---------------------- -
------ --- ----------------- ------- -- -
--- ------- - --- ----------------------- -- -------------------
--- ----- - -- -- ---------------
--- ---- - - -- - - ---------------- ---- -
-----------
-------------- -- -
---------- - -------
--------
-- ------ --- ---------------- -
-----------------
-
--
---------------
-
---
-我们定义了一个 myPromiseAll 函数，它接收一个 Promise 实例数组作为参数，并返回一个新的 Promise 实例。
我们定义了一个名为 results 的结果数组，长度与传入的数组一致。我们同时定义了一个计数器 count，用于记录已经完成任务的数量。
我们循环遍历传入的 Promise 实例数组，对每个 Promise 实例注册 then 方法和 catch 方法。我们使用 then 方法处理 Promise 实例的处理结果，如果 Promise 实例的状态是 fulfilled，则将结果存入 results 数组，并通过 count 计数器判断是否所有任务都完成了，如果完成了，则调用 resolve 方法，将结果数组传入。
如果 Promise 实例的状态是 rejected，则直接调用 reject 方法返回错误原因。
示例代码
下面，我们给出两个示例代码，一个成功的例子，一个失败的例子。
成功的例子
-- -------------------- ---- ------- --- -------- - ------------------------- --- -------- - --- --- -------- - --- ----------------- ------- -- - ------------------- ---- --------- --- ----------------------- --------- ------------------------- -- - --------------------- -- --------- --- -------- ---
在这个例子中，我们传入了三个参数：一个已经 resolve 的 Promise 实例，一个普通的值和一个异步任务返回一个结果的 Promise 实例。我们可以看到，myPromiseAll 返回的结果数组包含了每个 Promise 实例的处理结果。
失败的例子
-- -------------------- ---- ------- --- -------- - ------------------------- --- -------- - --- --- -------- - --- ----------------- ------- -- - ------------------ ---- --------- --- ----------------------- --------- ------------------------ -- - ------------------- -- ----- ---
在这个例子中，我们传入了三个参数，其中第三个 Promise 实例会在 100 毫秒后返回一个错误原因。我们可以看到，myPromiseAll 返回的 Promise 实例被拒绝了，并且捕获了第一个被拒绝的 Promise 实例的错误原因。
总结
在本文中，我们介绍了 Promise.all 的实现方式，以及如何手动实现一个 Promise.all 方法。我们从实现思路、示例代码等多个方面详细地讲解了这个方法，并说明了它在实际开发中的应用场景。希望读者能够通过本文，掌握 Promise.all 的相关知识，提高自己的前端开发水平。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c2760a83d39b48816736c1