JavaScript Promises — Final Part. Async/Await

This is the final part of the series.

To understand async/await you have to understand the basics of promises and promise chaining. Once you understand those 2 concepts, this article becomes pretty much straightforward.

TLDR

async/await is syntactic sugar for javascript promises

This means, using async/await we will be able to avoid the boilerplate syntax of JS Promises, and work on them much easier.

We will start with a simple example and once we understand the basics, we will look at a more practical one.
Take a look at the below functions. The first one creates a promise which resolves with the value 1. And the second function consumes and logs the resolved value.

The problem here is, our business logic becomes wrapped in the promise syntax, and is very hard to read the code. It becomes much more difficult once you start chaining multiple promises together. Our logic gets broken down into different pieces.

To avoid this, we can use async/await. Re-writing the above function using async/await keywords, they become:

Isn’t this much better to read and understand? Now let's understand what's happening.

A function is said to be an async function when the async keyword is applied before the function keyword. An async function has 2 features that will distinguish it from normal functions:

1. An async function always returns a promise.
2. You can use the await keyword inside the async function.

The await keyword is applied before a function that returns a promise. And, the await keyword makes JavaScript wait until that promise is resolved. Only after the promise fulfills, will the normal execution be resumed.

So, in our example, line number 7 won’t execute until the promise returned from the function createPromise (line no. 6) is resolved.

Now, since an async function always returns a promise, we don’t have to explicitly wrap the return value in a Promise. We just need to return the value, and it will automatically be wrapped in a Promise.
So, we can further simplify the first function:

Using async/await we have synchronous like syntax, that handles asynchronous code.

Now, let's take a look at a practical example. Let’s take the example that we used in Promise chaining:

We are fetching all the users and then logging them to the console. For that, we have to use promise chaining as shown above. As you can see, our logic is divided into different blocks and it is much harder to read.

Re-writing the above function using async/await it becomes:

See the difference. The code becomes much more readable and our business logic is in one place.

Our function is defined with the async keyword. We await the response from API, on line 3. Once that is resolved, we await for the response body to be read as JSON, on line 4.
Each line gets executed after the previous one finishes.

Understand that, there is no magic happening behind the scenes. We are actually working with promises itself. But, it is much easier using the async-await keyword, since we don't have to worry about the boilerplate syntax of JS Promises.

Error Handling

To handle errors in a promise, we use the catch block. Since async-await eliminates the use of blocks altogether how will we handle errors?

For that, we can use the try…catch syntax in JavaScript.

Believe it or not, the try…catch syntax is not something that was introduced recently in JS, it has been there since ES3.

To use it, enclose the statements that may throw the error inside a try block and to handle the error, add a catch block.

Adding try-catch to our example it becomes

async/await is syntactic sugar for JS Promises. They help us to write synchronous like syntax that handles asynchronous code.

If you have found this article helpful, make sure to clap and share it. You can find all my articles here, including the other parts of this series. If you have any suggestions/comments let me know. And make sure to follow me so you don’t miss any articles.