What is the Async Await function in JavaScript?

In the most recent a very magnificent feature has been added to JavaScript that is an async function with the await keyword. As we know that JavaScript is asynchronous that is the calling actions will be queued and will be executed one after another. The Async/Await functionality helps to run the code asynchronously. Await async is a syntactical sugar coating to work with promises.

The async function helps us to write promises based codes that will run under the hood in an asynchronous way. The await keyword makes sure to get a value from the function while it makes the code wait and runs asynchronously. After availing the value async always return the value.

Before diving into the AWAIT and ASYNC functions lets declare some general function with promises. So basically, it will a function which will have two promises which are 1. Resolve 2. Rejected. This promises well serve the JavaScript to perform different actions on the basis of whether it is solved or rejected.

function makeRequest(food){
return new Promise((resolve, reject) =>{
     console.log(`Making dish of $(food)`);
     if(food === ‘Salad’){
       resolve(‘Salad is the dish’);
     }else{
        reject(‘Salad is not available’);
    }
  })
}

In the above code, there is a function with the argument of food, and a promise is declared which will tell whether the value or the name of the food is Salad or not. If the name is Salad then it will get resolve and will display Salad is the dish or else it will get reject and will display Salad is not available.

Now, this same thing can be done with the help of the AWAIT and ASYNC method which will make it easy, readable, and also very much faster to run.

To get started with AWAIT you need to declare a function that will have your waiting code inside and the function will start with async.

async cookFood(){

}

Inside the async function, we need to declare a function with the await keyword. This await keyword will tell the JavaScript that waits till we get the information from the function attached to the await keyword.

async cookFood(){
    const foodItem = await makeRequest (‘Salad’)
    console.log(‘Dish Received’);
}

because we are inside an asynchronous function, once JavaScript hits the await request it will move and execute the further code in your JavaScript file without any rendering issues and once the await function gets the value it will save itself in the const variable that is food item here.

While working with promises in the await and async process there might be a chance where the await function could not receive the desired value and gets an error. For this, we can use try and catch method to deal with errors.

async cookFood(){
        try{ const foodItem = await makeRequest (‘Salad’)
             console.log(‘Dish Received’);
        } catch (err){
             Console.log(‘The food is not Salad’);
};

In the above code, it will tell the JavaScript that if in case the await functions get an error value after try method then pass the value in err parameter to the catch method then display with console.log(); that the food is not a salad.

In the last, call the function whenever you need to run the async code in your JavaScript file.

cookFood();

There are various and lots of things we can perform with async and await method for better reach make sure to see the MDN Web-Docs. This plays a vital role when we are working with live server APIs. Often it will happen that the time taking process to fetch data from the servers is quite long and while using await and async process with promises, the JavaScript will run the code and will function the async and await in the backhand. Which will help the page to load without any rendering issues?