Async and Await Javascript

Promises have been a little bit tricky to write which has caused a lot of inconveniences both in learning and coding. Now, there’s a super cool way to deal with promises which is a lot easier to write and it’s the async/await. Javascript introduced keywords async and await as a revision to the EcmaScript2015. It’s not just easier to write, it’s easier to understand.

In this article, I will discuss handling promises and asynchronous operations better with async and await keywords.

Before we continue, you are meant to have

1. Basic knowledge of Javascript

2. Good understanding of promises in Javascript and how it works.

The async and await keywords were introduced in Javascript to enable the use of promises easier and more comfortable. In simpler words, Async ensures a function returns a promise while await makes a function wait for a promise.

Let’s dig deeper!

An Async function is identified with the async keyword which is placed before the function. An async function always ensures that a promise is returned and if it is not returned then javascript automatically wraps it in a promise which then gives a value. The Async function always returns a promise while other values are usually contained in the resolved promise, making it far different from a regular function.

Here is the syntax for the async function:

async function name(parameter1, parameter2, …..parameterN){//statement}

Example: Async function

async function f(){
console.log('async function');
return promise.resolve(1);
}
f();

This function returns a resolved promise with the result of async function

That means async returns a promise and carries non-promises in it. Pretty good.

Now await makes a function execution wait till the promise is settled which could either be resolved or rejected. Await is used inside an async function.

Syntax for await function:

let value = await promise; //works inside async function

The await keyword causes async function execution to pause until the promise executes and also resume execution after the fulfilment of the promise. Like the literal meaning, it causes a function to a-wait the fulfilment of the promise.

Example: Await syntax

async function f(){
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("resolved!"), 1000)
});
let result = await promise; //wait for the promise to be fulfilled
console.log(result); // "resolved!"
}
f( );

Explanation: Here the execution is paused by line * and resumes when the promised is resolved with line //resolved becoming its result. The code is suspended while awaiting the promise to be fulfilled and then resumes when it has been fulfilled.

If the promise is rejected, the await expression returns the rejected value;

If the value of the syntax following await is not a promise, it is converted to a resolved promise.

It is a lot prettier using this than promise.then.

Await cannot be used in regular functions as it would throw a syntax error. It only works inside an async function.

For example:

function f(){
let promise = Promise.resolve(1);
let result = await promise; //syntax error
}

If we used async before the function, it would not have thrown an error.

This is practical proof that async is required to survive, much as ink is required for a pen to function.

Conclusion

Async and await enable a cleaner promise and ensure a flow in the chain of promise configuration. I hope you understand Await and Async, its function and how to write it. If you have any questions, kindly comment in the section below and I’ll reply to every comment.