Understanding JavaScript Async and Await

Async, Await.. why?

I know what you might be thinking.. Who needs async await when you have promises right? Well.. yes and no. You see async await works on top of promises to offer a more streamlined, human readable way of handling asynchronous code in a way standard promise handling does not.

Before we go any further if you’re not familiar with promises and how they work, I recommend you check out this great video giving a brief explanation on how they work.

So how does Async Await differ from standard promise handling?

For that we need to understand how async await work under the hood. Here's a description MDN provides us.

The await expression causes async function execution to pause, to wait for the promise's resolution, and to resume the async function execution when the value is resolved. It then returns the resolved value. If the value is not a promise it is converted to a resolved promise. If the promise is rejected, the await expression throws the rejected value.

So simply put, the async keyword tells the JavaScript engine to prepare for an asynchronous function that will return a promise. In turn, the await keyword pauses the functions execution until the promise resolves, and then returns the resolved value.

To help clarify, you’ll find two examples below using the fetch API. I won't be going into detail on how the fetch API works, but essentially its a way to be able to make XMLHttpRequests.

Example 1 makes a network request to our Ron Swanson quotes endpoint using standard promise handling with .then() and .catch().

() => {
    fetch(`http://ron-swanson-quotes.herokuapp.com/v2/quotes/5`)
   .then(response => response.json())
   .then(quotes => quotes)
   .catch(err => err)
}

In Example 2, instead of using .then() and .catch() we use async await in a try catch block.

async () => {
  try {
    const response = await fetch(`http://ron-swanson-quotes.herokuapp.com/v2/quotes/5`);
    const quotes = await response.json();
    return quotes;
  catch(err){
     return err;
  }
}

Awesome! It's Async Await from here on then.

Sure, but there are some drawbacks you should be aware of.

First async await can only resolve one promise at a time unless combined with something like Promise.all() which can be confusing.

Secondly, due to async await being an ECMAScript 7 feature it needs to be transpiled to a version of JavaScript that all browsers can handle. Once transpiled, the logic can sometimes be 2-3 times the amount of code originally created. Which depending on how often you use async await can increase your bundle size and add additional load times to your application.

For more details, I recommend you check out this article by Ben Lesh, and this article by Daniel Brian.

So what is the best use case for Async Await?

Well there really isn’t a clear cut scenario. I would argue that async await is great when used in combination with standard promise handling as it adds a bit of syntactic sugar when working with asynchronous code.