JavaScript Async Await

today we're going to be looking at how we can use async/await to make JavaScript promises easier to work with before we dive into what this code actually does if you don't already understand how promises work make sure you check out my JavaScript promises video linked in the cards and the description below before you come back to this video because you need to understand promises before you can understand how to use async and a weight since a sink and a weight is really just syntactical sugar wrapped around making promises easier to work with so let's look at the code that we already have in place we have two functions here the first function make request returns a promise that will just fog making a request and then it will resolve successively if you send in a location of Google or it will reject if you do not and then our second function here process request is a very simple request that just adds a little bit of extra information onto the string that you pass in to it and it will always resolve so let's look at how we would call these functions using promises and then we're going to go through and take that code and change it to use async await and see all the advantages and disadvantages of doing so so let's first write it out we just want to call the make request function and we're just going to pass it in Google for example since we know that that will make it succeed and then we just use Ben since we're using the promise here we have our response that is going to be returned by our promise which is just in our case a string here Google says hi and inside of here what we want to do is just log out so that we know that we are here we should want to say console dot log that the response has been received and then we just want to call our process request which is going to process the response that we get from that request so we just pass it the response here and since we're using promises we need to actually return this promise so that we can use it in our chained then down here so we just use our Bend and then we're going to get the response of whatever the process request returns so in our case what does call this process response and in here all we want to do is actually log our response that we got so this console dot log processed response and now if you save that you see making requests to Google response received processing the response and then our extra information tacked on to our response which means that all of our different code is executed in order just like it should and it's all waiting for the previous code to execute before going on to the next code which is exactly what we want the last thing we need to do is we just want to add a catch in here to catch any errors that we potentially get and we're just gonna log out those errors so we'll just log the air here so for example if we tried to query Facebook instead of Google and we say that you say making a request to Facebook and then we get an error saying we can only talk to Google and that's exactly what we want and if you look at this code it's really not too bad but we can make it a lot easier to understand without having all these dot bends and the nesting inside of them and if for example we needed to use a parameter inside of this first dot then inside of our second dot then we can't do that very easily with promises we'd have to create a variable out here call it something and we would have to assign something to it but with async await we don't actually need to worry about that so down here below this make request let's do this asynchronous Lu with async await the first thing you need to know about async await is that you need to have some kind of function that you're awaiting code is inside of so you're gonna create a function we're just gonna call it do work it doesn't really matter what it's called inside of this function is where we're going to put all of our any synchronous code but we need to tell JavaScript that this function is asynchronous so that it will know how to handle the e weight sequences that we put inside of it so instead of here all we need to do is call our different methods so for example we want to call make requests and we're gonna pass it Google and in here we just need to say a weight and this keyword a weight pretty much says the code should wait until this make request is finished and then afterwards it'll execute the next thing and this function make request is just going to return the resolve section of the promise so we can just say that in here the response is going to be equal to awaiting this make request function and because we have this inside of an asynchronous function once JavaScript hits this await statement it'll just leave this function do other work inside of the program and then as soon as this make request finishes executing it'll come back into here return the result into this response variable and that's perfect so now we can just take our console dot log add it back in here so we can say that the response was received as soon as we get to this section it means that this has finished executing and then we can our next statement which is going to be processed request and here we'll just put in that response variable that we have from above and again we need to do the exact same thing so we can set this variable of processed response equal to that and we need to make sure we await the return of this function and then lastly all we need to do is take our final console.log put it in the bottom here because now we know as soon as this process request is finished waiting it'll come down here and long process response so now all we need to do is call that function remove all of our asynchronous code for Ben and promises up here and if we say that you see making a request to Google response received process and response and an extra information is added onto our response so this do work asynchronous function where it's exactly the same as our promises and as you can see it looks a lot neater but you may be wondering how do we handle errors like we use the dot catch for because for example if we change this to be Facebook for example instead of Google and you say that we see that we get an uncaught error and that's not what we want so the way that you can solve this in asynchronous functions is by using a try-catch block it's actually all you do is you use the keyword try and inside of the brackets that come after it all you do is you put all of the code that could potentially fail anything that can throw an error you put inside of this block and then you use a catch block afterwards which again is two brackets and this will just take a parameter in our case it'll be error and then in here you can do whatever you want to do for catching your error in our case we're just going to log the error that gets returned and now all of the code inside of this try section is going to be executed and if there's any error along the way it's going to immediately leave and call the code inside of the catch section so now if we say that you see that our error is getting logged of we can only talk to Google and now we have a fully functional async await version of our code up here that does exactly the same thing but it's much easier to reason with and looks much more like synchronous code even though it's actually asynchronous code the biggest thing is to make sure that you do when you're using async await is that you must wrap your code inside of a function whether it's an anonymous function and arrow function or a normal function like this it doesn't matter but you need to have it wrapped function with that async keyword at the beginning of the function definition you also need to make sure that you're using the awake keyword before all of your different code that's going to be asynchronous otherwise it'll just return the promise and not actually return the result of that promise being executed other than that async await is just like promises and pretty much every other way all it does is make it easier for you to write promises and work with promises in your code so I hope you guys enjoyed this quick video about a sink and a weight and how it can be used to make your promise and asynchronous code easier to reason with and to write if you guys did enjoy this video make sure to check out my other JavaScript related videos linked over here and subscribe to my channel for more videos just like this thank you guys very much for watching and have a good day

Channel: Web Dev Simplified

Views: 385,805

Rating: 4.9464259 out of 5

Keywords: webdevsimplified, javascript async await, async await, async await js, async await javascript, js async await, javascript async, javascript await, javascript async await tutorial, async await tutorial, async await tutorial javascript, js async await explained, js async await tutorial, js promises vs async await, javascript async explained, js async, js async function, async await simplified, async await easy, async await explained, async, await, javascript, javascript tutorial

Id: V_Kr9OSfDeU

Length: 7min 31sec (451 seconds)

Published: Sat Feb 09 2019