Async Await JavaScript ES7

hey guys what's up so today we're gonna learn about async/await in JavaScript I know you guys been requesting this topic for a long time and it's such a complex topic that I was really confused how to really represent it and so finally I come up with the best example so that you would understand it you know easily so what we are going to look at is how async/await works what is the real purpose of acing a rich problem it solves that you cannot solve it promises or callbacks how to do error handling what's the browser support can you do all the things that you can do with promises and async/await so again I look at all of that and welcome to Tex your tutorial all right so what is async/await really means as the name suggests when there is a sink you need to wait why do we need to wait because javascript is non-blocking so by default it doesn't wait for a sink so let me give you an interesting example for that if you go to watch a movie and there's like two people ahead of you they have the tickets ready so you you go to the ticket checker he says okay you have it they let them in but when when time comes for you you gonna be like okay I don't have my ticket with me my wife is bringing she's on her way she'll be here any second so can we just wait and the ticket checker say no I can't do that there's a line behind you so you need to step aside sir and when she comes back you can get in the line that's how Java scan actually behaves if something needs to wait it will make you wait on the side but there are cases where you wanna say okay you know what I want you to wait that's how you think await what works but let's look at an example where we don't use async/await and then we can improve that example using async/await so we're gonna build this cue the movie theater cue here without a singer wait and then see how it works okay so here person shows a ticket then comes he will show his ticket person three which is let's say me I don't have a ticket so I'll make a promise to the guy and the promise is we're gonna call it promise live ringing tix okay this is my promise and we can do new promise and this promise will take two arguments well it will take a callback function and and it will take two argument resolve and reject right and inside we can simply do it is always so for now wife is bringing the ticket so we're just gonna wait a few seconds we're gonna say set timeout and the way they set time at works is you need to provide a function that will execute after a certain amount of time I'd say three second which is 3,000 milliseconds and we are going to simply the resolved ticket right which means I got the ticket so let's look at it so you have a promise so basically why Phil bring the ticket in three seconds I mean usually it takes way longer time but you know so it's just we can't wait that long we're gonna keep three seconds okay and this is just a definition of the promise we really have to when the promise really resolves when she has a ticket then this function would get called and there will be tickets and we can simply say we can just come to lock this year instead of person to we can call it person three here and we can use a template string an insert of ticket we can interpolate this ticket here so now when she brings a ticket we'll show the ticket right and then let's say after him after that person there are a few more people and person five shows a ticket all right let's run this and see what really happens so as you can see here the pressure board one shows a ticket person two shows a ticket then three because it's a promise it doesn't wait I let the person for in and five in and then person three his wife comes back with a ticket it will show the ticket right so this is how it doesn't wait for anything that is a sync but in this case we don't want to wait anyway we want to let the person four and five go ahead of person three because if we block it then everything else the queue would basically stop and it's not a good idea okay so what are the cases where you want to have async/await alright so now let's modify this to make it a little bit more critical so now she brings a ticket to you that doesn't mean you can just go in directly because she is hungry she wants to eat something right so even though she brought the ticket now you have to go get some food so you make her a new promise that you're gonna get some popcorn so let's do that so inside this then function we are not going to simply say console.log show the ticket we're gonna we're gonna make another promise call get popcorn get popcorn equal two and we're gonna return our promise here husband is saying we should go in wife is saying no I am hungry so now he cannot go in so he has to make a promise so he will return a new promise so here we're gonna have also resolved reject and then it's simply going to say alright let's resolve in one line now let's run this so when when when the husband gets a popcorn so popcorn then then you get the status back from the resolve and so you would simply say console.log tea right so let's run it now see what happens all right so the answer is the first person one walks in two walks in four and five three doesn't walk in and then you know the tickets are arrived so the husband say we should go in wife says no I'm hungry so then her husband basically goes gets a popcorn and they walk in with ticket and popcorn okay but it's not done yet no wife says okay I need someone on the popcorn so we gonna have to it make another promise so let's quickly make another promise and husband this time say we should go in and wife says I need butter on my oh all right and this would be Const get butter all right so we have another promise get butter but it only happens after you get the ticket you get the popcorn and then you have butter right you can't have butter without popcorn all right I think that's about it so now let's resolve this so would say get butter dot then and simply you would whatever the resolution is you would just simply print this console dot log auntie all right so actually one thing we need to add is once we get the ticket so the wife would say say here's a ticket I have the tickets and then once you get the popcorn the husband would say I got some all right alright let's see now what happens alright so person 1 2 4 5 goes in white says I have the tickets when she arrives husband said we should go in wife says no I have I'm hungry husband said ok I got some popcorn we should go in wife says no I need some butter and then he gets a butter and then we have ticket popcorn and butter so everything is fine but now this looks so ok and all the statements here inside the console.log that should only happen after you get the tickets this this console.log should only happen after I get the popcorn so I cannot really put them in between otherwise you would get him before even you'll get them looks very ugly so we can fix it with a sink away alright so what we're gonna do instead of this mess I'm just gonna create another fiddle so after person 1 and between person 1 2 & 4 everything that we did you know getting the ticket getting the popcorn and adding the butter I'm gonna put into a separate function because we already need know that those things needs to happen one by one right they need to wait so we can use those and from that information and then create an async function we're gonna call it pre movie I couldn't come up with a better name so we're gonna call it pre movie and it's a function right and the way async works is any function if you put put just async in front of it it becomes an async function all right so we're gonna execute it and let's put some message here we're gonna unlike a regular function a sing function always returns a promise so when I execute this function it returns a promise and you can know when the promise finish using then as we already know that so I'm just gonna say then well here I should just return this and not the console.log and here I would get this argument here so I'm just gonna say message and I'm just going to console.log that message here okay so let's understand that there is a a sing function this is actually function a sing function expression because I'm saving in a variable okay that's why it's a it's a function expression and it returns this text called pre movie and inside when and because the async function returns a promise I have to use then to actually execute it and then wait for it to finish here and X you get right away right because I don't have any delay or anything right and it would bring that console.log here so now if I run this alright so when I run this I would say person 1 2 4 5 and then I get the pre movie so obviously this this happens at the line that's how we want it but within this async function we don't want anything to wait so now what we're gonna do we're gonna move things into this async function one by one okay and then make it so nice and clean inside the async function you can tell the the promise execution and then wait for the next execution to happen so the way it works is you would use this promise and then I would use a way in front that is it and whatever it resolves it I can get it here so I'm going to say let ticket equal to this song would get this ticket back here okay and a member a weight function you only can use it inside an async function otherwise it would not work you cannot use it in a regular function okay you can only use it inside of async function body and I can simply here return the ticket so now let's run this alright so one two four five people and then I get the ticket okay so now because I'm using a weight so if I if I put any console.log after this it won't execute right away it has to wait for this to finish before it executes that console so remember before we used to have something like this right but that wife has a ticket so I can bring those things out so I'll do that and then the promise I can actually define and this time I don't really need to do this then remember I don't have to use then so it will be simply get popcorn equal is a new promise so I can actually put it in one line like this and then if I want to call this get popcorn I would simply use another await function so it's in that pop corn equal to a weight and a weight get popcorn and I don't I don't really need to use that then as you can see here and so this would give me the popcorn here then the next thing I would need to do is these statements and since this would wait till I get the popcorn I can just console.log this here and then my next promise is going to be add the butter right so I can also just copied here and this would give me butter this would give me butter and I can just do this here so I can simply use string interpolation so for the popcorn this would be for if you don't know what string interpolation is I have a tutorial on it I'll provide a link here alright so and then once we have the once we added the butter we can say husband would say I got some butter and the husband says anything else darling wife says let's go we are getting late and husband says thank you for the reminder and then he grins physically makes a face alright so now we have everything and the next thing we want to do is now remember the whole async function returns a promise which is nothing but the ticket so we can here we can also do string interpolation so this would say three shows dollars I think we're gonna have to get the ticket back here right so all right so we have person 1 2 4 5 going in then wife says you know I have the tickets husband said oh we should go in wife says no I'm hungry husband says I got some popcorn a Spencer we should go in my wife says no I need the butter in my popcorn then s1 says oh I got some butter on the popcorn anything else darling right so let's go we're getting late husband says thank you for the reminder I've been telling you this for a long time and then they show the ticket and they find it enter the theater so look all of this looks kind of meaningful right because you can you can do things this looks like a synchronous code in an asynchronous world because it waits right and that's the beauty of it and it's readable it makes sense when you read it and you understand what exactly going on other than this code where you have to really understand oh this is a promise here this is over here this is a promise here this gets resolved here now after they get the tickets there they're getting popcorn and then the butter because it's kind of interdependent right but what if you want to get three different things they're they're not dependent on each other so let's say get popcorn and then instead of adding butter we can say get candy all right and we might want to get some coke so I'm just gonna say get and you return the coke right so we have three separate promises okay so after getting the tickets let's remove all the console logs instead of getting things one by one let it now what if you want to get resolved the whole thing when everything it's done right because husband could be getting the popcorn wife could be getting the candy and the cow so we don't have to wait for one thing to finish and when we get everything then we resolve it right so here instead of getting popcorn we would simply say oh wait promise dot all and in simple provide an array of all the promises that we want to resolve right so we would have first get corn then get candy and get coke here the order doesn't matter because you could be doing things in parallel because you have three things it returns three items right popcorn candy and coke here right and in the end I can write console.log with all three items so I would say down candy coke alright alright so now person one two four five then you get popcorn candy and coke and then you get person three shows a team so alright now what about the error handling usually in the promise you know you would say resolve and reject and then you know you can have a catch for the reject and then you know you can write the error message or whatever it comes back from the server right as it has an error so how do you deal with that here because you cannot now use it because these are not regular promises and that you're calling you're just calling here you know oh wait and you right now if error happens on this line let's say wife never comes back with the ticket and after one hour husband says okay I need to reject it because I can't go to the movie right so we can simply use the good old try-catch so we would simply do this try and put the ticket here and usually I can do something else but I'm just gonna say tick it equal to yeah let's call it sad face because I can't watch the movie but I cannot use a lot to let's hear so what I'll do here is define the lead up here defy the ticket up here and then assign the value here okay so right now it's it's resolving but instead you can reject it here to see if it works right so person one two two four five shows a ticket and the person three shows a sad face so this is how you deal with the errors one of the practical example that I often use async await is testing all right so let's remove all this stuff here and I'll quickly show you how to do it so instead of pre movie I am let's say testing some user form or something okay and in order to test it I have to first load the user form let's say this is this is maybe end to end test right so I need to first load user form right until I load the page I cannot really click on anything so which returns a promise let's say page loaded after that I can write another promise where now I can click on something so or let's say I enter user name it just basically returns what this should be resolved and it says user entered okay and then I have some function basically let's say Const verify user details okay it will equal to some function and basically what it does is it goes and checks now the user profile is loaded since I load the the user and and I the page and then enter the user and maybe I'm clicking on a button or something okay next and then it loads the user profile so now I can check if the profile is loaded or not by using some sort of selector right so here I would simply do a weight load user form then once it's loaded I can say wait enter user name and then I can verify the user detail okay for that I don't need to wait because that's the last thing but this won't happen until this two are because they are of eight right and I don't need to return any ticket and then this would be showing the show the results okay something like that but as you can see it looks so neat you can say lowered the form enter the name and verify the detail it's it makes sense there's no nested things going on here and so things look asynchronous not and by the way if you want to know more about other JavaScript tutorial I have tons of JavaScript tutorial basic to advanced so one of these playlist is an advanced JavaScript this is a cool tutorial on promises if you you know what we covered today about the promises if you want to know about the D how promises work you can you can do it here and I have tons of tutorials in clearly a lot of Java C into questions I guess I have almost like a 50 or so tutorials on JavaScript but feel free to check it out you know it might be very helpful to you and I hope you learned something from this tutorial and if you did please like subscribe and provide a nice comment you can also help the channel via patreon and I also want to give a quick shout out to people who pledged on under my patreon so James gone off David kick and Harry come on thank you for thank you for your donation you can follow me on the Twitter and my Twitter Hendra is down here at exit 1 and you can also help me translate the video it's very easy to native language so that your countrymen can also learn something from this I'll provide a link in the description so you can check it out and thank you

Channel: techsith

Views: 94,206

Rating: 4.8154311 out of 5

Keywords: async await javaScript, Javascript await, javaScript async function, async await example, typescript async await, es7 async await, async await es7, async await explained, try catch async await.

Id: IGoAdn-e5II

Length: 26min 39sec (1599 seconds)

Published: Mon May 21 2018

Reddit Comments

[u/senocular]

"...JavaScript is non-blocking, so by default, it doesn't wait for async."

I found this particularly confusing. I think what is meant is, "Async operations are non-blocking, so by default, JavaScript doesn't wait for them."