What you should know about async/await?
Since JavaScript is non-blocking and asynchronous, callbacks have been used to survive in the past. But due to callback hell, it was very difficult to handle and understand. Then promises came as a super hero to kick off the callbacks and allowing us to write much clear codes.
What is async/await?
Async/await is EcmaScript 2017 feature which allow us to handle asynchronous functions just as the synchronous functions. This allows us to maintain good quality codes with readability. Async/await is also used promises under the hood. So it’s reasonable to see that as a wrapper for promises.
But messing with the async/await will lead your program to great inefficiencies. So this short article is about to tell you how to use async/await properly and how time factor is involving when executing the program.
Let’s consider following basic promise.
It simply logs when the promise starts with ‘Promise ${time} start’ string and return a string ‘Promise ${time} end’ when the promise resolved.
Note: In the code snippets
|-----|is used to represent 1s (1000ms) execution. It will show when that ?particular promise execution is initiated and ended. (The exact times might be slightly different when they are executed by JS engine)
How promises handle asynchronous behavior?
Case 1: Where we do not wait for one promise to get resolved before next start
In here we are not expecting a return from first promise to execute the second promise. Since they are independent from each other we can execute them in parallel.
Case 2: Where we do wait for one promise to get resolved before next start
In here we are expecting a result from the first promise in order to execute the second promise. So it’s not possible to execute them in parallel and have to go through it synchronous manner. This is also called promise chain.
Case 3: Where we use Promise.all() to execute in parallel
Note: Promise.all(…) works similar to case 1(running parallelly). But it returns a single promise which will be resolved once all the promises in the array got resolved. So you saw how promises works. Let’s see how we can uses async/await in above situations.
How async/await handle asynchronous behaviour?
Note: In order to use
awaitin your function which pause the function until the particular promise resolved, you must wrap that particular function withasyncwrapper.
Case 1: Where we do not wait for one promise to get resolved before next start
In here we are executing promises parallely but keeping the references for those, then we can wait until those promises get resolved by using the references.
Case 2: Where we do wait for one promise to get resolved before next start
As you just saw, await is pausing the function until the particular promise get resolved. This is same thing that we did using then() in promises.
So if your second promise is not depending on the result of the first one, there is no need of adding await which leads to inefficiencies for particular case.
Case 3: Where we use Promise.all() to execute in parallel
This is same as in the promises. Since Promise.all(...) returning a promise, await is pausing the function until all the promises in the array get resolved.
It seems there is not much differences between Promises and async/await . But async/await is easy to read and reduce the complexity of the code.
