在前端开发中，发送多个请求并等到所有请求都完成后再进行下一步操作是一个常见的需求。此时，我们可以运用 ES8 中的 promise.all() 方法来实现这一功能。本文将详细介绍 promise.all() 方法，并详细说明其在并发请求中的应用。
promise.all() 方法简介
promise.all() 是一个能够接收多个 Promise 实例作为参数的静态方法。当这些 Promise 实例都成功地被 resolve 后，promise.all() 方法才会将一个 Promise 实例返回给调用者，并将 Promise 实例成功的结果组成数组作为 resolve 的参数传递给它。否则，只要有一个 Promise 实例被 reject 了，整个 Promise 实例就会被 reject。
promise.all() 方法的语法如下：
---------------------
其中，iterable 是一个数组或类似数组对象，其中每个元素都是一个 Promise 实例。
promise.all() 方法示例
下面通过一个简单的例子来说明 promise.all() 方法的使用。
----- -------- - ------------------------- ----- -------- - ------------------------- ----- -------- - --------------------- ---------------------- --------- ---------- ------------- -- -------------------------- ----- -- -------- ----- -
首先，我们定义了三个 Promise 实例，并将它们分别赋值给变量 promise1、promise2 和 promise3。然后，我们使用 Promise.all() 方法来等待这三个 Promise 实例都成功的被 resolve 后，并将结果合并为一个数组。
由于每个 Promise 实例都成功的被 resolve 了，results 的值为 ['hello', 'world', '!']。最后，我们使用 join() 方法来将数组转换为字符串，并将其打印到控制台上。
promise.all() 方法在并发请求中的应用
我们可以运用 promise.all() 方法来实现并发请求。具体来说，我们可以将多个请求同时发出，并且只有在所有请求都成功的返回后，我们才会将这些请求的响应结果组成一个数组，并提供给下一步操作使用。
下面，我们使用 async/await 来发出三个并发请求。
----- -------- -------------- -
--- -
----- ----------- ---------- ---------- - ----- -------------
-------------------------------------------------------------- -- ------------
-------------------------------------------------------------- -- ------------
-------------------------------------------------------------- -- -----------
---
---------------------------- -- --------- ------
---------------------------- -- -------- ------
---------------------------- -- ------------- -----
- ----- ----- -
-------------------
-
-
---------------上面的代码中，我们使用 fetch() 方法来发出三个并发请求，并使用 then() 方法来解析每个请求的响应结果为 JSON。然后，我们将三个 Promise 实例分别放入数组中，并使用 Promise.all() 方法来发起这三个并发请求。
只有三个请求都成功的返回后，我们才会将这些请求的响应结果解构为一个数组，并使用 console.log() 方法来打印用户的姓名。
需要注意的是，如果有任意一个请求失败的话，上面的整个 async function 函数就会停止，即使发起的其他请求已经成功的返回了响应结果。
总结
本文对 ES8 中的 promise.all() 方法进行了详细的介绍，并给出了在并发请求中使用的示例代码。通过这篇文章的学习，读者可以深入了解 promise.all() 方法的应用场景，并使用它来提高前端开发的效率和代码质量。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64abb27648841e9894783933