Async! Await! JavaScript.

Share the article on LinkedIn!
Original article on medium
JavaScript is like the faceless men of the programming world.

Source:google.

It can be A synchronous /F unctional /O bject-oriented /C lient-side/ S erver-side and the list goes on…

This article will about the former- Asynchronous JavaScript.

JavaScript is a Synchronous Language!

😱😱😱 But I thought that this article was about Asynchronous JavaScript.

JavaScript is a synchronous, blocking & single-threaded 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 to make it behave like an Asynchronous Language. One of them is with Async-Await clause.

What is async-await?

Async and Await are extensions of promises. If you are not clear with the concepts of Promise, you can refer my previous post Truly Understanding Promises.

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 asyncsimply implies that a promise will be returned, and if a <non-promise> is returned, JavaScript automatically wraps it in a resolved promise with its value.

async function firstAsync() { return 27;}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 would not be executed.

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 is to be noted that it only makes the asyncfunction block wait and not the whole program execution.

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

async function firstAsync()
{
let promise = new Promise((res, rej) => { setTimeout(() => res("Now it's done!"), 1000) }); let result = await promise; // wait until the promise returns us a vslue alert(result); // "Now it's done!"}}
firstAsync();

Snags in using Async Await

We can’t use awaitkeyword inside regular functions.

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

To make the above function work properly, we need to add asyncbefore the function firstAsync();

Async Await makes execution sequential

Not a bad thing per say, but having paralleled execution is much much faster.

Example-

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

The above takes 100 ms to complete, not a huge amount of time but still slow. It is because it is happening in sequence. 2 promises are returned both of which takes 50 ms to complete. The second promise executes only after the first promise is resolved. It is not a good practice, because for large requests it 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()

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

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

Another method-

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

Async Await are very powerful but they have their own caveats. If we use it properly it makes our code very readable and efficient.

Hope you learned something new.

Source: Google

Source: Google

Clap Follow Support.

Google

Original article on medium.