Let's now keep promisifying things
and this time around,
we're gonna promisify the geolocation API,
and this is gonna be really cool
because it will allow us to take the small app
that we built in the last coding challenge
to the next level.
Now we used the geolocation API before,
and so let's start by reviewing how it works.
So remember we use navigator
.geolocation.getcurrentposition,
and then this function here accepts two callbacks
where the first is for the success
and the second one is for the error.
So this first callback function
actually gets access to the position object.
So let's pass that in as an argument
to this callback function,
then let's simply log that to the console.
So this is our first callback,
and now let's create a second callback with the error.
So for example,
in case that the user does not allow the page to get access
to the current location
and so in that case,
let's just lock that error to the console
just as we did previously.
To now, just like before Andy mapped the app,
JavaScript asks us for permission here
and when we allow,
then at some point when JavaScript actually figures out
the location, then we get that data back
and so here it is,
and so again,
this is actually asynchronous behavior
in exactly the way that we have been talking about.
So the code is not blocked, which we can check here.
So we have a console.log after the geolocation.
Now part here and still, this part here is locked first
and so this one happens first
and so that's because this function here
basically offloaded its work to the background.
So to the web API environment in the browser,
and then immediately it moved on right here
to the next line.
So this is very clearly a callback based API.
So we have to pass in these different callbacks
and so this is another great opportunity
to promisify a callback based API, to a promise based API.
So let's do that
and it's actually pretty simple.
So let's create a function here
just like before with the wait function.
So get positioned
and we don't need to pass anything into this one,
and just like before we are going to return a new promise,
which we then can handle later on.
So here we pass in the executer function,
which gets access to the resolve function
and the reject function,
which remember we can use to mark the promise
as either rejected or fulfilled.
All right.
So let's actually grab this code here and paste it here
and now all we need to change
is basically what happens here
in each of these callback functions.
So remember that this one here
is the success callback function
and so it receives the position,
and so when we have success, we want to resolve the promise.
So we want to mark it as fulfilled,
and so therefore we call the result function
and we pass in that position object,
because that is actually the fulfilled value
that we want to get from this promise
in case that is successful.
So that's the whole reason
of using this function in the first place.
It is to get access to the current position,
and that is in this object
and so therefore that's what we're gonna pass into resolve,
So in the last lecture,
we just passed a simple string into resolve
because that would then be the resolved value
of the promise.
So basically the future value of the promise,
but in this case, it has this more meaningful object,
which we actually need outside of the promise here
when we handle it.
But anyway, here we do the same, but with reject.
Now to this is going to work just fine,
but we can actually make this even simpler
because if this function here automatically
calls these callback functions here,
and if it also automatically passes in the position,
then we can simply do this.
So let's copy it here
and that will comment this part.
So we can simply do this resolve and reject
and that's it.
So this is exactly the same as this one here.
So before we specified the callback manually like this,
but all we did was to take the position
and pass it down into resolve,
but here that now happens automatically.
So now resolve itself is the callback function,
which will get called with the position,
and so that's exactly what we do here,
and the same of course, here with reject,
and so now let's actually try this out.
So get position and then we want to handle the result.
So again, this is exactly the same thing
that we did previously with the fetch function,
or also with the wait function
that we created in the last lecture.
So let's now log this position to the console
and for now we don't need the catch block
and so let's see.
So it probably is now getting the position in the background
and yeah, so now we get it back.
So the promise was marked as successful
by the resolve function
and so therefore then here,
this callback was called in the den handler
and so the position was passed in and here finally,
we logged it to the console, so beautiful.
This worked just fine
and so we just promisified the geolocation API
to a promised based API now,
but now let's actually take it to the next level.
So remember how in the last coding challenge,
we built a function which received GPS coordinates
as an input, and then rendered the corresponding country.
Well, now we actually got these coordinates via geolocation
and so we don't even have to pass in any coordinates
into that function.
So let me actually get that function
from the coding challenge.
So that's this one here
and so remember here,
we passed in the latitude and longitude
and then based on that, we did reverse geocoding,
which gave us the country
that basically these coordinates belong to
and so then based on that country,
we could get all the data about the country
and then display it here on our page,
but now since we have this get positioned function,
we actually no longer need to even pass in
these coordinates
and so now we're gonna be able to build a function
that will tell us where we are in the world,
simply based on the geolocation of our device.
So how cool is that?
So we no longer needs this one
and now here this time,
we are gonna start by getting the position.
So get positioned
and then let's do something with the position.
So we already know what that the coordinates
are here in this coords property.
I just don't remember if they are an array or an object
so let's lock that to the console here for starters.
So console.log(position.coords).
All right.
And so for now, we'll just leave it at that
and we will not yet connected to this part here.
So let's run this
and probably we're gonna get an error when we run this
and actually we first need to set it up
with the event handler.
So remember that's the button and then add event listener
and of course we could also immediately run the function,
but I think that it's nice to call it
only when we click that button
and here we actually can simply pass in that function now.
So the, where am I function?
Because we don't need to pass in any arguments.
So if we click now,
so here, then we get an error that latitude is not defined,
but what we were interested in any way is get the latitude
and longitude of this coords object,
and so let's not go ahead and destructure this object.
So const latitude and longitude equals this,
but now here we call them lats and lng
and so let's do this.
So basically giving them new names
and next, all we need to do done
is to chain the next promise,
and so let's grab this code here and put it in here
and so just like before
we now simply create a new promise here, basically,
and then return that,
and so then we can handle it here in the next, den handler,
and so now we have an even longer chain, as you can see,
this one here still comes from here,
no need for that anymore
and so now let's see what happens.
So a latitude is not defined,
but that's because I got the syntax here wrong.
So in the structuring, the equal sign
is actually to set a default value.
So this is not what we want.
We want to still destruct latitude
and then we want to say that,
We basically want to create a variable called lat.
So based on that latitude, variable
and to your lng to fit this one and this one.
So let's try again,
and so it does take some time.
So in the real world,
we would have like some loading spinner,
but it works.
So we got now the country that I'm currently in,
which is indeed Portugal
and all of that was simply done using geolocation.
So again, we got to the coordinates here,
then from those coordinates, we got the location.
So the actual location with country
and so then from there,
we got all the data about the country,
and so now we have the ability of
basically displaying the flag of a country
simply based on geolocation on any device.
Now, just imagine that you would have to handle
all of these asynchronous operations here
using callback function.
So that would literally be hell.
So therefore the name callback hell,
but again, with this,
we have a really nice flat chain of promises
that's easy to handle and also easy to manage.
Now.
But anyway, with this, we saw that We can really promisify
all kinds of asynchronous stuff in JavaScript.
For example, we could also promisify,
the old XML HTTP request function
that we used in the beginning to make Ajax calls,
or also we could promisify the image loading example
that We have seen a couple of times in our slides
and actually that's exactly what we're gonna do
in the next coding challenge.