In-depth understanding of asynchronous waiting in Javascript

In this article, we’ll explore how async/await is every Javascript developer’s go-to tool for asynchronous programming. If you are new to javascript, don’t worry, this article will help you understand async/await from scratch.

introduce

Async/await is a pattern in javascript that allows your code to execute in a synchronous manner without affecting the asynchronous behavior of javascript.

Defining asynchronous functions

To define an asynchronous function, all you have to do is add an async keyword before the function definition.

// async function always returns a promise
async function greet() {
  return "hello";
}

Relax and comfortable! 😎. Use the async keyword before the function name.

Make the function return a promise.

Parsed when the function returns.

Final rejection when an error is thrown.

This means you don't need to declare return Promise.new() every time you want to create a Promise.

To demonstrate that the async function returns a Promise, we can quickly append a then block to print its value.

async function greet() {
  return "Hello from an async function"
}
greet().then(message => console.log(message));
//Hello from an async function

Using await and executing async functions

Isn't it cool that we can do then() and catch() in one async function? But this is not the real functionality of async functions, the real potential of functions lies in the await statement.

await causes a function to execute synchronously while holding control in that line until the awaited method completes its execution.

async function greet() {
  return "Hello from an async function"
}

async function execute() {
  const message = await greet();
  console.log(message)
}

Here are some rules of thumb we need to remember.

👉Wait can only be used in asynchronous functions

If we use await inside a function, we must declare a function, but not vice versa.

Let me put it this way. If you use await statements inside a method, that method must be an async method, or the compiler will yell at you.

async function greet() {
  return "Hello from an async function";
}

function execute() { //this function must be async
  const message = await greet();
  console.log(message)
}
/* 
SyntaxError: await is only valid in async function
*/

But declaring a function async does not necessarily mean that we will always await it inside of it. Here greet() is an async method, but there is no await statement in it.

Wait is only meaningful when calling a function that returns a promise or is an asynchronous function.

//not an async function
function greet() {
 return "Hello from an async function";
}

async function execute() {
  const message = await greet();
  console.log(message); //Hello from an async function
}

Although the code works exactly the same as the previous one, it doesn't make sense for await to operate on a synchronous function. I'd like to know what you think about this?

An important aspect of using await is that it blocks the execution of the next line of code until the await block is executed.

const asyncGreet = () => new Promise(resolve => setTimeout(resolve, 2000));

(async function execute() {
  console.log("before executing");
  await asyncGreet(); //blocks execution here
  // 👇 executed once await is finished
  console.log("I will be executed after 2000ms");
})();

Now you must be wondering if wait is making the code synchronous, why are we using it? NodeJs or browser Javascript are single threaded environments that execute one task at a time and are widely used due to their asynchronous behavior which we are losing. What's the point then?

Yes you are right but if you observe in most of the cases we need to perform tasks in relation to others.

async function subscribeToNewsLetter() {
  const user = await findUser(id);
  //👇methods need user email to execute
  await subscribe(user.email)
  await sendNotification(user.email)
}

True, but what about unrelated code? Well, there is an alternative method, which is (Promise.all).

const asyncGreet = (name) => new Promise((resolve) => setTimeout(resolve(`Hello ${name}`), 2000));

const names = ['john', 'jane', 'david'];

(async function() {
  const greetingPromises = names.map(name => asyncGreet(name));
  console.log(await Promise.all(greetingPromises));
})();

I know the above code is a contrived example, the important thing here is that we are leveraging the power of Promise.all to execute all the promises

Handling Errors with Async/Await.

Handling errors with async/await is pretty easy, and we can use our old friend the try/catch block to do this.

async function subscribeToNewsLetter() {
  try {
    const user = await findUser(id);
    await subscribe(user.email)
    await sendNotification(user.email)
  } catch(err) {
    //handle error
  }
}

There is another version where we can attach the catch handler directly to the await block. I personally don't use it, but you can give it a try if you want.

  await asyncGreet().catch(err => console.log(err);

2x more readable and easier to debug

The following code uses a Promise to find a user by id, assign the profile information, and then find the user's subscriptions.

function getUser(id, profile) {
  return new Promise((resolve, reject) => {
    User
      .find(id)
      .then((user) => {
        if(_.isEmpty(user)) return {};
        user.profile = profile;
        return user;
      })
      .then((user) => Subscription.find(user.id))
      .then(subscription => {
        if(_.isEmpty(subscription)) {
          user.subscription = null;
        } else {
          user.subscription = subscription;
        }
        return resolve(user)
      })
      .catch(err => reject(err))
  })
}

The code above works perfectly fine, but we can definitely make it more readable, concise, and easy to debug with async/await. Let's go.

async function getUser(id, profile) {
  try {
    const user = await User.find(id);
    if(_.isEmpty(user)) return {};
    user.profile = profile;
    const subscription = await Subscription.find(user.id);
    user.subscription = subscription
    return user;
  } catch(err) {
    console.log(err);
  }
}

Callbacks and Async/Await are enemies

As we have already seen in previous examples, promises work really well with async/await. Any function that returns a promise can be used with the await statement.

But when it comes to callbacks, the opposite is true. Callbacks cannot be used directly with async/await. They must be converted to Promises.

Let's consider the following function, which asynchronously tests whether a value is even (throws an error).

function asyncEven(id, cb){
  setTimeout(() => {
    const even = id%2 === 0;
    if (even) return cb(null, "even");
    else return cb("not even");
  }, 2000);
}

We know that await is not allowed in callbacks, but let’s try it anyway.

(async function() {
  //🐶👹 Wrong way
  const even = await asyncEven(2);
  console.log("isEven ", even); //undefined
})();

You must be thinking, we didn’t attach a callback that’s why it prints undefined .

Let's attach a callback, which is weird, but let's be patient.

(async function() {
  //this is also wrong 🐶👹
  const even = await asyncEven(2, (err, data) => { console.log("inside await on callback", err, data)});
  console.log("isEven ", even);
})();
/*
output:
even undefined
inside await on callback even null
*/ 

It seems that the callback is called and we also get the value from the asyncEven function. True, but it's still the wrong approach.

await has no effect on callbacks. This is similar to doing a wait on a synchronous function.

So why does it return undefined? That's a good question. This is the default nature of asynchronous programming. The setTimeout function is a callback which returns the callback value after 2000 milliseconds, meanwhile, the control starts executing the next line of code and it reaches the function, that's why we get undefined in the end.

So what is the solution? It's simple to turn asyncEven function into a promise and use await like a champ.

function asyncEven(id,) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const even = id%2 === 0;
      if (even) return resolve("even");
      else return reject("not even");
    }, 2000);
  })
}

(async function() {
  // waits for the execution
  const even = await asyncEven(2);
  console.log("iseven ", even);
})();

ForEach is not suitable for Async/Await

There may be side effects if we use ForEach loop with async/await. Consider the following example, the console.log statement here does not wait for await

greet(name).
async function greet(name) {
 return Promise.resolve(`Hello ${name}, how are you ?`);
}

(function() {
  console.log("before printing names");
  const names = ['john', 'jane', 'joe'];
  names.forEach(async (name) => {
   //does not wait here
    console.log(await greet(name));
  });
  console.log("after printing names");
})();
/*
before printing names
after printing names
Hello John, how are you?
Hello Jane, how are you?
Hello Joe, how are you?
*/

More than just syntactic sugar

So far, we only know that async/await makes our code more readable, debug-friendly, and some people say it is a syntax sugar for javascript promises. Actually, it's more than just syntactic sugar.

// promise
async1()
.then(x => asyncTwo(x))
.then(y => asyncThree(y))
//other statement
console.log("hello")


//async await
x = await async1();
y = await asyncTwo(x);
await asyncThree(y);

await suspends execution of the current function, while promise continues executing the current function, adding the value to then(). There are significant differences between these two ways of performing the procedure.

Let me explain, consider the promise version, if asyncTwo() or asyncThree() throws an async error while executing the task, will it include async1() in the stack trace?

Here the promise does not suspend the execution of the current function, when asyncTwo resolves or rejects, the context is not within the promise statement. So ideally it must not include asyncOne in the stack trace. But because of the V8 engine, it does some magic here and includes asyncOne() in the context by referring to it ahead of time. But it's not free. Capturing a stack trace takes time (i.e. reduces performance). Storing these stack traces requires memory.

This is where async/await beats promises in terms of performance, because the execution of the current function will be paused until the awaited function is completed, so we already have a reference to that function.

Summarize

This is the end of this article about asynchronous waiting in Javascript. For more relevant Javascript asynchronous waiting content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!