The first way we can do web service calls is by using promises, and they were (up to the appearance of the more modern async/await statements, which we'll be seeing in the next section) the favorite method. Promises were available some time back (first around 2011 through jQuery's deferred objects, and afterwards by means of libraries such as BlueBird or Q), but in recent JS versions, they became native. Since promises cannot really be considered something new, let's just see some examples so that we can move on to more modern ways of working—no, we won't be even considering going further back than promises, and directly work with callbacks!

Getting the weather data for Montevideo is simple if we use the getWeather() function that we defined previously:

// Source file: src/get_service_with_promises.js

function getMontevideo() {
    getWeather(MONTEVIDEO_UY)
        .then(result => {
            console.log("Montevideo, with promises");
            console.log(`Montevideo: ${result.data.length} bytes`);
        })
        .catch(error => console.log(error.message));
}

The getWeather() function actually returns a promise; its .then() method corresponds to the success case and .catch() corresponds to any error situations.

Getting data for two cities in a row is also simple. We don't want to start the second request until the first one has been successful, and that leads to the following scheme:

// Source file: src/get_service_with_promises.js

function getLondonAndPuneInSeries() {
    getWeather(LONDON_EN)
        .then(londonData => {
            getWeather(PUNE_IN)
                .then(puneData => {
                    console.log("London and Pune, in series");
                    console.log(`London: ${londonData.data.length} b`);
                    console.log(`Pune: ${puneData.data.length} b`);
                })
                .catch(error => {
                    console.log("Error getting Pune...", error.message);
                });
        })
        .catch(error => {
            console.log("Error getting London...", error.message);
        });
}

Finally, in order to do calls in parallel and optimize time, the Promise.all() method will be used to build up a new promise out of the three individual ones for each city. If all calls succeed, the bigger promise will also do; should any of the three calls fail, then failure will also be the global result:

// Source file: src/get_service_with_promises.js

function getCitiesInParallel() {
    const montevideoGet = getWeather(MONTEVIDEO_UY);
    const londonGet = getWeather(LONDON_EN);
    const puneGet = getWeather(PUNE_IN);

    Promise.all([montevideoGet, londonGet, puneGet])
        .then(([montevideoData, londonData, puneData]) => {
            console.log("All three cities in parallel, with promises");
            console.log(`Montevideo: ${montevideoData.data.length} b`);
            console.log(`London: ${londonData.data.length} b`);
            console.log(`Pune: ${puneData.data.length} b`);
        })
        .catch(error => {
            console.log(error.message);
        });
}

Note how we use a destructuring assignment to get the data for each city. The result of calling these functions may be as follows; I added some spacing for clarity:

Montevideo, with promises
Montevideo: 353277 bytes

London and Pune, in series
London: 356537 b
Pune: 351679 b

All three cities in parallel, with promises
Montevideo: 351294 b
London: 356516 b
Pune: 351679 b

Organizing web calls with promises is a straightforward method, but the usage of possibly nested .then() methods can become hard to understand, so we really should give a look to an alternative. We'll do just that in the next section.