如何在 JS 中遍历一组对象并为每个对象获取网络数据？

Question

我正在使用 React Native 制作应用程序。我必须从 URL 中获取一组类别的数据，然后对于每个类别，我必须从它们各自的 URL 中获取资产。这是我已经走了多远：

var result = fetch(url)
  .then((response) => response.json())
  .then((jsonData) => {
    for (var i = 0; i < jsonData.result.length; i++) {
        var url = jsonData.result[i];
        if (url.name == 'navigationURL') {
          return fetch(url.value);
        }
    }
  })
  .then((response) => response.json())
  .then((jsonData) => {
    let categories = [];
    for (var i = 0; i < jsonData.subCategories.length; i++) {
        var cat = jsonData.subCategories[i];
        console.log(Category);
        var category = new Category(cat.id, cat.name, cat.type, cat.url, []);
        console.log(category);
        categories.push(category);
    }
    return categories;
  })

我的数据以以下格式存储：

来自主网址：

{
  "status": "success",
  "result": [
    {
      "name": "navigationURL",
      "value": "xxx"
    }
  ]
}

来自navigationURL：

{
  "id": 1,
  "name": "Home",
  "type": "",
  "url": "",
  "subCategories": [
    {
      "id": 92,
      "name": "Documentary",
      "type": "JTV_LEAF",
      "url": "yyy",
    }
  ]
}

来自每个类别的 URL，

[
  {
    "id": "1",
    "title": "Inception",
    "type": "vod"
  }
]

如何获取每个类别的数据？

---

这是我目前所写的：

var result = fetch(url)
.then((response) => response.json())
.then((jsonData) => {
  for (var i = 0; i < jsonData.result.length; i++) {
      var url = jsonData.result[i];
      if (url.name == 'navigationURL') {
        return fetch(url.value);
      }
  }
})
.then((response) => response.json())
.then((jsonData) => {
  let categories = [];
  for (var i = 0; i < jsonData.subCategories.length; i++) {
      var cat = jsonData.subCategories[i];
      var category = new Category(cat.id, cat.name, cat.type, cat.url);
      categories.push(category);
  }
  return categories;
})
.then((categories) => {
  console.log(categories);
  return Promise.all(
    categories.map(category => {
      fetch(category.url)
        .then(res => res.json())
        .then((assetsJson) => {
          let assets = [];
          for (var i = 0; i < assetsJson.length; i++) {
              var ass = assetsJson[i];
              var asset = new Asset(ass.id, ass.title, ass.type, ass.thumbnail);
              assets.push(asset);
          }
          return assets;
        })
        .then((assets) => category.assets = assets);
    })
  ).then((categories) => {
    this.setState({
      isLoading: false,
      dataSource: categories,
    }, function(){

    });
  });
})

.catch((error) =>{
  console.error(error);
});

Answer 1

在运行链中的下一个 then 函数之前，您可以使用 Promise.all 确保每个 fetch 都已完成。

示例

var result = fetch(url)
  .then(response => response.json())
  .then(jsonData => {
    return Promise.all(
      jsonData.result.map(url => {
        if (url.name === "navigationURL") {
          return fetch(url.value).then(res => res.json());
        }
      })
    );
  })
  .then(jsonData => {
    return jsonData.reduce((result, data) => {
      if (data) {
        data.subCategories.forEach(cat => {
          var category = new Category(cat.id, cat.name, cat.type, cat.url, []);
          result.push(category);
        });
      }

      return result;
    }, []);
  });