在现代 Web 应用中，异步请求非常常见，而每个请求都有各自的回调函数用于处理结果。然而，如果我们需要并行发起多个请求，并统一处理它们的结果，那将会是一个困难的问题。
ES6 中引入了 Promise，通过它我们可以轻松地处理异步请求。在本文中，我们将详细介绍如何使用 ES6 Promise.all() 方法来处理多个异步请求的结果。
Promise 概述
在开始之前，我们需要对 Promise 有一个基本的了解。Promise 定义了一种异步编程方式，让我们可以像同步编程一样处理异步代码。
Promise 对象有三种状态：未完成（pending）、已完成（fulfilled）和已拒绝（rejected）。当 Promise 对象被创建的时候，它的状态为 pending。如果 Promise 对象成功地完成了操作，那么它的状态将变为 fulfilled，并执行 then() 方法注册的回调函数。如果 Promise 对象在处理操作的过程中出现了错误，那么它的状态将变为 rejected，并执行 catch() 方法注册的回调函数。
以下是一个使用 Promise 的示例：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - -- --------- -- ----------- --------- --- -- ------------- -------- --- --- ------------------- -- - -- -- ------- --------- -------------- -- - -- -- ------- --------- ---
Promise.all() 方法
Promise.all() 方法接收一个 Promise 对象数组作为参数，并且会在所有 Promise 对象都返回成功结果时返回一个新的 Promise 对象，该对象的结果将是一个包含所有 Promise 对象结果的数组。
以下是 Promise.all() 方法的语法：
Promise.all(iterable);
- iterable：一个可迭代对象，比如 Array。
下面是 Promise.all() 方法的示例代码：
-- -------------------- ---- ------- ----- -------- - - ------------------------ ---- ------------------------ ---- ------------------------ --- -- --------------------- ------------- -- --------------------- ------------ -- --------------------
在以上示例代码中，我们创建了一个包含三个 Promise 对象的数组，并将这个数组作为参数传递给 Promise.all() 方法。Promise.all() 方法返回一个新的 Promise 对象，在这个对象成功完成时，它的结果将是一个包含所有 Promise 对象结果的数组。
示例：处理多个异步请求结果
现在我们将演示如何使用 Promise.all() 方法来处理多个异步请求结果的示例。
假设我们需要从服务器端获取两个 JSON 数据，然后将这些数据取出并处理。我们可以使用 fetch API 来异步获取这些数据，并使用 Promise.all() 方法等待它们都返回结果。
以下是使用 ES6 Promise.all() 方法处理多个异步请求的示例代码：
-- -------------------- ---- -------
----- ---- - -
-----------------------------------------------
----------------------------------------------
--
------------------------ -- ------------------------ -- ------------------
-------------- ------ -- -
--------------------- -------
-------------------- ------
--
------------ -- --------------------在以上示例代码中，我们创建了一个包含两个 URL 的数组。我们使用 map() 方法迭代这个数组，对每个 URL 创建一个 fetch() 函数，返回一个 Promise 对象来获取 JSON 格式的数据。其中的 then() 方法将返回一个解析后的 JSON 数据。
我们将获取所有 JSON 数据的 Promise 对象数组传递给了 Promise.all() 方法，使用数组解构语法对请求得到的数据进行了解构。最后打印了这两个返回的 JSON 数据。
总结
在本文中，我们介绍了如何使用 ES6 Promise.all() 方法处理多个异步请求的结果。使用 Promise.all() 方法可以让我们更方便地并行发起多个请求，并且不需要等待一个请求完成后再发起另一个请求。同时还可以将所有请求的结果用一个回调函数来统一处理。这样可以提高 API 请求的效率，减小响应时间。
代码示例请查看：https://codepen.io/pen/?&editable=true&editors=001001
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aa68a048841e9894690dff