Simplifying JavaScript Promises with Async/Await

The async and await keywords in JavaScript simplify working with promises, making asynchronous code easier to write and read.

Using Async

Adding the async keyword before a function declaration automatically makes it return a promise.

Example Using Async:

async function myFunction()
{  return "Hello";}‍// Using the returned PromisemyFunction().then
(  value => console.log(value) // Prints "Hello");‍

This is equivalent to manually returning a resolved promise:function myFunction()

{  return Promise.resolve("Hello");

}

‍

Using Await

The await keyword is used within an async function and pauses the execution of the function until a Promise is resolved.

Basic Usage of Await:

async function displayMessage() 

{  let myPromise = new Promise(resolve => 

{    setTimeout(() => resolve("I love You !!"), 3000); 

});  

document.getElementById("demo").innerHTML = await myPromise;}‍

displayMessage();

‍

Here, displayMessage waits for myPromise to resolve before continuing execution.

Implementing Async/Await Without Reject

Often, you may only need to handle a resolved promise, omitting the reject function entirely.

Example Without Reject:

async function displayMessage()

{  let myPromise = new Promise(resolve =>

{    resolve("I love You !!");  });

document.getElementById("demo").innerHTML = await myPromise;

}

displayMessage();

Practical Examples Using Async/Await

Async/Await can be especially useful for handling operations like timeouts or HTTP requests.

Waiting for a Timeout with Async/Await:

async function displayAfterTimeout()

{  let myPromise = new Promise(resolve =>
{    setTimeout(() => resolve("I love You !!"), 3000);  

});

document.getElementById("demo").innerHTML = await myPromise;}

displayAfterTimeout();

Fetching a File with Async/Await:

async function getFile() { 

let myPromise = new Promise(resolve => 

{ 

let req = new XMLHttpRequest();    

req.open('GET', "mycar.html");    req.onload = () =>

{   
if (req.status == 200) {      
resolve(req.response);     

} else 

{        resolve("File not Found");   
}   
};    req.send();  });  
document.getElementById("demo").innerHTML = await myPromise;}

getFile();

Browser Support

Introduced in ECMAScript 2017, the async and await keywords are supported in major browsers:

• Chrome 55+
• Edge 15+
• Firefox 52+
• Safari 11+
• Opera 42+

Summary

The async and await keywords enhance the readability and maintainability of asynchronous code in JavaScript. By handling promises in a more synchronous manner, they help avoid the complexities associated with traditional promise chains and callbacks.

‍