Promise.all() 是一个非常常用的 Promise 方法，它可以同时处理多个 Promise 对象，等待它们全部完成后再执行后续逻辑。但是在实际开发中，我们可能会遇到这样的场景：在一组 Promise 中，其中一个 Promise 的返回值需要作为另外一个 Promise 的参数，该如何处理呢？
问题分析
假设我们有三个异步请求，分别是请求用户信息、请求用户的文章列表和请求文章详情。我们需要在获取到用户信息后，再去请求文章列表，然后再根据文章列表中每篇文章的 id 去获取文章详情。这三个请求的返回值都是 Promise 对象。
首先，我们可以使用 Promise.all() 方法来处理这三个请求：
------------- ------------ ---------------- --------------------- --------------- --------- --------------- -- - -- ---- ---
但是这样做并不能满足我们的需求，因为我们需要在获取到用户信息后再去请求文章列表，而 Promise.all() 方法是一开始就会同时执行所有的 Promise 对象，我们并不能保证获取到用户信息后再去请求文章列表。
那么我们该如何处理呢？
解决方案
我们可以将 Promise.all() 方法替换成 Promise.allSettled() 方法，该方法会同时执行所有的 Promise 对象，但是会等待所有的 Promise 对象都 settle（即变成 fulfilled 或 rejected 状态）后再执行后续逻辑。这样我们就可以保证获取到用户信息后再去请求文章列表了。
-------------------- ------------ ---------------- --------------------- --------------------- --------------- --------------------- -- - ----- ---- - ----------------- ----- -------- - --------------------- ----- ------------- - -------------------------- -- ---- ---
但是我们还没有解决其中一个 Promise 的返回值需要作为另外一个 Promise 的参数的问题。我们可以使用 Promise 的 then() 方法来处理这个问题。
首先，我们可以在获取到用户信息后，使用 then() 方法来处理请求文章列表：
----------------------- -- -
-------------------------------------- -- -
-- ----
---
---但是这样做会出现回调地狱的问题，代码可读性和可维护性都很差。我们可以使用 Promise 的链式调用来解决这个问题。
-----------
------------ -- -----------------------
---------------- -- -
-- ----
---这样做就可以将两个异步请求串联起来了。如果我们需要再获取到文章列表后再去请求文章详情，也可以使用同样的方式来处理。
-----------
------------ -- -----------------------
---------------- --
------------
---------------------- -- -------------------------------
-
-
---------------------- -- -
-- ----
---在这段代码中，我们首先获取到文章列表后，使用 map() 方法将每篇文章的 id 转换成 Promise 对象，然后使用 Promise.all() 方法来等待所有的 Promise 对象都 settle 后再执行后续逻辑。
总结
在实际开发中，我们经常会遇到需要处理多个异步请求的场景，Promise.all() 是一个非常常用的方法。但是在处理其中一个 Promise 的返回值需要作为其他 Promise 的参数的情况下，我们需要使用 Promise 的链式调用来解决问题。同时，我们还需要注意 Promise.all() 和 Promise.allSettled() 方法的区别，选择合适的方法来处理异步请求。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f012152b3ccec22f941519