Dealing with Asynchronous data : Async - await
Tags: javascript, webdev, promise, await
Published: 2022-01-23 20:12:32

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] (https://dev.to/swasdev4511/asynchronous-javascript-promises-472f). 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.

![An example showing the need of async-await](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm307ce0rnufqfmre1no.png)

- 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)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dh1yvvdcv4iip3ag5bqw.PNG)

- 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 : 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/plhue5hfzi7cs8fby5q8.PNG)

- 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 : 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phlhsdxopawegxb169nl.gif)

- 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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9bzw80ig8miog4og277.png)

---

## 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](https://twitter.com/swasdev4511) & [LinkedIn](https://www.linkedin.com/in/swasdev4511)