Async-Await In JavaScript

Async-Await is a very important feature of JavaScript. By default, all the javaScript operations are synchronous.

We use promises to run asynchronous operations. But for building applications, we have to write a lot of promises, which makes code messy and complex. Using async-await we can make code shorter and easily understandable.

Async keyword is used to make a JavaScript operation Asynchronous. Await keeps some asynchronous code waiting for execution.

Let’s explain async-await with an example,

const hasMeeting = false;
const meeting= new Promise((resolve, reject)=>{
if(!hasMeeting){
const meetingDetails= {
name: “Technial Meeting”,
location: “Zoom”,
time: “06.00 PM”
};
resolve(meetingDetails);
}else{
reject(new Error(“Meeting already scheduled”))
}
})
const addtoCalender=(meetingDetails)=>{
return new Promise((resolve, reject)=>{
const calender= `meeting okay`
resolve(calender)
})
}
async function myMeeting(){
try{
const meetingDetails= await meeting
const calender= await addtoCalender(meetingDetails)
console.log(calender)
}
catch{
console.log(“something wrong happened”)
}
}
myMeeting()
console.log(“Hello”)
//output
// Hello
//meeting okay

Here, we have a promise which is dependent on the value of “hasMeeting”. And we have an async function myMeeting. It is async because we declare the async keyword before the function. One problem for async-await is it has not its own way of handling reject. Reject is handled just like normal error here. As, reject occur because of errors, we used try-catch to handle the reject. Inside the try block, we used await for promise resolves. This await keyword makes the code await until the resolve is returned.

From the point of view of promise, await works like the then()/catch() of a promise. If any reject is returned it is considered as an error.

The second promise always returns a resolve.

When we call the method, as hasMeeting is false so, according to the code, the two promises will return resolves. So, no error occurred.

But when hasMeeting is true, the first promise returns a reject, which is an error. The code stops execution and goes straight to catch block, which prints “something wrong happened”.

As the myMeeting method is asynchronous, in the given code. First the console.log(“Hello”) gets executed, then the async function.

Await works a bit like blocking code. Which means the line having await will make the code wait until it gets either a resolve/reject.

One important thing, we can declare functions with only Async, because it can work independently. But Await cannot. For await, we have to declare the function as asynchronous with the keyword async.

async function hello(){
console.log(“Hello World”)
}
hello()
//output
//Hello World

More about Promises and callbacks — https://medium.com/swlh/callback-and-promises-in-javascript-ba3376b8b79c

More about blocking code — https://medium.com/@rezainfinity54/synchronous-blocking-javascript-problems-and-its-solutions-asynchrous-non-blocking-way-fadd66ab71b