Contents hide 1) An Async 1.1) For Example : 1.2) Promise : Some More Trick’s 2) Async-Await 2.1) Async 2.2) Await 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. Demo 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. JS 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 JS 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 : JS getPopcorn.then((t) => (console.log('Gets : '+ t))); //getting poplcorn => i.e. : data So the output we get is: Output 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 Not A Proper Format JS 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. Async Function JS 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. NOTE : Remember you can only use await function inside the async function A Proper Format JS 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 Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: Async, Async-Await, Await, JavaScript, js, promise, promise in JS