1 00:00:02,310 --> 00:00:09,750 So promises are a really important concept in Javascript and you'll see them a lot, especially in modern 2 00:00:09,750 --> 00:00:12,700 Javascript which we are of course learning in this course. 3 00:00:12,810 --> 00:00:17,970 They're everywhere as you will also see once we dive into HTTP requests and as you will also see in many 4 00:00:17,970 --> 00:00:25,680 projects you work on as soon, as you start working with async code, promises will be used a lot. 5 00:00:26,010 --> 00:00:30,420 Now promises are great and I like the syntax a lot, with then and catch, 6 00:00:30,420 --> 00:00:36,300 I think that's very clear to read. It makes it clear that these steps execute after each other, it at 7 00:00:36,300 --> 00:00:43,020 the same time makes clear that get position executes next to next with this line and this line basically, 8 00:00:43,200 --> 00:00:49,110 so that we don't wait for these steps to finish just to then execute these steps. 9 00:00:49,110 --> 00:00:51,060 So really great to have promises, 10 00:00:51,210 --> 00:00:56,220 it's really a great syntax that makes working with async code so much easier. 11 00:00:56,220 --> 00:01:00,300 Now let's temporarily comment out these two lines, I don't need them right now and therefore all we 12 00:01:00,300 --> 00:01:07,470 do in track user handler, we get the user position, we catch a potential error here and then we have 13 00:01:07,530 --> 00:01:14,130 this then block here where we either wait for the timer here, where if we successfully get the position 14 00:01:14,130 --> 00:01:19,050 we skip the catch block and therefore then here executes on the result of the timer or we get the on 15 00:01:19,050 --> 00:01:20,260 the go text here. 16 00:01:20,370 --> 00:01:25,170 Of course you might want a different error handling here in then and basically react depending on whether 17 00:01:25,320 --> 00:01:30,210 you've got the timer which expired or you got an error before and that of course depends on what data 18 00:01:30,240 --> 00:01:31,910 you return in the steps before 19 00:01:32,010 --> 00:01:35,940 but for now let's say that's the approach we have and hence if I reload here and we click track me and 20 00:01:35,940 --> 00:01:38,770 we click allow, you'll see we'll wait 21 00:01:38,790 --> 00:01:43,470 and at some point of time we'll have the position and we have the timer in there, expired and then we 22 00:01:43,470 --> 00:01:45,550 get the output we expect. 23 00:01:45,570 --> 00:01:47,910 So that's what we saw earlier already. 24 00:01:47,910 --> 00:01:54,390 Now nothing wrong with doing it like this, modern Javascript also has an alternative syntax to that which 25 00:01:54,390 --> 00:01:59,700 and that's really important to memorize, which is why I'm saying it right away, which still utilizes promises 26 00:02:00,060 --> 00:02:06,060 but which actually allows you to omit the then and catch method here and therefore make your code look 27 00:02:06,240 --> 00:02:08,440 a bit more like synchronous code, 28 00:02:08,460 --> 00:02:15,250 so the normal code you write everywhere without promises than it actually is and that's async await. 29 00:02:15,350 --> 00:02:22,960 Now what is async await about? You can use async await in functions and only in functions, that's important, 30 00:02:23,120 --> 00:02:29,540 you enable it so to say by adding the async keyword in front of your function keyword, for functions 31 00:02:29,540 --> 00:02:35,630 created like this, you would use async here in front of your function name, so on the right side of the equal sign, 32 00:02:35,630 --> 00:02:43,220 so that's how you do it on expressions, on declarations you add it here in the front of the function and then 33 00:02:43,490 --> 00:02:50,720 with async added here, the function internally changes so to say or what happens in there invisibly changes. 34 00:02:51,350 --> 00:02:53,010 With async in front of it, 35 00:02:53,030 --> 00:02:58,430 this function automatically returns a promise, you'll see here in my tooltip it tells me that this returns 36 00:02:58,430 --> 00:02:59,320 a promise. 37 00:02:59,360 --> 00:03:05,030 Please note, I never call return in this function, only in the nested functions but not in this function 38 00:03:05,030 --> 00:03:05,690 itself, 39 00:03:05,690 --> 00:03:12,200 I don't return a promise here. If I remove async, we actually therefore correctly see void here which 40 00:03:12,200 --> 00:03:14,100 basically means it returns nothing 41 00:03:14,300 --> 00:03:21,250 but as soon as I add async, this changes and now my IDE tells me that this returns a promise, my IDE 42 00:03:21,250 --> 00:03:26,060 is correct. By adding async here which is a keyword supported by Javascript, 43 00:03:26,130 --> 00:03:30,620 this entire function wraps all its content into one big promise, 44 00:03:30,630 --> 00:03:37,830 so it basically does this wrapping up here with new promise and so on behind the scenes for us and wraps all 45 00:03:37,830 --> 00:03:44,670 that code in that initialization function you pass to the promise constructor, it does that behind the 46 00:03:44,670 --> 00:03:45,810 scenes. 47 00:03:45,810 --> 00:03:48,310 So that's all in a promise, okay. 48 00:03:48,390 --> 00:03:54,660 One effect of that of course is that you could now call then in the place where track user handler is 49 00:03:54,660 --> 00:03:55,290 executed. 50 00:03:55,290 --> 00:04:00,150 Now here the browser executes that for us and the browser of course will not automatically add some 51 00:04:00,150 --> 00:04:03,990 then block here and here, I also don't want to execute anything on that 52 00:04:03,990 --> 00:04:04,860 and you don't have to, 53 00:04:04,890 --> 00:04:06,990 it's just one thing you could do. 54 00:04:07,140 --> 00:04:12,630 The more interesting thing now is that inside of this invisible promise, you have access to another keyword 55 00:04:12,720 --> 00:04:14,310 because we added async here, 56 00:04:14,400 --> 00:04:20,510 we can use the await keyword. We add that in front of any promise, 57 00:04:20,520 --> 00:04:23,210 so for example here get position returns a promise, 58 00:04:23,280 --> 00:04:26,120 so in front of that we can use await. 59 00:04:26,130 --> 00:04:29,810 Now what does await then do if we add it in front of a promise? 60 00:04:29,820 --> 00:04:37,170 Well it kind of waits for the promise to resolve or to fail and the next line thereafter will only execute 61 00:04:37,300 --> 00:04:38,770 once that is the case. 62 00:04:38,880 --> 00:04:44,940 The data which might be resolved, so position data for example here will then be returned so that here 63 00:04:44,940 --> 00:04:49,500 we can say posData equal await get position. 64 00:04:49,610 --> 00:04:54,550 Now I can basically omit that code line here, 65 00:04:54,700 --> 00:05:00,820 don't return set timer but instead call set timer which I previously did inside of this first then block, 66 00:05:00,910 --> 00:05:05,490 so after get position resolved in the next line. 67 00:05:05,500 --> 00:05:08,380 So now I wait for this get position promise to resolve 68 00:05:08,380 --> 00:05:15,090 and only thereafter this line executes, the result of get position, of this resolving of this 69 00:05:15,180 --> 00:05:17,010 promise is stored in this constant, 70 00:05:17,020 --> 00:05:20,830 thereafter we set the timer. Now the timer returned some data, 71 00:05:20,860 --> 00:05:25,750 so here we can have the timer data stored in a constant as well if we need it, 72 00:05:25,780 --> 00:05:28,900 I have to add await here now and we're good. 73 00:05:28,900 --> 00:05:31,660 Of course you don't have to store the data, if you're not interested, 74 00:05:31,660 --> 00:05:33,820 you can omit this but here, I want to store it. 75 00:05:34,630 --> 00:05:38,140 So now we await this and once this is done, we move on to the next line and 76 00:05:38,140 --> 00:05:39,730 we await this. 77 00:05:39,730 --> 00:05:41,320 Now we have to comment out this code, 78 00:05:41,320 --> 00:05:42,800 it will not work anymore, 79 00:05:42,820 --> 00:05:46,150 instead now we refactored it to look like that. 80 00:05:46,330 --> 00:05:54,990 Now I can console log my timer data which I have here and my posData like this and I can get rid 81 00:05:54,990 --> 00:05:59,430 of that variable because of the way this code was rewritten. 82 00:05:59,430 --> 00:06:05,640 So at the moment, we lost the error handling but other than that, this is of course a more concise way 83 00:06:05,910 --> 00:06:09,540 of writing this, of the two then blocks we had down there. 84 00:06:09,540 --> 00:06:14,550 If we saved that, let's see if it works, if we reload, click track me and click allow, 85 00:06:14,550 --> 00:06:19,350 we now have to wait to get the user position and then wait for the two second timer to expire 86 00:06:19,350 --> 00:06:22,550 but then we should see same output as before. 87 00:06:22,580 --> 00:06:26,190 So except for the error handling which we temporarily lost, 88 00:06:26,190 --> 00:06:30,150 this seems way better but what does it actually do? 89 00:06:30,180 --> 00:06:37,080 Doesn't it break all the things I taught you about Javascript, that Javascript is non-blocking and so 90 00:06:37,080 --> 00:06:37,620 on 91 00:06:37,680 --> 00:06:43,390 because here, we clearly are blocking the execution, right? 92 00:06:43,410 --> 00:06:48,480 Well it looks like we are and that can be the dangerous thing about async await. 93 00:06:48,540 --> 00:06:55,620 It looks like we're changing the way Javascript works, that suddenly, we wait for async code to finish 94 00:06:55,950 --> 00:06:59,520 and that we block script execution until that is the case 95 00:06:59,520 --> 00:07:03,900 but that's actually thankfully not what's happening. 96 00:07:03,900 --> 00:07:11,820 Instead as I mentioned, async wraps everything inside of track user handler into one big promise and 97 00:07:11,820 --> 00:07:18,300 then it actually goes ahead and whenever we await for some other promise which is wrapped in that big 98 00:07:18,300 --> 00:07:25,260 promise to resolve, it in the end just returns this as part of that big promise it created for us and 99 00:07:25,350 --> 00:07:31,770 adds an invisible then block, in the then block it will then get the result of this promise and store 100 00:07:31,770 --> 00:07:37,110 it in this variable which is available in that big overall promise 101 00:07:37,110 --> 00:07:42,990 so to say. So in the end, it replicates this then block behind the scenes you could say and the same of course 102 00:07:42,990 --> 00:07:44,100 for this promise. 103 00:07:44,160 --> 00:07:47,070 So it doesn't really block code execution, 104 00:07:47,070 --> 00:07:50,820 you could say this code simply gets transformed behind the scenes, 105 00:07:50,820 --> 00:07:55,020 it gets transformed to a version which still uses then blocks, 106 00:07:55,050 --> 00:07:57,870 it's the normal promise API, 107 00:07:57,870 --> 00:08:04,170 the normal promise object with the normal then method, just transformed behind the scenes, 108 00:08:04,170 --> 00:08:09,690 so that we as a developer can write shorter code and the overhead of adding the then blocks and so on 109 00:08:09,690 --> 00:08:12,310 is done by Javascript behind the scenes you could say 110 00:08:12,360 --> 00:08:18,330 and that's really important to take away. Async await does not change the way Javascript works or 111 00:08:18,330 --> 00:08:25,950 executes, it just transforms this code behind the scenes and therefore we just have a look that's different 112 00:08:26,010 --> 00:08:32,250 and it looks like we're actually waiting here and we are of course in this function but only in this function 113 00:08:32,250 --> 00:08:38,010 because we have a couple of then methods chained after each other here in the end, that's what's happening 114 00:08:38,010 --> 00:08:44,740 here and therefore we can reap the benefits of having more readable code without any downsides, 115 00:08:44,790 --> 00:08:49,800 you just have to be aware of the fact that there is no magic going on and Javascript is not suddenly 116 00:08:49,800 --> 00:08:57,870 changing but instead, that we're just having the then stuff going on behind the scenes and it can be 117 00:08:57,870 --> 00:09:03,060 a common error source or something which if you're new to Javascript can be hard to understand where 118 00:09:03,060 --> 00:09:05,970 you think that now you're changing the way Javascript works, 119 00:09:05,970 --> 00:09:09,000 you are not, you're having an invisible transformation here.