Okay then.
So there's one more meaty subject I still want to cover in this chapter, and that is async and await.
Now, async and await are two key words in JavaScript that were recently introduced to the language.
So they're quite modern features.
And what they basically allow us to do is chain promises together in a clean and much more readable
way.
So previously when we used the fetch API, we chained a couple of promises together right here.
We got a promise back right here and we fired a function.
When that promise resolved, then we returned another promise inside and we chained that on using the
then method.
So this is fine, this way of promise chaining, and it still looks a lot better than callback functions.
But when we start to chain a lot of different promises together, then it still can start to look a
bit messy.
So using async and await, what we can do is section off all of our asynchronous code into a single
function, an asynchronous function, and then use the await keyword inside to chain promises together
in a much more readable and logical way.
So what I'm going to do is comment out all of this stuff now and come above.
And what we'll do is, first of all, create a function which is going to contain all of our asynchronous
code, all of the stuff that actually goes out to get data from somewhere.
So we're going to call this get todos and set it equal to an arrow function, much like we've seen many
times before.
So this thing right here is an ordinary function right now, but to make it an asynchronous function
using these keywords, we just pop async right here in front of the parentheses.
Now, this is known as an asynchronous function.
And whenever we call an asynchronous function, that always returns a promise regardless of what's inside
here.
So if I was to say something like const test is equal to get todos like so we would see that test now
is a promise.
So let me console.log this and preview.
So test is equal to the call of this function.
An asynchronous function always returns a promise.
So now this will be a promise even though there's nothing in here.
So we can see that right here.
Promise.
Now, then, inside this function, what we'd really want to do is do all of our asynchronous code.
We want to go out and grab data.
So to do that, we're going to use the fetch API and we've seen how to use that.
Before we'd say fetch.
And then what we do is pass in the resource we want to fetch.
That's going to be inside the to do's folder, forward slash Luigi dot Json.
And previously what we do because this returns a promise right here, we would tack on a dot then method
which fires a function inside it when this resolves and then do something with the data inside here.
Now when we're using async and await, we don't have to do that up here.
We can just use the await keyword instead of this then method.
So what I could do instead is say const response is equal to await and then we do the fetch.
So what this does is do this fetch and this returns a promise and this await keyword stalls JavaScript
right here.
It stops it from assigning a value to this variable until the promise has resolved.
Once the promise has resolved, we can take the value from that resolve function, the response and
assign it to this variable.
So that now looks like a cleaner way to do this than tacking on dot then and taking in the response
in the callback function inside that dot, then method.
Now we're stalling JavaScript until this is complete and we have that response right here.
Now when I talk about stalling JavaScript, you might be thinking this is blocking code, but remember
we're adding all of this inside an asynchronous function, and this asynchronous function in itself
is non-blocking.
So when we call this function out here somewhere that is not going to block the rest of the code, this
is returning a promise.
So all of this stuff is being handled somewhere else in the browser, so the rest of our code down here
could carry on if it wanted to.
So we're only stalling it inside this asynchronous function.
Okay then.
So now that waits here for this to resolve, then we get the response object right here.
So if we now say console, dot log and response, we should see that response object, save it and come
down here.
And now we can see this response object right here.
This promise is just from before when we're logging this to the console.
So let me delete that.
And in fact we can delete this as well.
Save it.
And we still get that response object.
So inside here we can see the status is 200.
But again, we don't see the data.
And remember, when we get a response object back from using fetch, what we have to do is use that
Json method to get the data back.
So let me now delete this instead and remember the Json method.
Is asynchronous in itself.
It returns a promise in itself.
So what we could do again is use the await keyword to chain on this promise.
So we're just going to say const data is now equal to await, and then we get the response dot Json
like so.
Because remember this right here returns a promise.
So Await is going to stall here again until this promise resolves.
Then we take the value that that promise resolves and assign it to the data variable.
So this looks a lot nicer than this stuff right here.
Do you not think instead we've just got it on two lines.
It looks much more logical and more readable, and we're still getting the same result.
We're still getting data at the end of it.
So now if we wanted to, we could say console, dot log data like so.
And we have that and we can see the data right here.
Awesome.
Now ultimately what we want to do is return this data so that when we call it, we get access to that
data.
So we're going to say return and then we want to return the data.
Now, just before we go on any further with this, the power of this await keyword is that if we wanted
to, we could chain together many of these different things.
Obviously you call the variables something different, but we could chain together many different things
that return promises and then we'd be doing them sequentially.
We'd be waiting for one promise to resolve before assigning it to this, then another before assigning
it to this, then another.
So it does each step in turn, and that's really nice.
So in a sense it's blocking inside this thing right here because we're waiting until these tasks are
done.
But because this whole function is asynchronous and it returns a promise when we use it in our code,
when we call that that function is non-blocking.
So we could do a load of stuff either side of this function and that would be non-blocking.
It would let the code carry on and we'll see that later.
For now, let's just delete these things right here because we don't need those.
We just want the first two and then we want to return the data.
So we're returning the data now.
And when we call this, we're not directly getting that data.
Remember, this returns a promise.
Any function with async in front of it returns a promise.
So if I say now const test is equal to get todos and then we say console.log test, this is not going
to be the data itself.
It's still going to be a promise because it's taking some time to do and at some point it's going to
resolve or reject.
So instead what we need to do is tack on the dot then method to this get to do's.
And I know we said the whole idea of this was to not do all of these thens, but only inside the asynchronous
function where we're doing all of our promise chaining.
We still need to do it once when we call an asynchronous function because this is returning a promise
and we don't want this to be blocking.
So we need to tack on a dot method to say, okay, well, when this promise has resolved, when all
of this stuff is done, then we'll do something and we'll take that data that we return right here.
Because when this promise resolves, this is the data that is returned to us.
So let me inside do this.
And I'm just going to say right here, console dot log and I'll say resolved and tack on the data at
the end like so now, in fact, what I'm going to do is just make this one line.
I'm going to bring this up here and take away the curly braces like so, and I'm going to move dot then
underneath because later we're going to be using the catch method underneath like this to catch any
errors.
And I just think it looks more readable when it's written like this.
So for now, let's just leave it like this.
We call get to do's.
It returns this promise.
Does all of this stuff inside, returns the data here.
So when we get that promise, we can tack on the dot then method.
It takes this data right here when it resolves, and then we're logging that to the console.
So now if we save this, this should all work and we can see now resolved and we get all of this data.
Now, as said, we demoed that this is Non-blocking.
So let me do that.
I'm going to say above it console dot log one, and then we'll just duplicate that and say two.
And I'm going to copy these two dudes and paste them underneath and we'll just scoot that in and say
three and four.
So save this and we can see one, two, three, four, then resolved.
So because this is taking some time to do this is non-blocking.
It's an asynchronous function, it starts now, finishes later and it lets JavaScript carry on with
the rest of the code while it's doing its thing.
So what have async and await really achieved for us?
Well, firstly it's bundled up all of our asynchronous code inside a function right here which we can
call and use whenever we want now.
And secondly, it's an asynchronous function, so it's not going to block the rest of the code in our
application as we've just seen.
And thirdly, it gives us a much cleaner way to chain promises together like this, which I think is
much more readable.
And the beauty of this is that we could chain as many promises together as we want, maybe to get more
data one after another.
We just follow the same pattern of using Await before each call.
Now I do want to mention before we finish up that async and await are not supported in older browsers
like Internet Explorer, but all modern browsers do support it at this moment in time and we will be
looking at tools later in the course as well to help us more with browser support.
