TechnoFunnel
Published in

TechnoFunnel

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.

Follow my YouTube Channel for more such content and tutorials…

https://youtu.be/2gjJZv7PD_U

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:

Let's validate it with a small example.

https://gist.github.com/Mayankgupta688/5241ef7e17bbfb7c00d9bcef0e141f14

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

https://gist.github.com/Mayankgupta688/5d8217118e729da9205c0a92130f86a2

Let's see the above code in action…

To in order to summarize the impact of the “Async” keyword, we can state:

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.

https://gist.github.com/Mayankgupta688/e0d4c9cc6ad3836cb512e804caa8f0ce

The output for the above execution gives you the following output:

In the above code, we need to observe the following points:

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.

https://gist.github.com/Mayankgupta688/a21849d2af7f529d06cbad9e1665a530

The output for the code above is:

In the above code, the following points need to be kept in mind:

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mayank Gupta

9 Years of Experience with Front-end Technologies and MEAN Stack. Working on all Major UI Frameworks like React, Angular and Vue https://medium.com/technofunnel