使用诺言的异步事件序列

Question

I am new to JavaScript and trying to understand how to write some code that makes a number of asynchronous calls to two third party API based on the contents of a previously generated input list.

Once all the data has been collected, I want to create a chart.

I have tried doing it a number of ways but from what I've read, using promises seems to be the recommended way. My brain is being twisted in knots, firstly using the traditional async model then trying to understand promises.

Can anyone point me in the right direction please?

var countries = [];
// countries ends up with 10-30 country names in previous code    
var total_population = 0;
for(var n=0; n<countries.length; ++n) {
    var country_data=new CountryData();
    // async function that fetches country data
    country_data.get(countries[n]);
    country_data.onDone = function() {
        var capital=this.capital;
        var city_data=new CityData();
        // async function that fetches city data
        city_data.get(capital);
        city_data.onDone = function() {
            total_population += this.population;
        }
    }
}
// make a chart with total_population for example.

Answer 1

The general pattern I use in cases like this is to push all of my promises into an array, then set up a promise action that gets all the returned values and does what I want (console.log is your friend to see how the data is returned):

Edit: country_data.get must return a promise object for this to work.

var countries = ['US', 'CA', 'GB'];
var promises = [];
// countries ends up with 10-30 country names in previous code    
for(var n=0; n<countries.length; ++n) {
    var country_data=new CountryData();
    // async function that fetches country data and returns a promise
    promises.push(country_data.get(countries[n]));
}

//This will fire only once all async calls complete
Promise.all(promises).then(function(data) {
    console.log(data);
    //do stuff with data from all calls
}

Warning: I normally work with jquery which uses slightly different syntax, and jsfiddle is down so this isn't fully tested.

Answer 2

Assuming CountryData#get and CityData#get return promises that resolve the requested country/city data, this is how I would handle this:

var total_population = 0;

var promise = Promise.all(countries.map(function(country) {
  return new CountryData().get(country)
    .then(function(countryData) {
      return new CityData().get(countryData.capital);
    })
    .then(function(cityData) {
      total_population += cityData.population;
    });
}));

edit: changed the solution to return a single promise