Understanding async/await in JavaScript

To understand this article, you need to know the basics of Promises in Javascript. If that's not the case, check out my previous article!

As a reminder, a promise is a kind of generic callback for the results of asynchronous functions. It's the equivalent of a function with only two possible outcomes: success (resolve), or failure (reject).

Here's an example of promise handling without async/await:

function example(url){
  fetch(url).then((response)=>{
    return response.json();
  }).then((data)=>{
    console.log(data);
  }).catch((e)=>{
    alert(e);
  });
}

And the version with async/await:

async function(url){
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch(e){
    alert(e);
  }
}

Looking at the examples above, we quickly understand the value of using async/await: the readability/simplicity of the code.

And the more nested the promise chains are, the greater the code simplification!

But in the end, what are the exact roles of each of these keywords? That's what we're going to look at!

Async

The async directive is used to specify that the function in question has asynchronous behavior.

More precisely, when you add the "async" keyword in front of a function, you force that function to return a promise, regardless of the content of that function.

Example:

async function example1(){
  return 0;
}

is equivalent to

function example2(){
  return new Promise((resolve, reject)=>{
    resolve(0);
  });
}

The example used above has no functional value, but demonstrates the effect of the directive

Even with a synchronous function, we force the function into an asynchronous mode by wrapping its content in a promise.

You can even verify this by examining the return of the async function once executed:

console.log(example1());
// $> Promise { 0 }

But why force a function to return a promise?

To be able to use a directive that works ONLY with promises: the "await" keyword!

Await

This directive simply allows you to capture a promise being processed, blocking execution while waiting for it to be resolved.

Once resolved, the received value will be returned, can be stored (or not) and execution can continue. If the promise is rejected, then the error will be sent to the next exception-catching block (catch).

In summary, await allows you to move from asynchronous behavior to synchronous behavior.

As with async, here's some code equivalent to await:

// with await
try {
  const user = await signup(...);
  return user;
} catch(e){
  ...
}

without await

try {
  const user, error;
  signup.then((data)=>{
  	user = data;
  }).catch((e)=>{
  	error = e;
  });
  while(!user && !error){
    //waiting loop
  }
  return user;
} catch(e){
  ...
}

As with the previous example, this one is purely theoretical

As you will have understood, the impact on the code is to block execution and avoid handling operations in parallel, when these don't need to be handled that way.

But be careful, if you make synchronous operations that could have run in parallel, then you could significantly slow down your execution, as explained in this article:

Note that async/await is 95% supported by current browsers, and is not supported by Internet Explorer.