Mastering Async And Await in JavaScript

Posted By : Kamlesh Pandey | 30-Aug-2021

 

 

Deep Concepts Of Async & Await in Javascript

 

 

JavaScript is a synchronous language!

 

This means only one operation can be carried out at a time (i.e single-threaded). Also, there are some ways JavaScript provides us with the ability to make it behave like an asynchronous language. One of them is with the Async-Await clause.
 

 

What is async-await?

 

Async and Await are extensions of promises. First, you should clear the concepts of Promises(Future) before coming to async/await.

 

Async

 

Async functions enable us to write down promise-based code as if it were synchronous, but without blocking the execution thread. It operates asynchronously via the event loop. Async functions will always return a value. Using async simply means that a promise will be returned and if a promise is not returned, JavaScript automatically wraps it in a resolved promise with its value.

 

async function firstAsync() {
  return 23;
}
firstAsync().then(alert);

 

Output: 23

Running the above code gives the alert output as 23, it means that a `promise` was returned, otherwise the .then() method simply would not be possible.

 

Await

 

The await operator is used to asynchronously wait for a Promise to complete. It can only be used inside an async block. The keyword `await` makes JavaScript wait until unless the promise returns a result. It has to be noted that it only makes the async function block wait and not the entire program execution.

The code block below shows the utilization of Async and Await together.

 

async function firstAsync() {
    let promise = new Promise((res, rej) => {
        setTimeout(() => res("Now it's done!"), 1000)
    });

    // wait until unless the promise returns us a value
    let result = await promise;

   
    // "Now it's done!"
    alert(result);
    }
};

firstAsync();

 

Things to remember when using Async Await

We can’t use the await keyword inside regular functions.

 

 

 Syntactical Error 
function firstAsync() {
  let promise = Promise.resolve(10);
  let result = await promise; // Here Syntax error
}

 


To make the above function work properly, we need to add `async` before the function `firstAsync()`

 

 

Async Await makes execution sequential

Not necessarily a foul thing, but having paralleled execution is much much faster.

 

For example:

async function sequence() {
  await promise1(50); // Wait 50ms…
  await promise2(50); // …then wait another 50ms.
  return "done!";
}


 

The above takes 100ms to completely finish, not an enormous amount of time is taken but still slow.

This is because it is happening in sequence. Two promises are returned, both of which take 50ms to finish. The second promise executes only after the first promise is resolved. This is not at all a good practice, as large requests are often time-consuming. We have to make the execution parallel.

That can be achieved by using Promise.all() .

 

According to MDN:

 

Promise.all()

 

The `Promise.all()` method returns a single Promise that resolves when all of the promises passed as an iterable have resolved or when the iterable contains > no promises. It rejects with the reason of the first promise that rejects.

 

async function sequence() {
    await Promise.all([promise1(), promise2()]);  
    return "done!";
}


 

The promise.all() function resolves when all the promises inside the iterable have been resolved and then returns the result.

 

Another method:

 

async function parallel() {
   
    // Start a 500ms timer asynchronously…
    const wait1 = promise1(50); 
   
    // …meaning this timer happens in parallel.
    const wait2 = promise2(50); 
  
    // Wait 50ms for the first timer…
    await wait1; 
    
    // …by which time this timer has already finished.
    await wait2; 
  
    return "done!";
}


 

Async Await is very powerful but they are available with caveats. But if we use them properly, they assist to make our code very readable and efficient.

 

Let's join up next Blog On Promises in javascript & Comparision with async/await.

 

 

About Author

Author Image
Kamlesh Pandey

Kamlesh has an ample amount of knowledge in Cross-Platform mobile application development. Being very dedicated towards his work & Having a very good understanding of flutter, he is a great one to have in one's team.

Request for Proposal

Name is required

Comment is required

Sending message..