Javascript

Javascript: Async and Await Explaned With Examples

This tutorial explains JavaScript async/await syntax and semantics with diagrams and simple examples.

Social Media Digital Marketing & Communication Advisor. Community Manager

Published · Nov 16 2019

Introduction
The async/await syntax in JavaScript ES7 makes it easier to coordinate asynchronous promises. If you need to asynchronously fetch data from multiple databases or APIs in a certain order, you can end up with a spaghetti of promises and callbacks. The async/await construct allows us to express such logic more succinctly with more readable and maintainable code.

  

This tutorial explains JavaScript async/await syntax and semantics with diagrams and simple examples.

Before we dive in, let’s start with a brief overview of promises. Feel free to skip this section if you already know about JS promises.
. . .
Promises
In JavaScript, a promise represents an abstraction of non-blocking asynchronous execution. JS promises are similar to Java’s Future or C#’s Task, if you have come across them.

Promises are typically used for network and I/O operations - e.g. reading from a file, or making HTTP requests. Instead of blocking the current “thread” of execution, we can spawn an asynchronous promise, and use the then method to attach a callback which will be triggered when the promise completes. 

The callback itself can return a promise, and thus we can effectively chain promises.

Here’s an example of a promise constructor and a simple executor function with “producing code” that takes time (via setTimeout):

let promise = new Promise(function(resolve, reject) {   
    // the function is executed automatically when the promise is constructed    
  
    // after 1 second signal that the job is done with the result "done"   
    setTimeout(() => resolve("done"), 1000); 
});

We can see two things by running the code above:
The executor is called automatically and immediately (by new Promise).
The executor receives two arguments: resolve and reject — these functions are pre-defined by the JavaScript engine. So we don’t need to create them. We should only call one of them when ready.

After one second of “processing” the executor calls resolve("done") to produce the result. This changes the state of the promise object.

. . .


. . .
Async Functions
An async function is a shortcut for defining a function which returns a promise.
For example, the following definitions are equivalent:
 function f() { 
  return Promise.resolve('TEST'); 
} // asyncF is equivalent to f! 

async function asyncF() { return 'TEST'; } 

Similarly, async functions which throw exceptions are equivalent to functions which return rejecting promises:
function f() { 
  return Promise.reject('Error'); 
} // asyncF is equivalent to f! 

async function asyncF() { throw 'Error'; }
. . .
Await
When we spawn a promise we can’t synchronously wait for it to finish. We can only pass a callback via then. Waiting for a promise is disallowed to encourage the development of non-blocking code. Otherwise, developers would be tempted to perform blocking operations because it’s easier than working with promises and callbacks.

However, in order to synchronise promises we need to allow them to wait for each other. In other words, if an operation is asynchronous (i.e. encapsulated in a promise) it should be able to wait for another asynchronous operation to finish. But how would the JavaScript interpreter know if an operation is running within a promise or not?

The answer is in the async keyword. Every async function returns a promise. Thus, the JavaScript interpreter knows that all operations in async functions will be encapsulated in promises and run asynchronously. Therefore, it can allow them to wait for other promises to finish.

Enter the await keyword. It can only be used in async functions, and allows us to synchronously wait on a promise. If we use promises outside of async functions we will still need to use then callbacks:
async function f(){ 
    // response will evaluate as the resolved value of the promise 
    const response = await rp('http://example.com/'); 
    console.log(response); 
} 
// We can't use await outside of async function. 

// We need to use then callbacks .... 
f().then(() => console.log('Finished')); 

Under the hood, await/await actually translate to promises and then callbacks. In other words, it’s syntactic sugar for working with promises. Every time we use await, the interpreter spawns a promise, and puts the rest of the operations from the async function in a then callback.

Let’s consider the following example:
async function f() { 
  console.log('Starting F'); 
  const result = await rp('http://example.com/'); 
  console.log(result); 
} 

The underlying computational process of the f function is depicted below. Since f is async, it will also run in parallel with its caller:

 Computational process of "await". 

The function f starts and spawns a promise. At that moment, the rest of the function is encapsulated in a callback, and scheduled to execute after the promise is complete.
. . .
Error Handling
In most previous examples, we assumed that the promises resolve successfully. Hence, await-ing on a promise returned a value. If a promise we await for fails, this will result in an exception within the async function. We can use standard try/catch to handle it:

async function f() { 
    try {
      const promiseResult = await Promise.reject('Error'); 
    } catch (e){ 
      console.log(e); 
    } 
} 

If the async function does not handle an exception, whether it is caused by a rejected promise or another bug, it will return a rejected promise:
async function f() { 
     // Throws an exception 
     const promiseResult = await Promise.reject('Error'); 
} // Will print "Error" 
f().then(() => console.log('Success')).catch(err => console.log(err)) 

async function g() { 
  throw "Error"; 
} // Will print "Error" 
g(). then(() => console.log('Success')). catch(err => console.log(err)) 

This gives us handy way to work with rejected promises via well the known exception handling mechanism.

 