All you need to know about Async Await In JavaScript
How to work with the JavaScript Async Await keywords
JavaScript Introduces keywords “async” and “await” as an addition to EcmaScript 2015. In this article, we are going to talk about the following concepts. We are going to talk about the impact of each keyword on the JavaScript Execution.
- Working With Async Keyword
- Impact of Await Keyword
Follow my YouTube Channel for more such content and tutorials…
Before getting in details of Async and Await, you should have a good understanding of Promises in JavaScript. Please refer to the following video for details:
Follow us on our YouTube Page:
https://www.youtube.com/channel/UCo-h1M-5M6Y5D4Lgut8ge4w
Returning Promises with Async Keyword
When we append the keyword “async” to the function, this function returns the Promise by default on execution. Async keyword provides extra information to the user of the function:
- The function contains some Asynchronous Execution
- The returned value will be the Resolved Value for the Promise.
Let's validate it with a small example.
The output from the above execution returns an already resolved promise.
In the above code, since the value returned is a promise, we can capture the promise and extract value from the same. We can associate a callback function with the promise using “then”
Let's see the above code in action…
To in order to summarize the impact of the “Async” keyword, we can state:
- Appending “async” will return a promise from a function
- In case the function is returning some value, the value will be available as the resolved value from the promise.
- If no value is returned, the resolved value will be “undefined”
Understanding Asynchronous Execution
Working with realtime scenarios, we might have some functions which return a promise on its execution. The promise returned from the function might resolve after some time, meanwhile, the main executing thread does not wait for the promise to be resolved, it proceeds further execution of the synchronous part of the application. Once the promise is resolved, its callback function is executed.
Let's look for the below code to understand the behavior.
The output for the above execution gives you the following output:
In the above code, we need to observe the following points:
- Value “Mayank” is displayed before “Promise Executed”
- Promises are asynchronous and waiting on other thread for completion
- JavaScript does not wait for the promise to resolve, it executes further
- Once the promise is resolved the callback function is invoked.
Working with the “await” keyword
Adding “await” before a promise makes the execution thread to wait for asynchronous task/promise to resolve before proceeding further. When we are adding the “await” keyword, we are introducing synchronous behavior to the application. Even the promises will be executed synchronously. Lets’s update the code above to replicate synchronous behavior.
The output for the code above is:
In the above code, the following points need to be kept in mind:
- “returnPromise()” returns a Promise which needs to wait at least for 3 seconds before getting resolved.
- We have updated the “await” keyword in front of the function call, which forces the promise to be resolved before the code is executed further
- After a delay of 3 seconds, the promise will be resolved and the further execution of the code will resume. It introduces synchronous behavior
- “async” keyword needs to be updated in front of functions that contain ”await” keyword to notify that the result might be available after a certain delay since we are explicitly making the main thread wait until the promise has been resolved.
- Await and Async has introduced synchronous behavior to the Execution.
Closure
Await and Async keyword combined together ensures that the main thread will not start executing further until the asynchronous part of the application has finished execution hence imparting synchronous behavior to the thread.
A note from JavaScript In Plain English
We have launched three new publications! Show some love for our new publications by following them: AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!
We are also always interested in helping to promote quality content. If you have an article that you would like to submit to any of our publications, send us an email at submissions@plainenglish.io with your Medium username and we will get you added as a writer. Also let us know which publication/s you want to be added to.
