implementation of event loop / js runtime multithreading

Normal execution is in the execution stack Promises are in the micro task queue Web APIs are in the macro task queue

Once all normal execution are completed, pull from the micro task queue to check if I/O is completed or a promise is settled

Once micro task queue is empty, pull from the macro task queue and repeat

https://stackoverflow.com/a/54906564

Concurrent Runs

// 3 seconds
async function fetchUsersAccount(username) {
  let user = await User.findOne({
    username,
  });
  return user;
}

// 5 seconds
async function fetchUsersPosts(username) {
  let posts = await Post.find({
    username,
  });
  return posts;
}

async function fetchAllUsersData() {
  // run concurrently,
  // not blocking since promise is returned by both async functions
  // and we do not resolve or await those promises until we need the data

  const user = fetchUsersAccount("devalpp");
  const posts = fetchUsersPosts("devalpp");

  // do things

  // put in queue until user account data is recieved,
  // await will wait until promise is settled
  console.log(await posts); // 5 seconds

  // do things

  // put in queue until user posts is recieved
  // await will wait until promise is settled
  console.log(await user); // 3 seconds
}

Output will be: console log user (3 seconds) console log posts (5 seconds) 5 seconds total

What does async do? It simply makes the function return promise (that the caller can await or .then() which will settle when it resolves/rejects)

What does await do? It waits for the promise (returned by an async function that was called) to be settled (converts promise into value by blocking)

This example:

1. Here we do not await for the promise (returned by the 2 fetch async functions) to be resolved.

2. This will make the thread not wait for the I/O to complete and will continue on to the next line

3. The next line is another call to an async function

4. when fetchUsersAccount() is called, it is c

Sequential Runs

// 3 seconds
async function fetchUsersAccount(username) {
  let user = await User.findOne({
    username,
  });
  return user;
}

// 5 seconds
async function fetchUsersPosts(username) {
  let posts = await Post.find({
    username,
  });
  return posts;
}

async function fetchAllUsersData() {
  // run concurrently,
  // not blocking since promise is returned by both async functions
  // and we do not resolve or await those promises until we need the data

  const posts = await fetchUsersPosts("devalpp");
  const user = await fetchUsersAccount("devalpp");
  

  // do things

  // block until user account data is recieved,
  // await will wait until promise is settled
  console.log(posts); // 5 seconds

  // do things

  // block until user posts is recieved
  // await will wait until promise is settled
  console.log(user); // 3 seconds
}

We flipped posts and users console log posts (5 seconds) console log user (3 seconds) 8 seconds total