在现代前端的开发中，异步编程已经是家常便饭。异步编程的涉及范围非常广泛，其中包括了网络请求、DOM 操作、事件监听等等。而在异步编程中，有时我们需要同时执行多个异步任务，并对这些任务都执行完成后再进行一些操作。这个时候，Promise.all() 函数就成为了一种优秀的方案。
什么是 Promise.all()？
Promise.all() 函数是 ES6 中加入的一种异步编程方案。它接收一个 Promise 对象数组作为参数，并返回一个新的 Promise 对象。当传入的所有 Promise 对象都 resolved 后，Promise.all() 返回的 Promise 对象将 resolved，其返回值是所有 Promise 对象的 resolve 值组成的数组。而如果传入的任何一个 Promise 对象被 rejected，那么返回的 Promise 对象会立即 rejected 并传递该 Promise 的 reject 值。
Promise.all() 的使用
Promise.all() 最常见的用法是在同时发起多个网络请求的时候。下面的代码演示了如何使用 Promise.all() 实现同时发起两个网络请求，当两个请求都完成时输出它们的响应结果：
----- --------------- - -----------------------------------
----- --------------- - -----------------------------------
----------------------------- -----------------
------------------------- ------------------ -- -
-- -------
----------------------------- ------------------
--
------------ -- ----------------------另一个场景是在使用 Promise 进行并发地读取多个文件内容的时候。下面的代码演示了如何使用 Promise.all() 并发地读取两个文件的内容并将它们合并：
----- ------------ - --------------------------------
----- ------------ - --------------------------------
-------------------------- --------------
--------------------- -------------- -- -
-- ---------
----- ------------- - ------------ - -------------
---------------------------
--
------------ -- ----------------------注意事项
在使用 Promise.all() 的时候需要注意以下几点：
- Promise.all() 需要传入一个 Promise 对象的数组，因此对于不支持 Promise 的旧浏览器需要使用 polyfill 进行支持。
- 如果传入的 Promise 数组中存在任何一个 Promise 被 rejected，那么 Promise.all() 返回的 Promise 会立即被 rejected，同时传递该 Promise 的 reject 值。因此在使用 Promise.all() 的时候需要明确处理错误情况。
- 如果传入的 Promise 数组中存在任何一个 Promise 返回的值不是 Promise，则 Promise.all() 会将该值视为 resolved，并将其值作为返回的数组中对应位置的值。这在一些情况下可能会导致错误。
- Promise.all() 返回的 Promise 对象的 resolve 值是一个数组，该数组中包括了所有被传入的 Promise 对象的 resolve 值。这个数组中的值的顺序与传入的 Promise 对象数组中的顺序相同。因此在使用 Promise.all() 的时候需要注意处理数组的顺序问题。
结论
Promise.all() 是一种非常有用的方案，它可以帮助我们在并发执行多个异步任务的时候更加高效地处理数据。了解 Promise.all() 搭配真实的工程实践，将会让我们在开发过程中更加得心应手。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670ba4f666ef9cf37faaca8f