在前端开发中，异步请求是非常常见的一种场景。而处理多个异步请求，使它们都完成后再执行下一步操作，则需要使用 Promise。本文将详细讲解 Promise 处理多个异步请求的同时完成，并提供示例代码作为指导。
初步认识 Promise
Promise 是一种异步编程的解决方案，它是对异步操作的结果进行封装，使得可以以同步的方式来处理异步操作。Promise 对象可以理解为一个容器，里面存放着异步操作的结果，状态一般有三种：pending（等待状态）、fulfilled（成功状态）和 rejected（失败状态）。
Promise 可以配合 .then() 方法和 .catch() 方法使用。.then() 方法用于在 Promise 成功后执行，.catch() 方法用于在 Promise 失败后执行，其语法如下：
promise.then(onFulfilled, onRejected)
其中 onFulfilled 和 onRejected 都是回调函数，分别用于在 Promise 成功和失败时被调用。
Promise 处理多个异步请求的同时完成
在实际项目中，我们可能需要同时处理多个异步请求，并保证它们都完成后再执行下一步操作。此时我们可以使用 Promise 的 Promise.all() 方法。
Promise.all() 方法用于接收一个 Promise 数组，并返回一个新的 Promise 对象。当所有 Promise 对象都变为成功状态时，新的 Promise 对象才会变为成功状态；当其中一个 Promise 对象变为失败状态时，新的 Promise 对象就会变为失败状态。例如：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
--------------------- -
----------------- ----------
-- -----
--
----- -------- - --- ----------------- ------- -- -
--------------------- -
----------------- ----------
-- -----
--
---------------------- ------------------------- -- -
--------------------
--上面的代码中，promise1 和 promise2 都是异步操作，并分别在 1s 和 2s 后返回结果。我们使用 Promise.all() 方法传入这两个 Promise 对象，并在 then() 方法中获取它们的结果。当这两个 Promise 对象都完成后，结果数组 results 中就会包含 promise1 finished 和 promise2 finished 两个字符串。
如果其中一个 Promise 对象变为失败状态，例如：
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
--------------------- -
----------------- ----------
-- -----
--
----- -------- - --- ----------------- ------- -- -
--------------------- -
---------------- --------
-- -----
--
---------------------- ------------------------- -- -
--------------------
----------------- -- -
-------------------
--上面的代码中，promise1 和 promise2 依然是异步操作，promise2 的结果会变为失败状态。因此新的 Promise 对象也会变为失败状态，此时 catch() 方法会输出 promise2 failed 字符串。
Promise 处理多个异步请求的同时完成实战示例
下面我们通过一个具体的实战示例演示如何使用 Promise 来处理多个异步请求。
我们打算从一个 API 获取三个数据：用户的个人信息、用户关注的列表、用户的发帖记录。因为这三个信息是互相独立的，所以我们可以使用 Promise 来同时发起三个异步请求，然后在它们全部完成后进行下一步操作。代码如下：
-- -------------------- ---- -------
----- ----------- - -- -- -
------ --- --------------- -- -
------------- -- -
------------- ------
-- -----
--
-
----- ------------- - -- -- -
------ --- --------------- -- -
------------- -- -
--------------- ------
-- -----
--
-
----- ----------- - -- -- -
------ --- --------------- -- -
------------- -- -
------------- ------
-- -----
--
-
--------------------------- ---------------- --------------------------- -- -
-------------------
------------ -- -
----------------
--上面的代码中，我们分别定义了三个 Promise 对象，分别表示获取用户信息、获取用户关注列表和获取用户发帖记录。每个 Promise 对象都包含了一个异步操作，分别在 1s、2s 和 1.5s 后返回相应的结果。
最后我们使用 Promise.all() 方法将这三个 Promise 对象组成的数组传入，并在 then() 方法中获取它们的结果。当这三个 Promise 对象全部完成后，结果数组 result 中就会包含 USER INFO、FOLLOW LIST 和 POST LIST 三个字符串。
总结
本文从初步认识 Promise 开始，详细介绍了 Promise 处理多个异步请求的同时完成这个应用场景。我们讲解了 Promise.all() 方法的使用，还通过一个实战示例演示了如何使用 Promise 同时处理多个异步请求，以及在它们全部完成后进行下一步操作。希望本文对读者对学习和掌握 Promise 处理多个异步请求的同时完成有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64efdd33f6b2d6eab39ca58c