在前端开发中，我们经常需要处理异步操作。Promises是一种在处理异步操作时非常流行的方式。当我们需要同时处理多个异步操作时，就需要使用Promise.all()方法。
Promise.all()
Promise.all()可以接受一个由Promise对象组成的数组，并且返回一个新的Promise对象。这个Promise对象会在所有Promise对象都完成时被resolved，或者在其中任何一个Promise对象reject时被reject。另外，Promise.all()返回的Promise的resolved值是一个由所有Promise对象resolved值组成的数组。
下面是一个简单的例子：
const promises = [Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)];
Promise.all(promises)
.then(values => {
console.log(values); // [1, 2, 3]
});Promise.all()的应用
并发请求
在使用Ajax进行网络请求时，我们可能需要同时请求多个资源。使用Promise.all()可以方便的处理并发请求，并且等待所有请求完成后，一起处理其结果。
-- -------------------- ---- -------
----- ---- - -
------------------------------------
------------------------------------
-----------------------------------
--
----- -------- - ------------ -- ------------
---------------------
--------------- -- -
--- ---- -------- -- ---------- -
----------------------------- ---------------------
-
------ ----------
--
--------------- -- --------------------------- -- -----------
---------- -- ------------------
------------ -- --------------------上述代码首先使用了map()方法获取了一个请求的数组requests。然后使用Promise.all()等待所有的请求完成，并且在完成所有请求后，使用map()方法再次处理每一个响应对象。最后使用另一个Promise.all()方法处理所有响应体，并打印结果。
异步轮询
另一个使用Promise.all()的场景是异步轮询。我们需要在一定时间间隔内进行一系列异步操作，比如从后端不断获取数据。
-- -------------------- ---- -------
-------- ----------- -
------ ------------------------------------------
-------------- -- ----------------
-
-------- -------------- --------- -
----- -------- - ------------ ------- -------- - -------- -- -- -- -------------
--------------------- ---- -- -
------ --------------- -- ----------------- ---------
------------- -------- -- -
-------------------------- --------
------ -----
---
-- -----------------------
-
--------- ------上述代码中，我们定义了一个fetchData()函数来获取数据。然后使用Array.from()方法创建了一个requests数组，长度为duration/interval，即总时间间隔除以轮询间隔。我们使用reduce()方法在每一次请求后等待interval时间，然后再次请求，循环执行duration/interval次。
Promise.all()注意事项
Promise.all()中一个Promise对象被reject时会终止全部的请求
在使用Promise.all()方法时，其中任何一个Promise对象reject都会导致全部的请求被终止。之后，只会处理已经完成的Promise对象。因此，开发人员应该在编写代码时注意到这一点。
-- -------------------- ---- -------
----- -------- - -
-------------------
------------------ ----------------
------------------
--
---------------------
------------ -- -
--------------------
--
------------ -- -
-------------------
---上述代码中，第二个Promise对象被reject，返回了一个错误。另外两个Promise对象已经被resolved，但结果不会被处理。
Promise.all()中空数组返回一个resolved状态的Promise
当Promise.all()方法接受到一个空数组时，它不需要等待任何Promise对象，会立即返回一个resolved状态的Promise。
Promise.all([])
.then(values => {
console.log(values);
});上述代码中，Promise.all()接受到一个空数组，因此立即返回一个resolved状态的Promise，数组为[]。
总结
使用Promise.all()方法，我们可以很容易地处理多个异步操作，并等待它们全部完成。这对于并发请求或异步轮询等场景非常有用。在考虑使用Promise.all()时，需要考虑到其中任何一个Promise对象被reject会终止全部请求，以及如果传入空数组会立即返回一个resolved状态的Promise。希望这篇文章有助于你更好地理解Promise.all()。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64575c72968c7c53b0a18930