So to dive a bit deeper into promises, let's actually also promisify getCurrentPosition.
So for this, I'll add another new function,
get position could be the name and we could pass in an argument, we could accept an argument, maybe options or
ops, whatever you want to call it
and in there we call navigator get geolocation getCurrentPosition,
so we make that call inside of get position. Now to getCurrentPosition, we need to pass in these
callbacks,
there is no way around that,
there is no promise version of getCurrentPosition.
So here I have my success callback,
you can name this piece of data you're getting however you want and I have my error callback and I'll forward
the options I might be getting here.
So now we have the callbacks in here and now the idea is that we again wrap this with a promise.
So here we can again create a promise
and again you could name this differently of course, by calling new promise. As you learned, the promise
then takes a function as an argument and this function in turn takes two functions, a resolve and a reject
function parameter
and now in here in this promise, I want to make that call and then I want to return promise here
and now we can again resolve here and maybe resolve the success object, so that we pass the data we're
getting from getCurrentPosition into our promise
so to say and wherever we listen to it with
then, we get that data, we'll take care about the error later.
Now we have a promisified version of getCurrentPosition and therefore down here, we can call get
position like this and now not pass in these two callback functions, so we can cut that and instead call
then here and here we get the success data which is my position data in the end and I can console log
position data.
So now we promisify that and therefore if we reload now and I click track me again and I click
allow, you will see this gets my position and after a while, this gets printed here.
So it works like before but now wrapped in a promise
and now we can see the power of that when we combine this with set timer. Previously,
I set my timer in here and we can still do that, I can set my timer in here once we're done basically
and then wait for 2 seconds and then here I can add
then and then I got my data from the set timer method and I can then console log posData
but now again we have some nesting here,
so this would be the not so intelligent way of doing that.
The better way is to take advantage of a concept called chaining. Here I get my position data right,
I get my position data of that promise.
Now I want to set a timer in here and therefore I can call set timer and what does set timer do?
It creates a new promise and returns it.
Now actually here, we can return this inside of this function I passed to then and what happens there
is that the overall promise which is created here basically is now set back from being resolved to being
pending,
a promise can be pending or be resolved or have an error,
so it was resolved after we got the position, now by returning something inside of that function here,
we set it back to being pending and we'll now wait for this promise here which we returned here to resolve
and I can now add a new
then block after this first one and you typically write it like this across multiple lines,
this is all belonging together here but it's simply more readable
and here I then get the data of that inner promise which in this case is the timer data I could log.
If I also needed the position data here, we could store this in some variable outside of this chain
here,
position data, so that we can store our posData in position data here and then also access position
data which is defined outside of all these functions
in this last function here,
so this is how we could pass this on as well
and now we have something which is called promise chaining.
We have multiple steps in this promise, where we wait for the first promise to finish and then we return
something new here which doesn't even have to be a promise by the way, if it would be other data like
a string, it would be wrapped into a promise automatically,
then we'll wait for this promise to resolve, for non-promise data that would of course be the case instantly,
if you pass back a promise
instead, we wait for that to finish
which in this case is happening once the timer is expired, let's set it to 2 seconds here maybe
and then once this promise finished, we move on to the next
then step and execute that with the data of that returned promise
or if you just return data like this, I said it's wrapped into a promise but of course it resolves instantly
and then data would be the data you returned here,
so in this case that string. Here however, I'm passing back the result of that function which is a promise,
we wait for this promise to finish, to resolve
and then we make it into the next then block.
So this is promise chaining and this is a powerful concept which lets you escape from callback hell
because now we have step after step instead of step inside step which would lead to a lot of nesting
if you have a lot of related operations.
So now with that, if we reload and I allow access here, you'll see we'll have to wait a bit and after
we get the position and after the timer expired, we will get this output we got before,
now with the help of promises and promise chaining.