All language subtitles for 15. Asynchronous JavaScript AsyncAwait

So in the previous lecture we learned how to handle fetching data using promise methods.

But in this lecture, let's take it one step further and learn how to do the exact same thing with a

much nicer and cleaner syntax called async await.

So this syntax that we just learned here works really well, but it's not the most easy thing to work

with.

I would say it's not the most beautiful code in a way.

And so we can basically implement this logic here in a different way using async functions in the await

keyword.

Now, everything I explained to you in the previous lecture is still 100% valid and the whole idea behind

promises doesn't go away.

The only thing that's going to go away is these den handlers right here.

So we're going to again do it in a cleaner way.

So now instead of just doing it like this, let's create an async function.

So that's simply a function with the async keyword before it.

And then let's.

Call it or get to dos.

Okay, then let's just grab this part here and I will actually now comment all of this out here.

No.

Okay.

And so now we can, inside the async function, await this.

So await this promise immediately right here.

And what will happen then is that actually inside this async function, JavaScript will not immediately

move on to the next line like it usually does.

So as I explained in the previous lecture, JavaScript by default will always immediately move on to

the next line.

It never waits for anyone basically.

So here, as we fetch it will then immediately move here, move here and move here.

It will of course not execute these callback functions, but it will basically register them.

That's not really important.

But what is important is that we saw that immediately.

This code here was logged to the console so way before the data from the API actually arrived.

But now with the await keyword inside the async functions for the first time in JavaScript, we do actually

have a way of stopping and of pausing the code inside a function.

And by doing this it makes the function looks a lot more normal again and a lot more like normal synchronous

JavaScript code.

Because then we can very simply store the result of this year into a variable.

So let's again call it response.

And it's the exact same name as before.

So here we call the response arrays inside this callback function because, well, the response of the

Fed is the data that is passed into this callback.

So basically the response is this address.

So here we can immediately and directly call it like this in a way that is a lot more legible and a

lot more easy to understand.

And the same thing then with the data.

So we can immediately call it data and then simply await.

Rest.

Dot Json.

And then we can log it to the console.

Just like this.

And then we can call that function out here.

And there we go.

So here we get all this data that we had before again.

But of course, that waiting only works inside this async function.

So if here we again logged Jonas to the console, you would see that Jonas, of course, needs to be

logged again before because, well, JavaScript here simply defines the function.

Then it arrives here, it calls the function and immediately it moves on to the next line.

But this function here, while being executed, does actually wait, but only here inside this async

function and only in the lines that have this await keyword.

So what do you think would happen if we actually would try to return something from here and store it

into a variable?

So like returning these posts?

Well, that's not correct.

Or actually, yeah.

Data.

It's called data right here.

Now let's try to store that here into some variable.

So todos equal, get todos.

So what do you think would be locked to the console right here?

Well, we can see it here.

It is a promise.

So what's going on here?

Well, it's the same thing as before.

Right after this function is being called JavaScript immediately moves on to the next line.

It does not wait.

And so at this point here, JavaScript has no way of knowing yet what these two dos are going to be.

And so simply to dos is a promise, which means that the result value of this async function is always

just a promise.

And this is a fundamental piece of knowledge that you need to have in order to work with async functions

and with asynchronous data in general in JavaScript, because now if you want it to actually get these

todos out here, you would again have to use the then method on here, or you would have to use another

async await function.

Now you have another promise in your hands here that you need to handle.

But fortunately for us in React, that's not very common because usually what we want, as soon as we

receive some data, is to set the state so that we would do immediately here in this async function

and then we wouldn't usually return anything here.

So this was just again, showing you the synchronous and asynchronous nature of JavaScript.

So if you want to understand this a bit better, then you can go ahead and compare these two solutions

here which achieve the exact same thing and see how they are different and how, at least in my opinion,

this one is a lot nicer because it looks again like a normal function.

While this one here does not really.

So here you can easily store the result of the awaited data immediately into some variables and then

use them in a flow that looks just like synchronous code.

Now, okay.

And with this we actually finish our review of essential JavaScript for React section.

So hopefully this brought you up to speed with all the JavaScript that you need to know to be able to

now successfully complete this course.

And so now the time has actually come to really move on to the actual complete and ultimate React course.