Dealing with Asynchronous data : Async - await

Welcome to the world of JS! As we have discussed in my previous post about how we can handle asynchronous data using Promises. If you are new to promises then I will highly recommend to check my previous post here : Promises. We are going to continue this discussion further a next step. ( Hopefully a last one on handling async data 😊 )

What is the need ?

• Consider the example shown in the code snippet below.
• Now open your code editor or console window in browser and try to write the code as below and hit enter.

• Are you surprised to see the logs on the screen ?
• Well don't worry I am going to cover it briefly here why this happens. ( For those who cannot access editor right now or as lazy as I am 😉 , take a look at screenshot below)

• We can see that the order of the logs printed is not in the order that we are expecting.
• But why this happens ? To answer this question we should have known that how Javascript handles settimeouts and promises behind the scene and a concept called event loop.

You can skip this part 👇 if you are a beginner

Brief Explaination for those who are curious 🤔

• For those who are well aware of event loop, just note that event loop continuously monitors the callstack and checks the macrotask queue as well as microtask queue.
• settimeouts come under macrotask queue while promises come under microtask queue
• When there is nothing to execute in the main thread and call stack is empty then microtask queue gets the priority and gets executed and after that macrotask queue gets executed.

• I know this is just too much in 2-3 lines to digest. If I try to explain it in details then this post will become too lengthy.

• So it is clear from the logs that sequential execution isn't possible.

• This problem is resolved by async functions with the use of await.

Async Functions

• We can add async keyword to a normal function sothat it can return implicitly the promise rather than value.
• Check out the following code snippet :

• We can handle promises by chaining with then method if resolved or by chaining with catch method if rejected.

• Now our goal is to wait till response come from the promises either resolved or rejected.

• To achieve this await keyword has introduced.

Using await

• When we add await keyword before a promise then the execution pauses here till the promise gets resolved or rejected.
• Let us see an example shown in the code snippet below :

• In the above code example, there are three tasks : task1 , task2 & task3 which take 10sec,3sec & 1sec respectively to complete.
• When the async function getTaskData is invoked then it encounters task1 and waits(10sec) to resolve the promise and then after moves to task2.
• Again it waits( 3 sec ),after resolving task2 it is moved to task3.
• And at last, task3 gets resolved after 1sec
• This way synchronous behaviour is achieved.

Handling Errors

• We can make use of try-catch to handle the errors
• Consider the following example for the sake of understanding

Takeouts

1. It's an extension of promises.
2. They make asynchrounous code look like synchronous.
3. async function always returns a promise.
4. We can make use of try-catch to handle the errors.

Thanks for reading the article!!!.Feel free to drop me here if you have any doubts or suggestions! You can connect with me here : Twitter & LinkedIn