JavaScript链接承诺返回从所有承诺返回的所有数据的数组

Question

我有一个场景，需要调用一个"getData"；方法这个"；getData"；方法将调用服务器来获取项，然后对于每个项，我都需要获取子项。"；getData"；方法应返回单个数组中所有子项的单个数组。

例如，我有

• 项目1
  • 孩子A，孩子B，孩子C
• 第2项
  • childD
• 第3项
  • childE，childF

我想得到一个包含的单个数组

[childA, childB, childC, childD, childE, childF]

我尝试了以下代码，但这不太正确。

export function getData() {

return getItems()
.then((items) =>{
var promises = [];

items.forEach((item) => {

promises.push(          
return getChildItems({
item: `${item}`,
})
.then((childItems) => {
return childItems
}),       
);                              
});   
return Promise.all(promises)
.then((allChildItems) => allChildItems);
});
}

这将返回一个数组，其中每个元素都是一个数组。顶级数组的元素数就是项目数。每个子数组都包含与该项的子项数相匹配的元素数。例如，

[ 
[childA, childB, childC], 
[childD], 
[childE, childF]
]

我如何让它返回像这样的单个数组

[childA, childB, childC, childD, childE, childF]

更新：

我找到了一个解决方案，但我不认为它特别优雅。在PromiseAll中，我在顶级项目上循环，它们将子数组连接到一个数组中并返回它，

return Promise.all(promises)
.then((arrayOfChildItemsArrays) => {
let allChildItems = []
arrayOfChildItemsArrays.map((childItemsArray) => {
allChildItems = allChildItems.concat(childItemsArray);
});
return allChildItems;
});

肯定有更好的方法可以做到这一点吗？

Answer 1

您可以通过Array.prototype.flat:展平阵列

return Promise.all(promises).then(allChildItems => allChildItems.flat());

Answer 2

一种解决方案是保留当前代码并对结果调用flat(Infinity)。这会给你一个扁平的阵列。这是一个稍微缩短的版本：

export function getData() {
return getItems()
.then((items) => Promise.all(items.map(item => getChildItems({item: `${item}`))))
.then((childArrays) => {
return childArrays.flat(Infinity);
});
}

我在那里使用了Infinity，但默认值是1，这可能对您的用例来说已经足够好了。

或者，您可以自己循环使用它们(flat相对较新，但也很容易填充(：

export function getData() {
return getItems()
.then((items) => Promise.all(items.map(item => getChildItems({item: `${item}`))))
.then((childArrays) => {
const result = [];
for (const array of childArrays) {
result.push(...array);
}
return result;
});
}