Hi everyone, welcome back. In this module, I will be discussing Async and Await in JavaScript. If you want to know about what are promises in JavaScript, then you can refer to our previous module in which I have discussed it. So, let’s get started to know Async and Await in JavaScript.
Async and Await in JavaScript
In JavaScript, async & await is an extension of promise. It is used for making promises easier to write. It was introduced in ECMAScript 2017 or ES8. The async & await act as syntactic sugar on top of promises. They make the JavaScript code appear to be synchronous, but it’s asynchronous and non-blocking.
Using async/await, debugging JavaScript code becomes easier compared to promises because it seems like synchronous code, but in reality, it’s an asynchronous code. The browsers that async/await are Google Chrome 55, Microsoft Edge 15, Mozilla Firefox 52, Safari 11 & Opera 42.
Async keyword in JavaScript
The keyword “async” is used before the function keyword when defining a function and making a function always returns a promise on execution. Let’s see a syntax & one example to understand it better.
Syntax
async function function_name()
{
// body of function
}
<!DOCTYPE html>
<html>
<body>
<h1> Async/Await in JavaScript </h1>
<script>
async function fun() {
return "Async keyword";
}
// OR
async function fun() {
return Promise.resolve("Async keyword");
}
console.log(fun());
</script>
</body>
</html>
We can capture the promise and extract value from it in the above code since the value returned is a promise. Using “then”, we may attach a callback function with the promise.
For example,
<!DOCTYPE html>
<html>
<body>
<h1> Async and Await in JavaScript </h1>
<script>
async function fun() {
return "Async keyword";
}
fun().then((data) => {
console.log(data)
});
</script>
</body>
</html>
Async Function Expression in JavaScript
Syntax
let function_name = async function(){
// body of function
}
<!DOCTYPE html>
<html>
<body>
<h2> Async and Await in JavaScript </h2>
<script>
let fun = async function(){
return "Async Function Expression";
}
fun();
</script>
</body>
</html>
Async Arrow Function in JavaScript
Syntax
let function_name = async () => {
// body of function
}
<!DOCTYPE html>
<html>
<body>
<h1> Async and Await in JavaScript </h1>
<script>
let fun = async()=>{
return "Async Arrow Function";
}
fun();
</script>
</body>
</html>
Await keyword in JavaScript
The keyword “await” is used before a function, which makes a function wait for a promise to return a value. We can only use await inside the async function.
Syntax
let value = await promise;
<!DOCTYPE html>
<html>
<body>
<h1> Async and Await in JavaScript </h1>
<h2 id='message'></h2>
<script>
async function fun()
{
var promise1 = new Promise(function(Res, Rej){
Res("Hello, World!!");
});
document.getElementById("message").innerHTM = await promise1;
}
fun();
</script>
</body>
</html>
There would be a syntax issue if we tried to use await keyword in a non-async function or regular function. For example,
<!DOCTYPE html>
<html>
<body>
<h2> Async and Await in JavaScript </h2>
<script>
function fun() {
let promise = Promise.resolve('Hello, World!!!');
let result = await promise;
// SyntaxError: await is only valid in async functions.
}
fun();
</script>
</body>
</html>
When the Await and Async keywords are used together, the main thread will not continue to execute further until the asynchronous portion of the application has been completed, giving the thread synchronous behavior. Thus, Await and Async in JavaScript have introduced synchronous behavior to the Execution.
I hope this module will be beneficial & now you have got some basic knowledge of Async and Await in JavaScript. In the beginning, it will take some time for you to understand it properly, but by practicing it, you will get to know about it. In the next module, I will be discussing Destructuring in JavaScript. You can refer to our website for other exciting & valuable modules like this.
