What Is Async-Await In Javascript really means?
As the name suggests when there is an async that means u need to wait.
Why Do We Need To Wait?
because javascript is non-blocking, by default it doesn’t wait for something to be executed.
An Async
Async concept refers to that if something needs to wait it will make u aside and listen to next thing, this is how javascript work. But There are some cases where u need to wait for some execution.
Now let’s see an example where we don’t use async-await and then we can improve that example using async await
For Example :
We will build a movie theater queue without async-await. i.e. if there are 4 people in a queue and you are in 3rd position and you don’t have a ticket but your one of the friend is bringing your ticket and you make a promise to the guy that your friend will bring the ticket.
console.log("Person 1: Shows the ticket");
console.log("Person 2: Shows the ticket");
// create a promise that friend is bringing tickets
const promiseFriendBringTics = new Promise((resolve, reject) => {
setTimeout(() => { // function
resolve('ticket'); // means got the ticket
}, 3000) // execuate after 3 second
});
promiseFriendBringTics.then((t) =>{
console.log(`Person 3: Shows the ${t}`); // interpolation t = ticket
});
console.log("Person 4: Shows the ticket");
console.log("Other Person's .... goes on");
and the result will be
Person 1: Shows the ticket
Person 2: Shows the ticket
Person 4: Shows the ticket
Other Person's .... goes on
Person 3: Shows the ticket // after 3 seconds it will accept the ticket
Promise : Some More Trick’s
let’s say if you receive a ticket but your friend makes a new request to wait and get something to eat. So You Need to make another promise to wait till it gets the popcorn with the tickets.
Instead of the console.log
, we will create and return new promise name getPopcorn
const getPopcorn = promiseFriendBringTics.then((t) =>{ // new situation
console.log("we should go in !"); // some msg
console.log("friend: No am hungry !"); //some msg
// return new promise to get popcorn!
return new Promise((resolve, reject) => (resolve(`${t} , popcorn`)));
});
Now Let’s run this when you get the popcorns, so :
getPopcorn.then((t) => (console.log('Gets : '+ t))); //getting poplcorn => i.e. : data
So the output we get is:
Person 1: Shows the ticket
Person 2: Shows the ticket
Person 4: Shows the ticket
Other Person's .... goes on
we should go in!
friend: No am hungry!
Gets: ticket, popcorn
Now let’s Create another request to get some butter on the popcorn
so the flow of the execution will be like
first resolve Tickets Then Popcorn Then Final Button On Popcorn
console.log("Person 1: Shows the ticket");
console.log("Person 2: Shows the ticket");
// create a promise that friend is bringing tickets
const promiseFriendBringTics = new Promise((resolve, reject) => {
setTimeout(() => { // function
resolve('ticket'); // means got the ticket
}, 3000) // execuate after 3 second
});
const getPopcorn = promiseFriendBringTics.then((t) =>{ // new situation
console.log("Friend: Here is the ticket"); // some msg
console.log("we should go in !"); // some msg
console.log("friend: No am hungry !"); //some msg
// return new promise to get popcorn!
return new Promise((resolve, reject) => (resolve(`${t} , popcorn`)));
});
const getButterOnPopcorn = getPopcorn.then((t) =>{ // new situation
console.log("I Have Get Some Popcorn"); // some msg
console.log("Now! we should go in !"); // some msg
console.log("friend: No i need buttor on my popcorn !"); //some msg
// return new promise to get popcorn!
return new Promise((resolve, reject) => (resolve(`${t} , butter on popcorn`)));
}); //getting poplcorn => i.e. : data
getButterOnPopcorn.then((t)=>console.log("Gets :" + t ));
console.log("Person 4: Shows the ticket");
console.log("Other Person's .... go's on");
As the console.log between the promises will be executed if the promise. The code is executed perfect but the format of writing code looks ugly and little bulky to understand so we can fix it with Async-Await
Async-Await
Async
Every thing we did above we will put inside a separate function. so let’s create a separate function called preMovie. The way Async Work is any function you put async in front of it
for e.g. const preMovie = async () => {}
its becomes a async function.
const preMovie = async () => {}; // async function
preMovie(); // Executing Function
When we execute preMovie()
it returns the promise, And you know when the promise finish .then()
is used
for example :
const preMovie = async () => "preMovie"; // async function
preMovie().then((m)=>console.log(m));
Await
As we create an async function, inside that function we will create await method which will wait to execute that thing, after that the other things will be execuated mention below so here we can actually create a promise and out that we can put the stuff which needs to be executed after that only.
console.log("Person 1: Shows the ticket");
console.log("Person 2: Shows the ticket");
const preMovie = async () =>{ // async function
const promiseFriendBringTics = new Promise((resolve, reject) => {
setTimeout(() => { // function
resolve('ticket'); // means got the ticket
}, 300) // execuate after 3 second
});
const getPopcorn = new Promise((resolve,reject) =>resolve(`popcorn`)); //Create new Promise @getPopcorn
const getButterOnPopcorn = new Promise((resolve,reject) =>resolve(`Butter On PopCorn`)); //Create new Promise @getButterOnPopcorn
let ticket = await promiseFriendBringTics; // waits to execuate @promiseFriendBringTics
console.log(`Friend: Here is the ${ticket}`);
console.log("we should go in !");
console.log("friend: No am hungry !");
let popcorn = await getPopcorn; // waits to execuate @ticket
console.log(`I Have Get Some ${popcorn}`);
console.log("Now! we should go in !");
console.log("friend: No i need buttor on my popcorn !");
let butter = await getButterOnPopcorn; // waits to execuate @popcorn
console.log(`I Have Get Some ${butter}`);
console.log("Now! we should go in !");
return ticket;
}
preMovie().then((ticket) => console.log(`Person 3: Shows ${ticket}`));
console.log("Person 4: Shows the ticket");
console.log("Other Person's .... go's on");
Get More Post On JavaScript