07 Mar How to use Async Await in JavaScript.

JavaScript is a bit like The Faceless Men of the programming world.

It can be Asynchronous. It can be Functional. It can be Object-oriented. It can be Client-side. It can be Server-side. The list goes on.

This article will focus on Asynchronous JavaScript.

But wait, JavaScript is a synchronous language!

This means only one operation can be carried out at a time. But that’s not the entire picture here. There are many 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

Async functions enable us to write 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 implies that a promise will be returned, and if a promise is not returned, JavaScript automatically wraps it in a resolved promise with its value.

JavaScript

1

2

3

4

5

6

7

async functionfirstAsync(){

return27;

}

firstAsync().then(alert);// 27

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

Await

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

The code block below shows the use of Async Await together.

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

async functionfirstAsync(){

let promise=newPromise((res,rej)=>{

setTimeout(()=>res("Now it's done!"),1000)

});

// wait until 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 of regular functions.

JavaScript

1

2

3

4

5

6

functionfirstAsync(){

let promise=Promise.resolve(10);

let result=await promise;// 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 bad thing, but having paralleled execution is much much faster.

For example:

JavaScript

1

2

3

4

5

6

7

async functionsequence(){

await promise1(50);// Wait 50ms…

await promise2(50);// …then wait another 50ms.

return"done!";

}

The above takes 100ms to complete, not a huge amount of time but still slow.

This is because it is happening in sequence. Two promises are returned, both of which takes 50ms to complete. The second promise executes only after the first promise is resolved. This is not a good practice, as large requests can be very time consuming. We have to make the execution parallel.

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

According to MDN:

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.

Promise.all()

JavaScript

1

2

3

4

5

6

async functionsequence(){

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:

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

async functionparallel(){// Start a 500ms timer asynchronously…

constwait1=promise1(50);// …meaning this timer happens in parallel.

constwait2=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 come with caveats. But if we use them properly, they help to make our code very readable and efficient.

I hope you have learned something new! If you found this article useful, be sure to share, clap, follow and support!