Understanding async-await in JavaScript
By: Gokul N K
Tags: JavaScript, Async, Promises, Asynchronous, Programming

Understanding async-await in JavaScript

Rules of thumb and examples for when and how to use async and await

Photo by Qusai Akoud on Unsplash

async and await are extensions of promises. If you are not comfortable with the basics of promises, please spend some time understanding promises before reading further.

I am sure that many of you are using async and await already. But, I think it deserves a little more attention.

Here is a small test: If you can’t spot the problem with the below code, read on.

We will revisit this code block later, once we have gone through async-await basics. As always, Mozilla docs is your friend. Especially check out the definitions.

From MDN:

“An asynchronous function is a function which operates asynchronously via the event loop, using an implicit Promise to return its result. But the syntax and structure of your code using async functions is much more like using standard synchronous functions.”

I wonder who writes these descriptions. They are concise and well-articulated. To break it down:

The function operates asynchronously via an event loop. It uses an implicit Promise to return the result. The syntax and structure of the code are similar to writing synchronous functions.

And MDN goes on to say:

“An async function can contain an await expression that pauses the execution of the async function and waits for the passed Promise 's resolution, and then resumes the async function's execution and returns the resolved value. Remember, the await keyword is only valid inside async functions.”

Let’s jump into code to understand this better. We will reuse the three functions we used for understanding promises here as well.

A function that returns a promise which resolves or rejects after n number of seconds.

Two more deterministic functions. One that resolves after n seconds and another which rejects after n seconds.

As these three functions return promises, we can also call these functions as asynchronous functions. See, we wrote async functions before we even knew about them.

If we had to use the function promiseTRSANSG using a standard format of promises, we would have written something like this:

There is a lot of unnecessary code here, for example, the anonymous function just for assigning the handlers. What async-await does, is improve the syntax for this which makes it seem more like synchronous code.

If we had to the same as the above in async await , format it would be like this:

result = await promiseTRSANSG(3);

console.log(result);

Well, that looks much more readable than the standard promise syntax.

When we used await , the execution of the code was blocked. That is the reason that you had the value of the promise resolution in the variable result .

As you can make out from the above code sample, instead of the .then part, the result is assigned to the variable directly when you use await .

You can also make out that the .catch part is not present here. That is because that is handled using try catch error handling. So, instead of using promiseTRSANS let us use promiseTRRARNOSG .

As this function can either resolve or reject, we need to handle both scenarios.