Does async await block JavaScript Main thread ?

Published in

Geek Culture

3 min readJun 3, 2021

If you have landed on this page, most likely you know what is async and await and at some point in time you might have got this question in your mind are they really blocking JavaScript main thread ?

What are async and await ?

I believe most of your aware of it, for those of you who are not clear, here is the quick explanation.

Let’s say you want to make an API call using promise, and response of that API call has to be passed to another promise and again response of that promise you want to transfer to another promise. This is called promise chaining, as shown in below code.

function getUserData()
promise.then(response1 => {
 promise.then(response2 => {
  promise.then(response3 => {
     console.log("Inside the promise"); // Will be printed later
  }}
 }}
})getUserData()

There is no problem with above approach, in fact if you have one promise response passed as an argument to another promise then there is no other way. As most of you know, promise is used to achieve asynchronous tasks in JavaScript. So in below code snippet, “Before all promise” will be printed before the “Inside the promise”.

function getUserData()
promise.then(response1 => {
 promise.then(response2 => {
  promise.then(response3 => {
     console.log("Inside the promise"); // Will be printed later
  }}
 }}
})getUserData()
console.log("Before all promise"); // will be printed first

We will not be blocking the main thread execution until the promise is executed, once the promise completes it’s execution, JavaScript main thread picks those task from call back queue (If your not aware of event loop in JavaScript, find it on this link).

Let’s get to the topic of async and await

async and await are considered as syntactic sugar, rather using promise chaining above, you can use async, await and write very structured code as shown below.

async function getUserData(){let response1 = await fetch('https://jsonplaceholder.typicode.com/users');let response2 = await fetch('https://jsonplaceholder.typicode.com/users');let response3 = await fetch('https://jsonplaceholder.typicode.com/users');
}getUserData();

At first if you look at it, everything seems fine. But if you observe keenly, until first await is executed and response1 get’s the response of the API call, the control will not be passed to second line and same continues until response3. Don’t you think it is blocking main thread ?

Just to make you more confuse, look at below code snippet and guess the output.

async function getUserData(){let response1 = await fetch('https://jsonplaceholder.typicode.com/users');let response2 = await fetch('https://jsonplaceholder.typicode.com/users');let response3 = await 
fetch('https://jsonplaceholder.typicode.com/users');console.log("After all promise is executed");}getUserData();
console.log("Hello World");

Which statement will be logged first ? If you have found the answer before reading further, please add your name is comment section.

The answer is, “Hello World” will be printed first and after execution of all the promises “After all promise is executed” statement will be printed.

Though it creates a confusion, in reality async and await will not block the JavaScript main thread. Like mentioned above they are just syntactic sugars for promise chaining.

Putting other way both code snippets below are same.

Snippet 1:

function getUserData()
promise.then(response1 => {
 promise.then(response2 => {
  promise.then(response3 => {
     console.log("Inside the promise"); // Will be printed later
  }}
 }}
})getUserData()

Snippet 2:

async function getUserData(){let response1 = await fetch('https://jsonplaceholder.typicode.com/users');let response2 = await fetch('https://jsonplaceholder.typicode.com/users');let response3 = await 
fetch('https://jsonplaceholder.typicode.com/users');console.log("After all promise is executed");}getUserData();

As there is async keyword in the beginning of the function, JavaScript will move this method execution from call stack to web API and continue to execute other tasks. This topic is very simple but in interview many candidates get confused by looking at above example. That’s the reason I have written this article to explain it in detail.

Happy reading, catch you in my next article.

More articles from the same author:

Read all articles by the author here.