Question

采取以下情形：

我需要在表中显示所有国家和每个国家的人口清单。可以从此处查询所有数据：api.population.io。

Thare是2个api调用，可以帮助我实现所需的目标：

http://api.population.io:80/1.0/countries-返回所有现有国家/地区的列表
http://api.population.io:80/1.0/population/ {$ country} /今天和明天/-返回特定国家/地区的人口

您可以看到，我需要进行2次api调用，因为第二次调用取决于第一次调用进行的国家/地区的名称。通过使用以下代码，我设法使用fetch将其与初始api调用一起使用：

    fetch('http://api.population.io:80/1.0/countries')
    .then(results => {
        return results.json();
    }).then(data => {
        //data.countries
    })

这只是返回我所有国家的清单。

现在，我需要遍历data.countries并为每个国家/地区进行新的api调用，而不会破坏整个过程。我试图抛出另一个fetch调用，其中在循环data.countries的同时data.countries可用，但是正如您可以想象的那样，这破坏了整个过程，我认为发生的事情是循环不等待fetch调用完成而造成混乱查询过程。

我对此很陌生，我已经尝试使用谷歌搜索，但是我不确定我可以用什么来实现我所需要的。任何帮助将不胜感激。我整天都在处理这个问题

Answer 1

您可以一次触发所有单独的填充请求，并在所有Promise.all的帮助下使用结果：

fetch("http://api.population.io:80/1.0/countries")
  .then(results => {
    return results.json();
  })
  .then(data => {
    const populationPromises = data.countries.map(country => {
      return fetch(
        `http://api.population.io:80/1.0/population/${country}/today-and-tomorrow/`
      ).then(results => results.json());
    });

    return Promise.all(populationPromises);
  })
  .then(populations => {
    console.log(populations);
  })
  .catch(error => {
    console.error(error);
  });

Answer 2

使用async/await的方法使代码更加连贯和可读：

function getCountries() {
    return fetch('http://api.population.io/1.0/countries/?format=json').then(s => s.json())
}

function getPopulation(country) {
    return fetch(encodeURI(`http://api.population.io:80/1.0/population/${country}/today-and-tomorrow/?format=json`)).then(s => s.json())
}

(async () => {

    try {

        const { countries } = await getCountries();
        const populations = await Promise.all(countries.map(getPopulation));

        console.log(populations);

    } catch(err) {
        console.log(err);
    }

})();

相互依赖的链接获取

2 个答案: