获取一组 url 并获取数据答案

【问题标题】：fetch an array of urls and get data获取一组 url 并获取数据
【发布时间】：2020-01-27 15:37:19
【问题描述】：

我有一组 url，我正在尝试获取并显示列表中每个特定网站的状态。对反应的最佳方法有什么想法吗？

const URL = [
  {
    name: 'site1',
    url: 'https://something'
  },
  {
    name: 'site2',
    url: 'https://something'
  },
  {
    name: 'site3',
    url: 'https://something'
  }

]

【问题讨论】：

欢迎来到 Stack Overflow！请通读help center，尤其是How do I ask a good question?，你最好的选择是做你的研究，search 以获取有关 SO 的相关主题，然后试一试。如果您在进行更多研究和搜索后遇到困难并且无法摆脱困境，请发布您的尝试minimal reproducible example，并具体说明您遇到困难的地方。人们会很乐意提供帮助。
“我正在尝试获取并显示列表中每个特定网站的状态” 请注意，除非所有这些网站都允许您通过以下方式跨域查询它们CORS（不太可能，但如果您控制它们，则可能），您不能纯粹在客户端执行此操作。您需要向您的服务器发出请求，该服务器可以查询这些站点，然后向您发送响应。更多：SOP.
您好 T.j，感谢您的反馈。在这种情况下，我可以控制它们。

标签： javascript reactjs

【解决方案1】：

请使用 Promises.all。Promise.all() 方法返回一个 Promise，当所有作为 iterable 传递的 Promise 都已解析或 iterable 不包含任何 Promise 时，该 Promise 将解析

 const urls = [{ name: 'site1', url: 'https://something' },
{ name: 'site2', url: 'https://something' },
{ name: 'site3', url: 'https://something' }];

Promise.all(urls.map(item => fetch(item.url)
.then(res => res.json()).catch((ex) => ex)))
.then((values) => console.log(values));

【讨论】：

【解决方案2】：

您只需要使用 map 运算符对列表进行循环，下面是可以帮助您的 stackbliz 示例。 https://stackblitz.com/edit/array-map-bjaytm?file=index.js

【讨论】：

谢谢。我想要这样的东西。但我想检索网页响应对象内部的状态。 {“状态”：“UP”}。这就是我被阻止的地方......
你应该先获取结果，然后再在 UI 上显示