Name: JavaScript Async Await
Uploaded: 2020-03-28T16:36:03.000Z
Duration: 7 min 31 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

The comparative

today, we're gonna be looking at how it can use a sink await to make John Musker promises easier to work with before we dive into what this code actually does.

Modal verbs - A2

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 a sink and a weight since a sink and a weight is really just sent, tactical sugar wrapped around, making promises easier to work with.

The imperative

So let's look at the code that we already have in place.

The first function make request returns a promise that we'll just fog making a request.

And then it'll resolve successfully if you send in a location of Google or it'll 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 into it and it'll 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 coat and changes to use a sink, a wait and see all of the advantages and disadvantages of doing so.

I just want to call the make request function, and we're going to pass it and Google, for example, since we know that that will make it succeed, and then we could just use dot Then, since we're using the promise here we have our response to that is going to be returned by our promise, which is just in our case, a string here.

Google says hi and inside here, what we want to do is just log out so that we know that we're here.

We just want to say consulate 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 their request.

In essence, we're using promises we and actually return this promise so that we can use it in our chained than down here.

So we just use our then and then we're going to get the response of whatever process request returns.

It's 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 just council about log processed response.

And now if you say that you see making a request to Google response received process in the response, and then our extra information tacked onto our response, which means that all of our different code has executed in order, just like it should.

And it's all waiting for the previous code execute before going on to the next code, which is exactly what we want.

The last thing we need to do because we didn't want to add it catching here to catch any heirs that we've potentially get.

And we're gonna walk out those airs 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 of Facebook and then we get an air 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 Ben inside of our second dot Ben, we can't do that very easily.

Promises we have to create a variable out here, call it something, and we would have to assign something, too.

But with a single weight, we don't actually need to worry about that.

Let's do this a circuitously with a single weight.

The first thing you need to know about a sink away 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.

What is gonna call it do work Doesn't really matter what it's called.

Inside of this function is where we're gonna put all of our any sinking this code.

But we need to tell Josh that this function is a synchronous so that it will know how to handle the weight sequences that we put inside of it.

All we need to do is call are different methods.

So, for example, we wanna call, make request, enrichment, passing Google.

And in here we just need to say a wait and this key word await Pretty much says the code should wait until this make request is finished.

And then afterwards it will execute the next thing.

And this function make request is just going to return the resolve section of the promise.

So we could just say that and hear the response is going to be equal to a waiting this make request function.

And because we have this inside oven asynchronous function.

Once javascript hits this await statement, it will just leave this function, do other work inside of the program.

And then as soon as this make request finishes executing it will come back into here, return the result into this response variable.

So now we can just take our concert out Log added back in here so we can set the response was received As soon as we get to this section, it means that this has finished executing and then we can call our next statement, which is going to be processed request, and here would have 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 off processed response equal that we need to make sure we await the return of this function.

And then lastly, all we need to do is take our final concert wog 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 a long process response.

So now all we need to do is call that function, remove all of our asynchronous code for dot Ben and promises up here.

And if we say that you see making a request to Google response received process in response, and an extra information is added on to our response.

So this do work a sinking dysfunction or 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 Ares?

Think 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 uncaught air and that's not what we want.

So the way that you can solve this in a sinking dysfunctions is by using a try catch block on.

Essentially, all you do is you use the keyword try and inside of the brackets that come after all you do is you put all of the coat that could potentially fail anything that can throw in error you put inside of this block and then you use catch block afterwards, which again is two brackets, and this will just take a parameter.

And then in here, you can do whatever you want to do for catching your air.

In our case, we're just kind of want the air that gets returned, and now all of the code inside of this tri section is going to be executed.

And if there's any air 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 area is getting logged of, we can only talk to Google, and now we have a fully functional a sink await version off 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 things to make sure that you do when you're using a sink await is that you must wrap your code inside of a function, whether it's an anonymous function and aero function or normal function like this.

It doesn't matter, but you need to have it wrapped in and function with that ace inky word at the beginning of the function definition.

You also need to make sure that you're using the await key word before all of your different code that's going to be a synchronous.

Otherwise, it will just return the promise and not actually return the result of that promise being executed.

Other than that, a sink a weight 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 enjoy this quick video about a sink and a weight and how it could be used to make your promise an asynchronous code.

Make sure to check on my other job script related videos linked over here and subscribe to my channel for more videos.

 Thank you guys very much for watching and have a good day. 