如何从 .map 循环返回以从 API 获取数据 [重复]

Posted 2023-03-07

【中文标题】如何从 .map 循环返回以从 API 获取数据 [重复]

【英文标题】：How to return from a .map looping to fetch data from an aPI [duplicate]

【发布时间】：2021-10-20 15:27:35

【问题描述】：

我正在尝试遍历 URL 数组并在该 URL 的端点获取数据，然后将其作为 JSON 对象存储在数组 (allData) 中。当我运行我的代码并检查 allData 中的内容时，它一直是一个空数组。这告诉我我没有从 .map 正确返回？鉴于数据来自异步函数，我该怎么做。下面是我的代码。谢谢

const allData = urls.map((url)=>
    fetch(url)
        .then(response => response.json())
        .then((data) => return data)
        .catch(err => console.log(err))
)   

【问题讨论】：

您在这里遇到了多个问题，例如在 map 函数中没有返回任何内容，但是已经有针对此问题的解决方案。我已经链接到上面的其中一个，但如果您喜欢更长格式的博客文章，请查看：dev.to/nyagarcia/array-map-async-await-2cif

两者都非常有帮助。谢谢

【参考方案1】：

你需要等待数组中的promise被解析并在.map函数中返回promise

const urls = ['https://mocki.io/v1/d4867d8b-b5d5-4a48-a4ab-79131b5809b8', 'https://mocki.io/v1/d4867d8b-b5d5-4a48-a4ab-79131b5809b8']
const allData = urls.map((url)=>
    return fetch(url)
        .then(response => response.json())
        .then((data) => return data)
        .catch(err => console.log(err))
)   
Promise.all(allData).then(console.log)

【讨论】：

解决了。谢谢

非常乐意提供帮助。确保将问题标记为已解决:)