-: So now that you're super comfortable with
consuming premises and also building premises,
let's turn our attention back to actually consuming premises
that's because
since ES
2017,
there is now an even better and easier way to consume
premises, which is called a sync await.
So let me show you how it works.
So we start by creating a special kind of function,
which is an a sync function.
So in this lecture, we will basically recreate the,
where am I function that we have been building?
Where
am I
and so function,
but for now we will pass in the country again,
to make it simple at the beginning.
But as I was saying,
we now need to make this a special kind of function,
which is an a sync function.
And we do this by simply adding
a sync
here in front of the
function.
And so this function is now an asynchronous function.
So a function that will basically keep running in the
background while performing the code that inside of it,
then when this function is done,
it automatically returns a premise,
but more on that in the next video
for now,
what's important is that inside an a sync function,
we can have one or more await statements,
so, await,
and then here we need a premise.
And so we can use the premise returned from the fetch
function
and so let's know, use or API again,
to search for a country basically.
So let's see where we have some information about that.
And here we go.
So this is the URL that we have been using.
So make sure you grab it somewhere from your code.
And so here, let's now pass in this country again.
All right.
So again, this year we'll return a premise.
And so in an a sync function like this one,
we can use the await keyword to basically await for the
result of this premise.
So basically await will stop decode execution at this
point of the function until the premise is fulfilled.
And so until the data has been fetched in this case,
but now after that explanation,
you might think isn't stopping the code,
blocking the execution?
Well, that's a really good question,
but the answer is actually no, in this case,
because stopping execution in an a sync function,
which is what we have here is actually not a problem because
this function is running asynchronously in the background.
And so therefore it is not blocking the main threat of
execution.
So it's not blocking the call stack. And in fact, that's,
what's so special about a single wait.
So it's the fact that it makes our code look like regular
synchronous code while behind the scenes.
Everything is in fact asynchronous.
All right.
But anyway, as soon as this premise here is resolved,
then the value of this whole await expression that we have
here is going to be the resolved value of the premise.
And so we can simply store that into a variable.
So let's call it res
for response.
And then here we can take a look at that response.
And just to show you that this function here is actually
asynchronous.
Let's log something to the console before we call it.
So just first, because this should be printed first, right?
And then, or actually we should call the function first.
So where am I
with
Portugal?
But even by doing this,
this console dot log first will be displayed first,
because again, this is an a sync function.
And so once the function is called,
it is then loaded off to the background.
And so this Fetcher will be running in the background
without blocking or main threat.
And so the code will move on to the next line,
which is then this console dot log first.
All right.
And so
indeed we got the first
printed first
and then here,
we got the response,
but this time we got this response in this really nice and
elegant way.
So you see here that by using a sync await
or asynchronous
code here, Oh,
really looks and feels like synchronous code.
So we can simply await until the value of the premise is
returned basically.
And then just assign that value to a variable meant that is
something that was impossible before.
So before we had to mess with callback functions and dead
was true in callback hell,
but also by consuming premises with the then method.
But now with a sync await, that is just completely gone,
right? So again,
this looks now like normal synchronous code where we simply
assign values to a variable,
and that makes it so much easier and more clean.
In my opinion.
Now, before you start using a sync await all
over the place,
you need to first understand that a sink await is in fact,
simply syntactic sugar over the then method in premises.
So of course behind the scenes, we are still using premises.
We are simply using a different way of consuming them here
in this case, but what we have here.
So this is essentially exactly the same
as doing
it the old way,
basically.
So using then and then res
and then console dot log res
like we did here.
So this is exactly the same.
So let's put that here
and
comment it out of course,
because what we are interested in is indeed a sync await
right now.
So now that we know how a sync await works,
it's time to actually recreate the, where am I a function?
So first off we need to get the Jason
out
of this response,
right?
And so remember on the response,
we need to call
Jason
and remember that this itself returns
a new premise.
And so previously we would have to return this premise
and then chain another then handler.
But now this becomes so much easier.
All we have to do is to, again,
await this and then we can store
the results directly into the data
variable that we have been using before.
Right?
And so here it is.
So here is the same data as before.
And so now all we need to do is to render it.
So render country
and data
at position zero,
and in case you skipped any of the previous videos and don't
have this render country function, for some reason,
you can simply get it from the final files of the section,
from the getup repository.
So from where you also got the starter files now, okay.
And
yeah,
there is our data
so render it
to the page here.
Great.
And all without de-chaining of premises like we had before.
So this is really elegant. One more time,
simply being able to essentially store the fulfilled premise
value immediately into a variable without having to mess
with callback functions now. Okay.
But now let's actually finish the function here with all the
other functionality as well.
So with geolocation and also reverse geo coding.
So for that,
we need to get our premise that we built before for,
for geolocation.
So this is the one here,
so let's get it.
And so
again,
a single wait is only about consuming premises.
The way that we built them is not influenced in any way.
Now, right?
So this year is going to work the exact same way.
And so let's do that here before.
And so get positioned,
remember it doesn't need any arguments.
And so, as you know,
all we have to do is to now await this and then store the
result
into a variable.
And just like before let's simply destructor this.
And in fact, let me get the code from before.
So we don't have to repeat everything.
So that was this code
and we also need
the reverse geo coding.
Right?
So let's paste all of that here.
So what we want here is to get the latitude and longitude
from position dot Codes.
So probably we should just call this zero first,
the position,
and then from position dot coordinates,
we get the lat and longitude just like before.
And then now the next one.
So now we can use these latitude and longitude and one more
time plucked then into this reverse geo coding
API.
And so now again,
it becomes a lot easier to basically chain premises
because we don't have to return anything.
We don't have to create new then methods and
we don't have to create new callback functions.
So all we have to do is to await this
and
store the results
into some variable.
So res for
a response,
but we already have that.
So that's call it geo for geo coding.
And so let's take a look at that
or actually
not yet,
because we remember that this is going to be
just a response.
And so we need to get the Jason from there
and yet another
premise,
but this is now so easy and so beautiful
to handle.
So again,
data geo
let's give it a safe just to format it a little
bit.
And I will add some comments here.
So geolocation
then
reverse
geo
coding
and then
country data.
So just to make sure that it worked,
let's take a look at
data geo
and
yes,
this is it,
right?
And so again, here at the country property, we got Portugal.
And so now we can plug that into
this URL.
So that's going to be data
geo
dot country.
And so now we can eliminate the country from here
and we also don't need to pass it in anymore.
And so,
let's reload
and we still get the same data
about Portugal because that is simply where I am right now
located.
But in case you're somewhere else, then,
you will now get the data about your own country.
So let's just take a minute and appreciate how beautiful
this data flow here is.
Let me just put this comment out here.
So we don't clutter or a sync function.
Okay.
And so we now have all of this in one nice a sync function
that runs behind the scenes until everything here is
finished.
So we are awaiting here one, two, three, four,
five premises
in a very easy way.
And code that now actually looks and feels like normal
synchronous code.
So to me personally,
this a sync await feature was really a huge,
huge addition to the JavaScript language.
Now, again,
just keep in mind that a sync await is just synthetic sugar
over consuming premises.
So it's a bit like classes in JavaScript,
which also hides the true nature of how things work behind
the scenes.
But I think that's no problem.
At least if you already know exactly how premises
and asynchronous JavaScript actually do work
behind the scenes.
And we spent a lot of time in this section
learning all that.
And so I'm sure that you will be fine.
Also a sync await is actually used a lot together with the
more traditional then method of consuming premises
as we will see in the next video.
Now, let me just tell you something,
which is when we reload too fast here,
then we should get that same error as before from the
reverse geo coding where we can only do
three requests per second or something like that.
Well, I guess I'm not fast enough here.
Ah, okay.
But here we go.
So here we have to at four or three error.
And so with this error, our whole example here falls apart.
So we get this cascade of errors here and nothing works
anymore.
And the reason for all of these errors here is because right
now we actually don't have any error handling here.
And so let's fix that in the next video.