在前端开发中，我们经常需要同时发起多个异步请求并等待它们全部返回后统一处理。这时候，可以使用 ES6 中的 Promise.all() 方法来优雅地实现异步请求并发。本文将详细介绍 Promise.all() 的使用方法，并给出示例代码和实际应用场景。
什么是 Promise.all()？
Promise.all() 是 ES6 中的一个 API，它接受一个 Promise 对象的数组作为参数，返回一个新的 Promise 对象。当所有 Promise 对象都变为 fulfilled 状态时，Promise.all() 返回的 Promise 对象也变为 fulfilled 状态，并且返回一个包含所有 Promise 对象的值的数组。如果其中任何一个 Promise 对象变为 rejected 状态，返回的 Promise 对象也变为 rejected 状态，并且返回的错误信息是第一个被 rejected 的 Promise 对象的错误信息。
在实际应用中，我们可以使用 Promise.all() 来实现多个异步请求的并发执行，等待它们全部返回后再进行处理。
Promise.all() 的使用方法
下面是 Promise.all() 的基本用法：
Promise.all([promise1, promise2, promise3])
.then(values => {
console.log(values);
})
.catch(error => {
console.error(error);
});这里我们传入一个包含三个 Promise 对象的数组，等待它们全部返回后打印它们的值。如果其中任何一个 Promise 对象被 reject，就会在 catch() 内部抛出错误信息。
需要注意的是，Promise.all() 接收的数组中每个元素都必须是 Promise 对象，否则会抛出错误。
示例代码
下面是一个示例，我们需要从三个不同的 URL 中获取数据，等待它们全部返回后按顺序打印它们的结果：
-- -------------------- ---- -------
----- ---- - -
-----------------------------------------------
-----------------------------------------------
----------------------------------------------
--
------------------------ -- ------------
--------------- -- -
------ ---------------------------------- -- ------------------
--
---------- -- -
------------------
--
------------ -- -
---------------------
---这里我们使用了 fetch() 方法来获取数据，并使用 map() 方法将 URL 数组转换为 Promise 对象数组。我们使用两个 Promise.all() 分别等待数据的返回和 JSON 解析，最终将解析后的数据打印出来。
实际应用场景
使用 Promise.all() 可以很方便地实现多个异步请求的并发执行，适用于以下场景：
- 从多个 API 接口获取数据，并将它们整合后一起渲染
- 在用户提交表单时，等待所有异步校验都完成后再进行提交
- 同时发送多个 AJAX 请求，等待它们全部返回后再执行其他操作
在实际开发中，我们经常会使用 Promise.all() 来避免回调地狱和多层嵌套，提高代码的可读性和可维护性。
总结
在本文中，我们介绍了 ES6 中 Promise.all() 的使用方法，并给出了一个示例代码和实际应用场景。使用 Promise.all() 可以让我们轻松实现多个异步请求的并发执行，提高代码的可读性和可维护性。当然，在使用 Promise.all() 时需要注意 Promise 对象的数量和错误处理，以免出现意料之外的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e4320df6b2d6eab3f9149f