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