Doing Ajax calls with async/await

The second way, async/await, is more modern but, deep inside, actually also works with promises, but simplifyies the job. There are some important definitions that we should take into account:

  • An async function will contain some await expressions, depending on promises
  • await expressions pause the execution of the async function until the promise's resolution
  • After the promise's resolution, processing is resumed, with the returned value
  • If an error is produced, it can be caught with try ... catch
  • await can only be used in async functions

How does this affect our coding? Let's review our three examples. Getting information for a single city is simple:

// Source file: src/get_service_with_async_await.js

async
function getMontevideo() {
try {
const montevideoData = await getWeather(MONTEVIDEO_UY);
console.log("Montevideo, with async/await");
console.log(`Montevideo: ${montevideoData.data.length} bytes`);
} catch (error) {
console.log(error.message);
}
}

We are still using a promise (the one returned by axios via the getWeather() call), but now the code looks more familiar: you wait for results to come, and then you process them—it almost looks as if the call were a synchronous one! 

Getting data for London and then Pune in sequence is also quite direct: you wait for the first city's data, then you wait for the second's, and then you do your final process; what could be simpler? Let's see the code:

// Source file: src/get_service_with_async_await.js

async
function getLondonAndPuneInSeries() {
try {
const londonData = await getWeather(LONDON_EN);
const puneData = await getWeather(PUNE_IN);
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.message);
}
}

Finally, getting all data in parallel also depends on the Promise.all() method we saw in the previous section:

// Source file: src/get_service_with_async_await.js

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

const [montevideoData, londonData, puneData] = await Promise.all([
montevideoGet,
londonGet,
puneGet
]);

console.log("All three cities in parallel, with async/await");
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);
}
}

The parallel call code is really quite similar to the pure promises' version: the only difference here is that you await results, instead of using .then()

We have seen two ways of dealing with asynchronous service calls. Both are very much in use, but in this text, we'll tend to favor async/await, given that the resulting code seems clearer, with less extra baggage.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.191.46.36