Narrator: After doing an AJAX call
with fetch and ES6 Promises in the last lecture,
let's now use async/await
to consume the Promises in an easier way.
So what we're interested in here is to create
an asynchronous version of this same function
that we did in the last lecture.
So, let's call this one here async function getWeather,
then A-W for async/await
and again the where-on-earth ID.
Okay, and then let's also call it,
just like we did here for the first one.
Now how do we do the code here using async/await?
Well, it's actually not hard at all.
Let's first of all copy this line of code here,
because it's going to be the same.
And so this is the one that actually fetches the data.
Now with async/await,
remember we don't use then and catch,
but instead we use await.
So we create a new variable, const result,
and then await the fetch.
So the fetch then will get the data from the server,
while the execution here in this function stops.
And then once it's done,
so once the Promise is fulfilled,
it will then assign a result of this Promise here
to this variable. Okay, and that's it.
So the execution stops here,
and then it goes to the next line.
And so what we want to do now is just like we did before,
is to then create this to json using the dot-json method.
Okay, and that's also very simple,
because it is also a Promise.
And so we are simply going to await it.
So again let me call data here
and await the result dot-json.
Okay, does that make sense?
And finally we will just log it to the console.
And let's actually remove this logging here from this one,
so that we only end up with the strings.
And here we go.
So these are our two results
for both London and San Francisco.
Great, so once again, this is working
this time with async/await.
So a much easier way, I think,
than what we had up here, okay?
Once again, because it looks like asynchronous code,
while in reality it's not.
All that really happens is that the function is called
and then in the background it runs all of this code
that we have here.
And so it's okay that the code stops here
with the await expression,
because this entire function here
is running in the background anyway.
And so it's not blocking the main thread
that's running in the JavaScript engine.
Okay, and so here we have two sequential Promises
which are both awaited, first this one and then this one.
And finally we log it to the console.
Now let's do something similar to this one here
so just that we end up with a similar structure.
And so, yeah, let's log it.
And so we are sure that everything works the same.
And so you see that for London it's the same,
for San Francisco it's the same.
Now let's just change it a bit to,
we actually want it to tomorrow,
and so we need a second element of this weather array,
so I've added here to do also tomorrow.
And then up here we can say temperatures today.
Take a look at it.
And okay, here we have an error now.
And actually that's a good time for showing you
how to handle errors with async/await.
So remember that I told you before
That in order to handle errors with async/await,
we cannot use, of course, this catch method.
But instead we use something else,
and I told you I'd show it to you later.
So now let me do that.
And so this has actually nothing to do with async/await,
but it's just something that is available to us
in JavaScript, which is called try/catch.
So let me just show you how it works,
and then I'll explain it to you afterwards.
So we basically wrap all our code into a try statement.
And so this code here will all get executed,
but if there is an error, then it will be catched.
And so we add this catch statement here.
And then we say what we want to happen
when there is an error.
And so let's once more just log the error to the console.
Okay, so this is called the try/catch statement, again,
and so it tries to execute this code,
but if there is an error,
then it will jump here to this part.
And so let's try what happens now.
Okay, and so now it doesn't really throw these errors,
so it's not red like it was before,
but it simply logged these to the console like this.
And we can also say alert instead of logging it,
and so that will likely create this window.
Okay, so now you see here that today is not defined.
And you don't see the error here in the console at all.
Okay, and so we catched that error here
with this part of the catch statement.
Okay, now let's actually fix this error that we had here.
Because it's, of course, not today but tomorrow.
And let's see what happens now.
And all right, so we have the weather
for San Francisco both today and tomorrow
and the same for London.
It doesn't really appear in the same order here.
So we called San Francisco first and London second,
but for some reason the data for London came back first,
and only then San Francisco came back.
So that's why it then happens here in this order.
But that's not a problem at all.
That's just a good proof that actually this function here
runs in the background, okay?
And so the results will not appear
in the order that they were called,
that they are here in the code.
Okay, so this is working just fine.
Now the final thing that I want to show you
is that we want to return some data from this function.
And you already know that an async function
always returns a Promise, and so let's use that.
So let's return the entire data here.
And so you already know
that what we return from an async function
will be the result value of the Promise
that this function here returns, right?
So that's what we talked about
in the last async/await lecture.
And so let's pretend that we want to actually store
this data for this London.
And let me show you how it's not going to work.
So dataLondon getWeatherAW.
And then let's try to log it to the console,
dataLondon, okay?
And again, this is not going to work,
and I want you to think why it doesn't work.
And so you already see the result here.
So again it says just the Promise here
and not really the result that we wanted.
And that's, again, because this console.log statement here
happens way before this data actually comes back.
And so we run this function at a time
where we don't already have that data.
Now if we want this to really work,
then we need to use the then method
in order to handle the result value of this Promise, right?
So let's actually do it the other way around.
So we need to declare this at a variable
that is not constant.
And so for that we use let, remember?
And we can then very simply handle
the result of the Promise. So data.
And now we can say that we want dataLondon
to be equal to the data that came back, right?
So what will happen now? Let's take a look.
And well, of course it still didn't work
because it's not undefined
because this here, of course, still happens
only after this console.log here is finished running.
So if we wanted to really log it,
then I guess we would have to make
a bigger function here.
All right, and so now it is going to work.
So that's the data for London here.
So does it make sense?
Again, this is because this async function here
returns a Promise, right?
And the data that we return from this async function
will be the result value of that Promise.
And so we can have access to it
by using the then method on this Promise here, right?
Then we can log it like we did here
and then, of course, play around with the data as we wish.
All right, so this is actually something
that we're gonna use later in the project,
and it's also important to know this here
for your own projects in the future.
And so, yeah, I wanted to really show you
how this works once again.
And so now we did AJAX calls
using both Promises and async/await.
And so you're now ready to start working
on the big project that's coming up
right in the next section.
So I hope to see you there real soon.