Async and Await keyword in javascript
What is the need of async-await? asynchronous function What is Async? What is Await? How Await works?
What is the need for async-await?
In Javascript, it is very important to handle asynchronous tasks without blocking the main thread. Async and await is a syntax provided to make asynchronous code more readable and in a way that looks and behaves more like synchronous code.
Importance of async-await
Here is some important facts about async-await.
We can mark a function as asynchronous using the "async" keyword and use the "await" keyword to wait for the completion of asynchronous tasks. This makes it easier to read and write asynchronous code, as well as handle errors more effectively.
Async-await makes it easier to handle 'callback hell'.
Async-await simplifies asynchronous programming by allowing us to write asynchronous code that looks and behaves more like synchronous code.
Async-await also reduces the potential for errors and makes it easier to handle exceptions and errors.
What is an asynchronous function?
An asynchronous function is a function that returns a promise, which represents the eventual completion of the operation performed by the function.
async function functionName( ) {
//Asynchronous operation
//....
Return a promise/value
};
What is Async?
The Async keyword is used to mark a function as asynchronous. The work of async is to make a function work without the need of freezing the complete program.
The async keyword is easier to link to the day-to-day tasks we do such as laundry. Imagine you need to do laundry. You can start the washing machine and then do other things while the machine is running. The washing machine is performing a task asynchronously in the background, while you are free to do other tasks.
Syntax
async function funcionName( ) {
// Asynchronous operation
//.....
//Return a promise/value
};
The async keyword is used to indicate that the function is asynchronous.
function body
It can contain one or more asynchronous operations.
Return Value
The function should return a promise that will resolve the result of the asynchronous operation.
Example
Let's make a program of asynchronous function with the 'async' keyword, which returns 'Hello'.
async function printresult( ) {
return "Hello"
};
console.log(printresult());
// Output: Promise{<state> "fulfilled", <value> "Hello"}
If we run the above code, it will log a Promise object to the console instead of the string 'Hello'. This is because the 'printresult' function is declared as an asynchronous function and therefore it returns a Promise that resolves to the value "Hello".
If we need to print the value then we must consume the promise.
async function printresult( ) {
return "Hello";
}
printresult( ).then((result)=> console.log(result));
//output: Hello
What is Await?
The 'await' keyword is used to wait for the completion of an asynchronous operation inside an asynchronous function. It can only be used inside an asynchronous function that is marked with the 'async' keyword.
How Await works?
When we use the 'await' keyword, the function is paused until the Promise returned by the asynchronous operation is resolved or rejected. The resolved value of the Promise is then returned, allowing us to continue executing the function with the resolved value.
async function printhellothreesecond( ) {
let data=new Promise((resolve,reject)=>setTimeout(( )=>{resolve("Printing:Hello");},3000));
let result=await data;
console.log(result);
};
printhellothreesecond( );
//output: Printing:Hello
In the above code, the "printhellothreesecond" creates a Promise using the "setTimeout" function to simulate an asynchronous operation that takes 3 seconds to complete. The Promise is then awaited using the 'await' keyword to wait for the operation to complete.
When the Promise resolve after 3 seconds, the resolved value "Printing:Hello" is stored in the 'result' variable. Finally, the value of 'result' is logged to the console, which outputs "Printing:Hello" after 3 seconds.