如何通过嵌套 fetch 调用访问嵌套数据？答案

【问题标题】：how to access nested data by nesting fetch calls?如何通过嵌套 fetch 调用访问嵌套数据？
【发布时间】：2017-10-13 18:25:12
【问题描述】：

我无法理解解决此问题的最佳方法。

我的目标是显示嵌套数据。

我在这个 url 上使用 fetch - https://horizons-json-cors.s3.amazonaws.com/products.json

这将我带到一个包含 json 的页面。 json里面是3个url。每个 url 都包含我需要访问的数据。

到目前为止，我已经访问了第一层，现在有了一个项目 url 数组。我想我不明白如何在外部 fetch 调用中获取数据。

到目前为止，这是我的代码（结果是一个 url 数组，其中每个 url 都包含我需要的数据。）：

componentDidMount() {
    console.log('Fetch');
    fetch("https://horizons-json-cors.s3.amazonaws.com/products.json")
    .then((resp) => (resp.json()))
    .then((json) => {
      var productUrlArr = [];
      for (var i = 0; i < json.length; i++) {
        productUrlArr.push(json[i].url);
      }
    .catch((err) => {
      console.log('error', err);
    });
  }

如果你们能帮助我并真正了解如何访问下一级数据，我将非常非常感激。

【问题讨论】：

你能把API调用的响应放在下面吗？
这是您拥有的 API 吗？如果是这样，我觉得您应该更改 API，以便您真正返回产品的数据，而不是指向另一个 json 文件的链接。否则，这将非常低效，因为您必须获取第一个 JSON 文件，然后遍历每个元素，然后对每个项目进行 additional 调用。
这不是我拥有的 API。这是我学校的一个练习，应该教我们如何使用嵌套数据。我意识到它效率低下，但我仍然必须学习如何使用它。我的问题是弄清楚如何在外部 fetch 调用中迭代和调用每个项目/ url
好的，但是它会返回响应吗？您可以使用console.log 打印您的回复并发布。
是的@MateoGuzmán。它返回一个对象数组的响应。每个对象都是单个值 - 'url' 的键对和如上所述的单个 url。我的问题是我不清楚如何遍历这些 url 并对每个 url 调用 fetch。

标签： json react-native nested fetch

【解决方案1】：

您也可以通过这种方式获取内部 URL 的数据，

// 1. Outer Fetch call initiated here
fetch("https://horizons-json-cors.s3.amazonaws.com/products.json")
 .then(res => {
    return res.json()
 })
 .then(res => {

    // 2. array for storing url's retrieved from response
    var urlArray = []

    if (res.length > 0) {

        // 3. Push url inside urlArray
        res.map(data => urlArray.push(data.url))
    }

    // 4. an array of urls
    return urlArray
 })
 .then(urls => {

    // Return an promise which will return "JSON response" array for all URLs.
    // Promise.all means “Wait for these things” not “Do these things”.

    return Promise.all(urls.map(url => {
        // Take url fetch response, return JSON response
        return fetch(url).then(res => res.json())
    }
    ))
 })
 .then(res => {
    // Store all objects into array for later use
    var objArr = res; return objArr
  })
//.then(...)

【讨论】：

【解决方案2】：

您的代码中有一点错误。

在.catch 之前缺少})

有了它，您可以使用数组中的数据。

componentDidMount(){
    console.log('Fetch');
    fetch("https://horizons-json-cors.s3.amazonaws.com/products.json")
    .then((resp) => (resp.json()))
    .then((json) => {
      var productUrlArr = [];
      for (var i = 0; i < json.length; i++) {
        productUrlArr.push(json[i].url);
      }
      console.log(productUrlArr);
    }).catch((err) => {
      console.log('error', err);
    });
}

希望对你有帮助。

【讨论】：

【解决方案3】：

很简单。首先像您一样首先获取所有网址。然后映射并传递给Promise.all。

fetch("https://horizons-json-cors.s3.amazonaws.com/products.json")
  .then((resp) => (resp.json()))
  .then((json) => {
    Promise.all(json.map(product =>
        fetch(product.url).then(resp => resp.text())
    )).then(texts => {
        // catch all the data
    })
  }).catch((err) => {
    console.log('error', err);
  });

【讨论】：