1
00:00:02,100 --> 00:00:08,840
So to dive a bit deeper into promises, let's actually also promisify getCurrentPosition.

2
00:00:08,840 --> 00:00:10,710
So for this, I'll add another new function,

3
00:00:10,710 --> 00:00:19,700
get position could be the name and we could pass in an argument, we could accept an argument, maybe options or

4
00:00:19,720 --> 00:00:21,320
ops, whatever you want to call it

5
00:00:21,360 --> 00:00:26,190
and in there we call navigator get geolocation getCurrentPosition,

6
00:00:26,190 --> 00:00:32,050
so we make that call inside of get position. Now to getCurrentPosition, we need to pass in these

7
00:00:32,050 --> 00:00:32,480
callbacks,

8
00:00:32,490 --> 00:00:33,570
there is no way around that,

9
00:00:33,570 --> 00:00:36,330
there is no promise version of getCurrentPosition.

10
00:00:36,420 --> 00:00:39,520
So here I have my success callback,

11
00:00:39,540 --> 00:00:45,360
you can name this piece of data you're getting however you want and I have my error callback and I'll forward

12
00:00:45,710 --> 00:00:48,390
the options I might be getting here.

13
00:00:48,400 --> 00:00:54,270
So now we have the callbacks in here and now the idea is that we again wrap this with a promise.

14
00:00:54,280 --> 00:00:56,040
So here we can again create a promise

15
00:00:56,050 --> 00:01:01,570
and again you could name this differently of course, by calling new promise. As you learned, the promise

16
00:01:01,570 --> 00:01:07,120
then takes a function as an argument and this function in turn takes two functions, a resolve and a reject

17
00:01:07,480 --> 00:01:09,790
function parameter

18
00:01:09,790 --> 00:01:16,720
and now in here in this promise, I want to make that call and then I want to return promise here

19
00:01:17,140 --> 00:01:24,370
and now we can again resolve here and maybe resolve the success object, so that we pass the data we're

20
00:01:24,370 --> 00:01:27,280
getting from getCurrentPosition into our promise

21
00:01:27,280 --> 00:01:29,740
so to say and wherever we listen to it with

22
00:01:29,740 --> 00:01:34,170
then, we get that data, we'll take care about the error later.

23
00:01:34,180 --> 00:01:42,480
Now we have a promisified version of getCurrentPosition and therefore down here, we can call get

24
00:01:42,580 --> 00:01:52,290
position like this and now not pass in these two callback functions, so we can cut that and instead call

25
00:01:52,380 --> 00:01:59,790
then here and here we get the success data which is my position data in the end and I can console log

26
00:02:00,150 --> 00:02:01,780
position data.

27
00:02:01,860 --> 00:02:07,620
So now we promisify that and therefore if we reload now and I click track me again and I click

28
00:02:07,620 --> 00:02:13,030
allow, you will see this gets my position and after a while, this gets printed here.

29
00:02:13,070 --> 00:02:16,340
So it works like before but now wrapped in a promise

30
00:02:16,610 --> 00:02:21,420
and now we can see the power of that when we combine this with set timer. Previously,

31
00:02:21,500 --> 00:02:27,500
I set my timer in here and we can still do that, I can set my timer in here once we're done basically

32
00:02:28,600 --> 00:02:33,180
and then wait for 2 seconds and then here I can add

33
00:02:33,190 --> 00:02:39,790
then and then I got my data from the set timer method and I can then console log posData

34
00:02:39,820 --> 00:02:41,500
but now again we have some nesting here,

35
00:02:41,530 --> 00:02:44,910
so this would be the not so intelligent way of doing that.

36
00:02:45,040 --> 00:02:52,090
The better way is to take advantage of a concept called chaining. Here I get my position data right,

37
00:02:52,090 --> 00:02:55,330
I get my position data of that promise.

38
00:02:55,330 --> 00:03:01,290
Now I want to set a timer in here and therefore I can call set timer and what does set timer do?

39
00:03:01,300 --> 00:03:03,770
It creates a new promise and returns it.

40
00:03:03,850 --> 00:03:10,720
Now actually here, we can return this inside of this function I passed to then and what happens there

41
00:03:11,020 --> 00:03:18,700
is that the overall promise which is created here basically is now set back from being resolved to being

42
00:03:18,700 --> 00:03:19,780
pending,

43
00:03:19,780 --> 00:03:23,410
a promise can be pending or be resolved or have an error,

44
00:03:23,410 --> 00:03:30,560
so it was resolved after we got the position, now by returning something inside of that function here,

45
00:03:30,640 --> 00:03:36,610
we set it back to being pending and we'll now wait for this promise here which we returned here to resolve

46
00:03:37,000 --> 00:03:38,560
and I can now add a new

47
00:03:38,560 --> 00:03:44,430
then block after this first one and you typically write it like this across multiple lines,

48
00:03:44,440 --> 00:03:47,950
this is all belonging together here but it's simply more readable

49
00:03:48,130 --> 00:03:53,440
and here I then get the data of that inner promise which in this case is the timer data I could log.

50
00:03:55,060 --> 00:04:01,510
If I also needed the position data here, we could store this in some variable outside of this chain

51
00:04:01,510 --> 00:04:01,900
here,

52
00:04:03,880 --> 00:04:11,320
position data, so that we can store our posData in position data here and then also access position

53
00:04:11,320 --> 00:04:13,860
data which is defined outside of all these functions

54
00:04:13,900 --> 00:04:15,490
in this last function here,

55
00:04:15,490 --> 00:04:18,240
so this is how we could pass this on as well

56
00:04:18,400 --> 00:04:21,370
and now we have something which is called promise chaining.

57
00:04:21,370 --> 00:04:26,890
We have multiple steps in this promise, where we wait for the first promise to finish and then we return

58
00:04:26,890 --> 00:04:31,510
something new here which doesn't even have to be a promise by the way, if it would be other data like

59
00:04:31,510 --> 00:04:35,710
a string, it would be wrapped into a promise automatically,

60
00:04:35,740 --> 00:04:42,190
then we'll wait for this promise to resolve, for non-promise data that would of course be the case instantly,

61
00:04:42,610 --> 00:04:43,980
if you pass back a promise

62
00:04:43,980 --> 00:04:45,520
instead, we wait for that to finish

63
00:04:45,520 --> 00:04:50,820
which in this case is happening once the timer is expired, let's set it to 2 seconds here maybe

64
00:04:51,190 --> 00:04:54,370
and then once this promise finished, we move on to the next

65
00:04:54,400 --> 00:04:58,650
then step and execute that with the data of that returned promise

66
00:04:58,660 --> 00:05:04,930
or if you just return data like this, I said it's wrapped into a promise but of course it resolves instantly

67
00:05:05,050 --> 00:05:07,330
and then data would be the data you returned here,

68
00:05:07,360 --> 00:05:12,490
so in this case that string. Here however, I'm passing back the result of that function which is a promise,

69
00:05:12,820 --> 00:05:16,050
we wait for this promise to finish, to resolve

70
00:05:16,300 --> 00:05:18,500
and then we make it into the next then block.

71
00:05:18,520 --> 00:05:24,790
So this is promise chaining and this is a powerful concept which lets you escape from callback hell

72
00:05:24,820 --> 00:05:31,660
because now we have step after step instead of step inside step which would lead to a lot of nesting

73
00:05:31,660 --> 00:05:34,310
if you have a lot of related operations.

74
00:05:34,340 --> 00:05:40,990
So now with that, if we reload and I allow access here, you'll see we'll have to wait a bit and after

75
00:05:40,990 --> 00:05:46,790
we get the position and after the timer expired, we will get this output we got before,

76
00:05:46,810 --> 00:05:50,380
now with the help of promises and promise chaining.