在 Web 前端开发中，我们经常需要处理多个异步操作。ES6 中引入的 Promise 对象为我们处理异步操作提供了方便，而在 ES8 中，Promise.all() 方法更是为处理多个异步操作带来了新的优化。
Promise.all() 方法的作用
Promise.all() 方法接收一个 Promise 对象数组，返回一个新的 Promise 对象。它的作用是在所有 Promise 对象都完成时，才返回一个成功状态（resolve）的 Promise 对象；只要有一个 Promise 对象失败（reject），就会返回一个失败状态（reject）的 Promise 对象。
常规使用
以下示例展示了常规使用 Promise.all() 方法的方式：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- - ------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- - ------------
-- ------
---
---------------------- ----------
------------ -- -
--------------------
--
------------ -- -
-------------------
---在这个例子中，我们创建了两个 Promise 对象，分别为 promise1 和 promise2。在两个 Promise 对象都完成后，Promise.all() 结束并返回一个结果数组结果数组中包含两个 Promise 对象执行后的返回结果。
如何在 Promise.all() 中处理失败的 promises
当我们在使用 Promise.all() 时，遇到某个 Promise 对象失败时，Promise.all() 会返回一个失败的 Promise 对象。为了避免在执行失败后就直接结束整个 Promise.all() 操作，我们可以在每个 Promise 对象中添加 catch() 方法，处理失败的情况。
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
---------------- - ------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------- - ----------
-- ------
---
--------------------------------- -- ------- -------------------- -- --------
------------ -- -
--------------------
--
------------ -- -
-------------------
---在这个例子中，我们为每个 Promise 对象添加一个 catch() 方法，在 Promise 对象失败时返回错误信息。在 Promise.all() 中，我们使用 Promise 对象的 catch() 方法来处理错误。使用 catch() 必须返回一个 Promise 对象，否则 catch() 方法无法正常工作。
Promise.all() 使用示例 - 上传多个文件的时候
在实际的前端开发中，我们经常会遇到上传多个文件的情况。在这种情况下，我们需要在所有 Promise 对象完成后，统计上传完成的文件数和失败的文件数，并返回一个上传结果的数组。
以下是一个示例，上传多个文件时，如何处理 Promise.all() 方法：
-- -------------------- ---- -------
-------- ------------------ -
----- -------- - ---
------------------ -- -
----- -------- - --- -----------
----------------------- ------
----- ------- - ---------------- -
------- -------
----- --------
--
-------------- -- -
-- ------------- -
------ ----------------
- ---- -
----- --- ------------- ----------
-
--
------------ -- -
------ - ----- ---------- ------- ---------- ---- ---------- --
--
------------ -- -
------ - ----- ---------- ------- --------- ------ ------------- --
---
-----------------------
---
------ ----------------------
-
----- ----- - ---------------------------------------------
-------------------------------- ----- -- -
----- ----- - -------------------
----- ------------- - -------------------
------------------------- -- -
--------------------
---
---在这个例子中，我们创建了一个 uploadFiles() 函数，用于处理上传多个文件的操作。该函数使用 fetch() 方法上传每个文件，并在上传成功后返回成功信息，在上传失败后返回失败信息。
在 uploadFiles() 函数中，我们创建了一个 Promise 数组，每当上传一个文件时，就将返回的 Promise 对象添加到该数组中。在所有文件上传完成后，使用 Promise.all() 方法等待所有 Promise 对象完成，并返回上传结果的数组。
在上传失败的情况下，uploadFiles() 函数会返回一个包含“失败”状态的上传结果对象。我们可以在调用 uploadFiles() 的地方使用 then() 方法，取得上传结果数组并进行相应的处理。
总结
在 Web 前端开发中，我们经常需要处理多个异步操作。Promise.all() 方法是处理异步操作的强大工具，能够优化代码和提高性能。
在使用 Promise.all() 时，我们需要处理失败的 Promise 对象并返回一个 Promise 对象，避免在整个 Promise.all() 操作结束后出现错误。
在上传多个文件的情况下，我们可以使用 Promise.all() 方法等待所有文件上传完成，并返回上传结果的数组，为我们处理上传文件提供了极大的便利性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64abfce548841e98947eda78