1 00:00:02,210 --> 00:00:08,870 So async await is a nice alternative to the then and catch blocks and ultimately, it's up to you what 2 00:00:08,870 --> 00:00:09,860 you prefer. 3 00:00:10,010 --> 00:00:16,040 In a lot of my tutorials, I actually like to use then and catch instead of async await because I really 4 00:00:16,040 --> 00:00:21,620 see a danger here with async and await that you could think that these steps really run after each other 5 00:00:21,620 --> 00:00:25,070 because Javascript always executes all the code after each other 6 00:00:25,070 --> 00:00:29,900 when this actually is not the case, async code and all these async operations are always provided by 7 00:00:29,900 --> 00:00:33,180 the browser such that they can be offloaded to the browser 8 00:00:33,290 --> 00:00:37,100 as you learned it earlier in the module and the browser comes back to you once it's done. 9 00:00:37,130 --> 00:00:42,410 That has not changed and async await does not change this, it just has some invisible transformation 10 00:00:42,410 --> 00:00:43,460 behind the scenes, 11 00:00:43,580 --> 00:00:49,370 if you understand that, well this obviously is a bit shorter than this down there so you might prefer 12 00:00:49,370 --> 00:00:49,690 that, 13 00:00:49,850 --> 00:00:51,060 ultimately it's up to you. 14 00:00:51,200 --> 00:00:55,910 In modern browsers, this might be a bit better from a performance perspective, async await might be a 15 00:00:55,910 --> 00:01:03,260 bit better simply because browsers can also parse and execute this in a more optimized way but it will 16 00:01:03,260 --> 00:01:04,490 not be a huge difference, 17 00:01:04,490 --> 00:01:10,070 might not always be a difference for all possible examples or use cases and therefore ultimately, I'd 18 00:01:10,070 --> 00:01:11,810 go with whatever you prefer, 19 00:01:11,810 --> 00:01:16,650 the most important thing here just is that you understand what's happening behind the scenes. 20 00:01:17,060 --> 00:01:23,390 One real downside you can have with async await though is that you can't run tasks simultaneously inside 21 00:01:23,390 --> 00:01:28,430 of the same function. Previously with then and catch, these lines down there right, 22 00:01:28,430 --> 00:01:32,440 if I comment them back in, you might remember they executed right away. 23 00:01:32,510 --> 00:01:34,620 We called get position here, 24 00:01:34,710 --> 00:01:41,710 in the end what we did is we called get position and then we had all that code here and the 25 00:01:41,780 --> 00:01:47,210 thing was this executed and then we had these steps which would eventually execute but of course the 26 00:01:47,210 --> 00:01:51,890 steps after get position, because of the way Javascript works would execute right away, 27 00:01:51,980 --> 00:01:56,190 so this timer would be set right away and this console log would execute right away. 28 00:01:56,300 --> 00:02:03,260 So if I temporarily comment out this async await part up there and I remove the async keyword, just 29 00:02:03,260 --> 00:02:05,490 to bring back in memory what happened here, 30 00:02:05,540 --> 00:02:11,120 also comment this out and I reload, you'll see if I click track me, getting position executed right away, 31 00:02:11,300 --> 00:02:18,100 timer was set right away and thereafter our promise thing did its job. Now with the new syntax, 32 00:02:18,110 --> 00:02:25,400 if I comment this back in and I add the async keyword again and I remove this code but I leave the set 33 00:02:25,400 --> 00:02:31,790 timer and console log down there, that will of course also execute after these steps but the problem 34 00:02:31,790 --> 00:02:35,300 is really only after all these steps. 35 00:02:35,300 --> 00:02:38,250 So now if I reload and I click block for example, 36 00:02:38,420 --> 00:02:42,400 you see getting position and timer done executes thereafter. 37 00:02:42,460 --> 00:02:46,030 Now why is that happening? Because of await, 38 00:02:46,040 --> 00:02:51,710 this does not pause code execution but behind the scenes, all these steps in the end get wrapped into 39 00:02:51,710 --> 00:02:58,340 their own then blocks and therefore, this has its own then block as well and therefore this only executes 40 00:02:58,880 --> 00:02:59,970 after this is finished. 41 00:02:59,990 --> 00:03:06,940 It is as if down there, we would have added an extra then block where we had this code inside of it, 42 00:03:06,950 --> 00:03:10,720 this was not the case. So async await is not that great 43 00:03:10,790 --> 00:03:17,930 if you have a function in which you need to execute or kick off multiple things simultaneously and don't 44 00:03:17,930 --> 00:03:23,330 want to execute everything after each other, then this is not ideal because right now we really got a 45 00:03:23,330 --> 00:03:25,290 different behavior than before. 46 00:03:25,340 --> 00:03:30,110 Of course you can fix this by offloading this into a different function which you kick off simultaneously 47 00:03:30,110 --> 00:03:32,130 with this function and so on, 48 00:03:32,130 --> 00:03:33,870 so there are ways around that, 49 00:03:33,920 --> 00:03:39,250 it's just important to be aware of the fact that everything in this function executes after each other 50 00:03:39,260 --> 00:03:46,220 if you start using async await. Another downside or thing to be aware of is that async await is only 51 00:03:46,220 --> 00:03:47,770 available on functions. 52 00:03:47,870 --> 00:03:53,720 So if you had some code outside of a function, let's say here you had some promise based code, you call 53 00:03:53,720 --> 00:03:59,840 set timer here which of course returns a promise as you learned because we promisify this, then you 54 00:03:59,840 --> 00:04:05,360 can't use await here because await can only be used in functions which are marked with async and this 55 00:04:05,360 --> 00:04:06,750 is not part of a function, 56 00:04:06,800 --> 00:04:12,110 it's part of this global anonymous function which you get automatically but that's not an async function 57 00:04:12,110 --> 00:04:19,980 so to say. So here you would have to wrap this into for example an iffy in order to be able to use 58 00:04:19,980 --> 00:04:20,450 that, 59 00:04:20,460 --> 00:04:27,250 so here we could use async like this and then wrap this into an 60 00:04:27,250 --> 00:04:31,920 iffy and that would now be a workaround to use await here. 61 00:04:31,920 --> 00:04:34,980 Yes, this would work but of course that's also not that beautiful 62 00:04:34,980 --> 00:04:42,690 if we really just want to replace this line here where we otherwise would have to use then. So async 63 00:04:42,690 --> 00:04:44,680 await might not always be preferable 64 00:04:44,730 --> 00:04:50,700 if you need to introduce a function just to use it, if you have a function anyways where you use a promise 65 00:04:50,700 --> 00:04:53,850 in, then using async await of course is not too difficult.