‫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
‫and 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 then 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 and
‫before it, and then let's call it or get todos.
‫Then let's just grab this part here
‫and I will actually now comment all of this out here.
‫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'll then immediately move here,
‫move here, and move here.
‫It'll, 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 locked
‫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 here 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 a res
‫inside this callback function because, well, the response
‫of the fetch is the data that is passed into this callback.
‫So, basically the response is this res.
‫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 res.jsn.
‫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 while JavaScript here simply defines the function,
‫then it derives 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.
‫Well, 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 logged
‫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 todos are going to be.
‫And so simply, todos 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 wanted 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 'cause 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 yeah, then use them in a flow
‫that looks just like synchronous code.
‫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
‫onto the actual complete and ultimate React course.