Promise 是 JavaScript 中处理异步操作的一种方式，它可以让我们更加优雅地处理回调地狱问题。在实际的开发中，我们经常需要处理多个 Promise，这时候就需要用到 Promise 的一些高级技巧。
本文将介绍如何在一个异步任务中交替处理多个 Promise，以及如何处理这些 Promise 的返回值。希望本文能够对前端开发者们有所帮助。
Promise 的基础知识
在介绍 Promise 如何交替处理多个 Promise 之前，我们先来回顾一下 Promise 的基础知识。
Promise 有三种状态：Pending（进行中）、Fulfilled（已成功）、Rejected（已失败）。当 Promise 执行完成后，它会处于 Fulfilled 或 Rejected 状态。
Promise 的基本用法如下：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - -- ---- -- -------- ------------------ -- -------- ----------------- --- --------------------- -- - -- ------- ----------------- -- - -- ------- ---
Promise.all()
Promise.all() 可以将多个 Promise 同时执行，并且当所有 Promise 都完成时，才会执行回调函数。
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
---------------------- ------------------------- -- -
--------------------- -- ------------ -----------
---Promise.race()
Promise.race() 可以将多个 Promise 同时执行，并且当有一个 Promise 完成时，就会执行回调函数。
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----------------------- ------------------------ -- -
-------------------- -- ----------
---Promise 的交替处理
有时候，我们需要在一个异步任务中交替处理多个 Promise。比如，我们需要从服务器获取用户的信息和订单信息，然后根据这些信息生成一个页面。
-- -------------------- ---- -------
----- ----------- - -- -- -
------ --- ----------------- ------- -- -
------------- -- -
---------
----- -----
---- ---
---
-- ------
---
--
----- ------------ - -- -- -
------ --- ----------------- ------- -- -
------------- -- -
---------
--- ---------
------ ----
---
-- ------
---
--
----- ------------ - ---------- ---------- -- -
-----------------------------------
----------------------------------
-----------------------------------
---------------------------------------
--
----- ---- - -- -- -
----------------------------- -- -
------------------------------- -- -
---------------------- -----------
---
---
--
-------上面的代码中，我们先获取了用户的信息，然后再获取订单的信息，最后将这些信息传给 generatePage() 函数生成页面。这种方式虽然可以实现功能，但是代码看起来不太优雅。
我们可以使用 Promise 的 then() 方法，将多个 Promise 连接起来，实现交替处理。
-- -------------------- ---- -------
----- ---- - -- -- -
----------------------------- -- -
------ ------------------------------- -- -
------ ---------- -----------
---
----------------- -- -
------------------------ ------------
---
--
-------上面的代码中，我们先获取用户的信息，然后在 then() 方法中获取订单的信息，并将这两个 Promise 的返回值封装成一个数组，最后将这个数组传给 generatePage() 函数生成页面。
Promise 的返回值处理
在实际的开发中，我们经常需要对 Promise 的返回值进行处理。比如，我们需要将多个 Promise 的返回值合并成一个数组或对象。
-- -------------------- ---- -------
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
---------------------- ------------------------- -- -
--------------------- -- ------------ -----------
----- --- - ---
------------------------ ------ -- -
------------------- - ---- - -------
---
----------------- -- - --------- ----------- --------- ---------- -
---上面的代码中，我们使用 Promise.all() 将多个 Promise 同时执行，并将它们的返回值封装成一个数组。然后，我们使用 forEach() 方法将这个数组转换成一个对象。
总结
本文介绍了 Promise 如何在一个异步任务中交替处理多个 Promise，以及如何处理这些 Promise 的返回值。通过学习本文，我们可以更加优雅地处理多个异步操作，从而提高代码的可读性和可维护性。
代码示例：https://codepen.io/pen/GRjQyWQ
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/656d3e69d2f5e1655d58cccd