随着 Web 技术的不断发展，越来越多的前端应用需要向后端服务器发送并发请求，以提高用户体验和数据处理效率。然而，在传统的 JavaScript 中，实现多个请求同时进行并获取结果的方式往往是通过嵌套回调函数，造成代码可读性差、可维护性差、难以调试等问题。为此，ECMAScript 2015新增了 Promise 对象，提供了一种更好的异步编程方式，使得在 JavaScript 中实现高效的并发请求变得更加简单，其中 Promise.all() 方法更是在 ECMAScript 2019 中进行了进一步的升级和优化。
本文将介绍如何使用 Promise.all() 方法实现高效的并发请求，重点讨论 Promise.all() 的用法、优缺点以及错误处理等问题，最后给出一个实际应用的示例代码，供读者参考学习。
Promise.all() 的基本用法
Promise.all() 方法用于将多个 Promise 对象包装为一个新的 Promise 实例，返回一个新的 Promise 对象。该方法接收一个可迭代的参数，如数组或字符串等，其中每个参数均为 Promise 对象，表示需要并发执行的异步操作。当所有的 Promise 对象都成功 resolved 时，Promise.all() 返回的新的 Promise 对象也会成功 resolved，并在 then() 方法中返回所有结果的数组。如果任意一个 Promise 对象 rejected，Promise.all() 方法返回的新的 Promise 对象也会立即 rejected，并在 catch() 方法中给出错误信息。
例如，我们需要获取两个 URL 的 AJAX 请求结果并将结果合并：
----- -------- - ---------------------------------- ----- -------- - ---------------------------------- ---------------------- ---------- -------------- -- - -- -------- -- ------------ -- - -- ------ ---
在上述示例中，Promise.all() 接收一个包含两个 AJAX 请求 Promise 对象的数组，当两个请求都成功 resolved 时，then() 方法所传递的用来处理结果的回调函数会被调用，回调函数的参数 response 包含了两个请求的结果数组。如果任意一个请求 failed，则 catch() 方法所传递的处理错误的回调函数会被调用，回调函数的参数 error 即为错误信息。
Promise.all() 的优缺点
Promise.all() 方法是 ECMAScript 中用于实现并发请求的一种比较优秀的方法，具有以下优点：
- 代码可读性高：通过将多个 Promise 对象打包为一个新的 Promise 对象，Promise.all() 方法在语义上更加直观，让异步操作的逻辑更加清晰；
- 代码复用性好：在多个请求需要执行的情况下，我们只要编写一个共用的处理结果的回调函数即可，不需要为每个请求都编写相同的回调函数；
- 执行效率高：Promise.all() 方法可以并发执行所有的异步操作，并在所有操作完成后才返回结果数组，从而实现高效的并发请求。
然而，Promise.all() 方法也具有一些缺点，在使用时需要注意：
- 执行顺序不能保证：Promise.all() 方法并不等待所有的 Promise 对象都完成后再按照传入参数的顺序将结果返回，因此不能完全保证操作的执行顺序；
- 任意一个 Promise 对象 rejected 就会 reject：如果在并发请求的过程中，有任何一个 Promise 对象 rejected，则 Promise.all() 方法就会立即返回 rejection 状态的 Promise 对象，并无法知道其它 Promise 对象的执行结果；
- 执行一次性操作过多可能导致内存开销过大：如果需要批量执行一次性操作，那么使用 Promise.all() 方法可能会同时开启过多的异步操作，从而导致内存开销过大，容易造成系统崩溃。
Promise.all() 的错误处理
使用 Promise.all() 方法进行多个异步操作请求时，需要考虑如何合理处理错误。如果并发操作返回的 Promise 对象中任意一个操作 rejected，Promise.all() 方法就会立即 rejected 并返回对应的错误，因此我们需要在 catch() 方法中捕获错误，并对错误进行处理。
通常情况下，我们可以使用 Promise.reject() 方法手动创建一个 rejected 状态的 Promise 对象，并将错误信息传递给其回调函数，如下所示：
---------------------- ----------
-------------- -- -
-- --------
-- ----- -
----- --- ------------ -------- ---- ---------- -------- -------
-
--
------------ -- -
-------------------- -------- -- ----------------
---------------------
------ ----------------------
---在上述示例中，当一旦在处理结果的回调函数中出现错误，则抛出错误信息，并将错误信息包装为一个 rejected 状态的 Promise 对象返回。接下来，在 Promise.all() 所返回的新的 Promise 对象中，我们可以在 catch() 方法中捕获该错误，并打印或处理对应的错误信息。
实例示例：使用 Promise.all() 实现高效的图片批量请求
为了更加深入地理解 Promise.all() 方法的用法和优缺点，我们可以使用该方法实现一个实际场景的应用，比如使用图片资源来说明如何实现高效的并发请求。
在某个场景下，我们需要从后端获取多张图片的 URL，并把它们加载到前端页面中。通常情况下，我们可以使用 AJAX 请求获取每张图片的 URL 并在成功响应时进行加载，但若图片数量较多时就会出现多次异步请求，大大降低了性能。
在这种情况下，我们可以使用 Promise.all() 实现一次性获取多张图片的 URL，从而实现高效的并发请求。代码如下：
--- ------ - ------ -- -- --- --
----- ------------- - -------------- -- ----------
-------------- -- -
-- -------------- -
----- --- -------------- ----- ------ ---- ------ ---------------------
-
------ ---------------- -- - -------- ----- ---- --
--
---------- -- --------------------------
------------ -- -
--------------------- -- ---- ----- ---------
---------------------
------ ----------------------
--
--
--------------------------
---------- -- -
-- -------- ---
------------------- --------- ------
--
------------ -- -
-------------------- ------- ---------
---------------------
---在上述示例中，我们定义了一个图片 URL 数组 urlArr，并通过 ECMAScript 2015 中的 Array.map() 方法生成一个包含 Promsie 对象的数组，其中每个 Promise 对象表示一个图片的 AJAX 请求。然后，我们使用 Promise.all() 方法将所有的图片 AJAX 请求一次性进行并发请求，在所有请求均成功 resolved 时，then() 方法所传递的处理结果的回调函数会被调用，并将所有的图片 URL 返回。如果任意一个 AJAX 请求 failed，则 catch() 方法所传递的处理错误的回调函数会被调用，并抛出对应的错误信息。
值得注意的是，在获取到每个图片的 Response 对象后，我们应该将其转换为 Blob 对象，然后使用 URL.createObjectURL() 方法将其转换为一个普通的 URL，再将该 URL 作为该图片的 URL 加载到页面中。这样做的原因是直接使用 Response 对象的 URL 加载图片，在某些情况下可能会因引用无效或网络连接出错而加载失败。
结论
在 ECMAScript 中，Promise.all() 方法是一种非常优秀的实现并发请求的方法，具有代码可读性高、代码复用性好、执行效率高等特点。本文针对 Promise.all() 方法的用法、优缺点以及错误处理等内容进行了详细的介绍，并分析了其在实际应用中的使用方法。值得注意的是，当批量执行操作的数量过大时，我们应该注意内存开销过大的问题，并尽量避免一次性发起过多的异步操作。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6715c77bad1e889fe218e0a9