时间戳

首页 > 解决方案 > 了解 Promise.all 和 Array.map()

javascript - 了解 Promise.all 和 Array.map()

问题描述

我正在从多个 API 检索数据，这些数据将被聚合到一个最终数组中，我打算在其中映射并显示在 UI 中（使用 React）。所以为了更好的背景，我有这种情况。

首先，我从主 API 检索主要数据

const response = await getFirstData() // returns an array

const [secondResult, thirdResult, fourthResult] = await Promise.all([
 response.map(async (item) => await secondApiRequest()),
 response.map(async (item) => await thirdApiRequest()),
 response.map(async (item) => await fourthApiRequest())
])

从上面可以看出，基于response来自主 API 的，然后我映射通过返回的数组从其他 API 获取数据(secondApiRequest(), etc..)。现在我在想secondResult，thirdResult,fourthResult将解析为应有的对象数组。但是当我检查 chrome 浏览器上的日志时，我看到了这个。

0: Promise {<fulfilled>: Array(10)}
1: Promise {<fulfilled>: Array(10)}
2: Promise {<fulfilled>: Array(10)}
3: Promise {<fulfilled>: Array(10)}
4: Promise {<fulfilled>: Array(10)}
5: Promise {<fulfilled>: Array(5)}
6: Promise {<fulfilled>: Array(0)}
7: Promise {<fulfilled>: Array(0)}
8: Promise {<fulfilled>: Array(0)}
9: Promise {<fulfilled>: Array(0)}

我知道这些操作是并行运行的，但是如何让这些操作解析并返回应该包含对象的最终数组。此外，实现这一目标的最有效方法是什么，因为最后finalArray将包含 200 多个对象，我必须在 UI 上显示它们。谢谢，欢迎任何帮助。

标签： javascriptnode.jsarraysasynchronouspromise

解决方案

如果你想并行发出所有请求，你应该返回一个 promise 数组到Promise.all().

映射每个 api 的响应，并使用 等待它的承诺数组，然后使用外部调用Promise.all()等待所有内部调用。Promise.all()

const response = await getFirstData() // returns an array

const [secondResult, thirdResult, fourthResult] = await Promise.all(
  [secondApiRequest, thirdApiRequest, fourthApiRequest]
    .map(api => Promise.all(response.map(api)))
)

推荐阅读