在前端开发中，经常需要同时请求多个接口或者同时处理多个任务。而 Promise 是一种非常常用的异步编程方式，可以方便地处理这种情况。本文将详细介绍 Promise 中多个请求同时触发时的处理方法。
问题
假设现在有多个异步请求，需要同时触发。例如，我们需要请求三个不同接口的数据，然后对这三个接口的数据进行合并和处理。对于这种情况，我们应该如何处理？
解决方案
Promise.all
Promise 提供了一个 all 方法，在多个异步操作并行执行后，将所有的操作结果放在一个数组中返回。这个方法接收一个 Promise 实例数组作为参数，如下所示：
---------------- --- ----
------------- -- -
-- ------- ---- ------- -------
--
------------ -- -
-- ----
---下面我们通过一个示例来看看 Promise.all 是如何处理上述场景的：
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------- ----- ------- ---
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------- ---- -- ---
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------- ------- -------- ---
-- ------
---
---------------------- --------- ----------------------- -- -
----- --------- -------- -------- - --------
----- ---- - - ----------- ----------- ---------- --
------------------ -- - ----- -------- ---- --- ------- -------- -
---在这个示例中，我们分别创建了三个 Promise 实例，分别表示三个接口的数据请求。然后使用 Promise.all 将它们组合起来，并在得到三个接口的数据之后，合并它们并打印到控制台中。
Promise.race
除了 all 方法以外，Promise 还提供了 race 方法。这个方法同样接收一个 Promise 实例数组作为参数，但是当其中任意一个 Promise 实例完成时，就会返回这个 Promise 实例的结果。例如：
--- -- - --- ----------------- ------- -- -
------------- -- -
--------------
-- ------
---
--- -- - --- ----------------- ------- -- -
------------- -- -
--------------
-- ------
---
----------------- ---------------- -- -
-------------------- -- ----
---这个示例中，我们创建了两个 Promise 实例，分别在 1 秒和 2 秒后完成。使用 Promise.race 方法，最终结果将是 p1 的结果。
async 和 await
除了 Promise 的 all 和 race 方法以外，我们还可以使用 async 和 await 来简化异步操作。
通过在函数前添加 async 关键字，我们声明了这是一个异步函数。在异步函数中，我们最好采用 try-catch 语句来捕获异常，避免程序崩溃。
await 关键字可以把异步操作变成同步的写法，使得代码更容易阅读和维护。例如：
----- -------- --------- -
--- -
----- ------- - ----- -------------------
----- ------- - ----- -------------------
----- ------- - ----- -------------------
----- ----- - ----- ---------------
----- ----- - ----- ---------------
----- ----- - ----- ---------------
----- ---- - - --------- --------- -------- --
------ -----
- ----- ------- -
-- ----
-
-
------------------- -- -
------------------ -- --------
---在这个示例中，我们声明了一个名为 getUser 的异步函数，在这个函数中，我们使用 await 关键字来阻塞代码，直到得到一个正确的返回结果。之后，我们把得到的三个 JSON 数据合并为一个 user 对象，并返回结果。
总结
本文讨论了 Promise 中多个请求同时触发时的处理方法，介绍了 Promise 的 all 和 race 方法，以及使用 async 和 await 简化异步操作的方法。在使用 Promise 时，我们要注意动态处理 Promise 数组，避免因 Promise 数组长度变化而引起的错误。同时，我们也要注意 catch 中的错误处理，避免因异步操作出错导致程序崩溃。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65a475ccadd4f0e0ffcbc833