1 00:00:01,230 --> 00:00:02,940 Let's now shortly go back 2 00:00:02,940 --> 00:00:05,220 to asynchronous JavaScript, 3 00:00:05,220 --> 00:00:10,160 because there has been an important change in ES2022. 4 00:00:10,160 --> 00:00:14,290 So starting from this new ES2022 version, 5 00:00:14,290 --> 00:00:16,920 we can now use the await keyword 6 00:00:16,920 --> 00:00:21,610 outside of async functions, at least in modules. 7 00:00:21,610 --> 00:00:24,793 So that's why this is here in the module section. 8 00:00:26,420 --> 00:00:31,000 So again, as I just said, because this is really important, 9 00:00:31,000 --> 00:00:33,990 we can now basically use the await keyword 10 00:00:33,990 --> 00:00:36,760 outside of an async function, 11 00:00:36,760 --> 00:00:39,800 which we call top-level await. 12 00:00:39,800 --> 00:00:42,900 Just remember that this only works in modules. 13 00:00:42,900 --> 00:00:46,150 If we were gonna try this in a normal script, 14 00:00:46,150 --> 00:00:49,000 like we have been using before this section, 15 00:00:49,000 --> 00:00:52,290 then top level await would still fail, 16 00:00:52,290 --> 00:00:54,260 so it would not work at all. 17 00:00:54,260 --> 00:00:56,270 But here in our HTML file, 18 00:00:56,270 --> 00:01:00,840 we can still see that we have our type set to module. 19 00:01:00,840 --> 00:01:03,340 So this is what is required 20 00:01:03,340 --> 00:01:06,393 in order to make top-level await actually work. 21 00:01:07,700 --> 00:01:09,893 So to show you top level await, 22 00:01:10,750 --> 00:01:13,723 let's simply do a simple fetch request. 23 00:01:16,230 --> 00:01:18,400 So the fetch function, remember, 24 00:01:18,400 --> 00:01:23,290 is what we do to do an HTTP or an AJAX request. 25 00:01:23,290 --> 00:01:27,800 And now let's use a new API that we haven't used before, 26 00:01:27,800 --> 00:01:32,513 which is a very simple one, simply with some fake data. 27 00:01:34,180 --> 00:01:36,223 And it's called JSONPlaceholder. 28 00:01:37,200 --> 00:01:39,520 So just Google json placeholder, 29 00:01:39,520 --> 00:01:43,750 and probably it is then this very first result. 30 00:01:43,750 --> 00:01:46,800 And here, we can get a fake data about posts, 31 00:01:46,800 --> 00:01:50,510 comments, albums, and all of this, but here, 32 00:01:50,510 --> 00:01:53,563 what I'm interested in is these posts. 33 00:01:54,420 --> 00:01:56,823 So just copy this URL here. 34 00:01:57,860 --> 00:01:59,973 And then that's really all that we need. 35 00:02:02,380 --> 00:02:04,350 So let's put that here. 36 00:02:04,350 --> 00:02:07,543 And now it's time to use that top-level await. 37 00:02:09,250 --> 00:02:11,740 So we can await the result here, 38 00:02:11,740 --> 00:02:16,683 and then save it into some variable. 39 00:02:18,350 --> 00:02:20,950 All right, but remember that then we need 40 00:02:20,950 --> 00:02:25,550 another await to parse the data as JSON. 41 00:02:26,480 --> 00:02:28,460 So here I'm not explaining deeply 42 00:02:28,460 --> 00:02:30,230 again how all of this works, 43 00:02:30,230 --> 00:02:34,990 so how the fetch function works and how the JSON works, 44 00:02:34,990 --> 00:02:36,870 because we went through that 45 00:02:36,870 --> 00:02:39,283 in great depth in the previous section. 46 00:02:43,620 --> 00:02:47,853 Okay, and then we can log the data simply to the console. 47 00:02:48,780 --> 00:02:52,060 So let's give it a save and see what happens. 48 00:02:52,060 --> 00:02:55,250 And indeed, here is our data. 49 00:02:55,250 --> 00:02:57,890 So we have an array of 100 posts here 50 00:02:57,890 --> 00:03:00,403 where each of them is this object here. 51 00:03:02,720 --> 00:03:06,860 All right, so basically, that's how you use top-level await. 52 00:03:06,860 --> 00:03:10,280 And so we see that indeed, the await keyword is 53 00:03:10,280 --> 00:03:13,920 now working outside of an async function. 54 00:03:13,920 --> 00:03:18,920 So before, we would have to write async function something, 55 00:03:20,740 --> 00:03:22,310 and then the function body. 56 00:03:22,310 --> 00:03:24,900 But now, with top-level await in modules, 57 00:03:24,900 --> 00:03:27,380 that is no longer necessary. 58 00:03:27,380 --> 00:03:30,980 Now, what's really, really important to understand here is 59 00:03:30,980 --> 00:03:34,610 that while this is all great and very useful, 60 00:03:34,610 --> 00:03:39,240 this actually blocks the execution of the entire module now. 61 00:03:39,240 --> 00:03:41,450 And as we learned in the previous section, 62 00:03:41,450 --> 00:03:44,043 that is sometimes not exactly what we want. 63 00:03:44,990 --> 00:03:47,830 So let me actually demonstrate that to you 64 00:03:47,830 --> 00:03:50,363 by logging something else here afterwards. 65 00:03:52,130 --> 00:03:54,410 So just something really. 66 00:03:54,410 --> 00:03:57,693 And I will also make this request here a little bit slower. 67 00:03:58,830 --> 00:04:01,780 So let's come here to the network tab, 68 00:04:01,780 --> 00:04:06,340 and here, then I click on a throttling, 69 00:04:06,340 --> 00:04:08,123 and let's use a slow 3G. 70 00:04:10,159 --> 00:04:12,493 And let's clean this here and reload. 71 00:04:15,990 --> 00:04:19,120 So you'll see that it's now taking up quite some time. 72 00:04:19,120 --> 00:04:20,960 And especially now here, this part, 73 00:04:20,960 --> 00:04:23,373 where it's actually fetching some data. 74 00:04:24,950 --> 00:04:29,150 So let's actually log something here before also, 75 00:04:29,150 --> 00:04:33,340 so start fetching. 76 00:04:33,340 --> 00:04:35,210 So that will make it a little bit easier 77 00:04:35,210 --> 00:04:36,410 to see what's happening. 78 00:04:38,580 --> 00:04:41,080 So let's reload here again. 79 00:04:41,080 --> 00:04:42,990 So now it all takes a lot of time 80 00:04:42,990 --> 00:04:45,640 because the network is really slow. 81 00:04:45,640 --> 00:04:48,470 So you see it starts fetching, and it's doing the work. 82 00:04:48,470 --> 00:04:51,180 And only after that, it is really logging 83 00:04:51,180 --> 00:04:53,890 this something here to the console. 84 00:04:53,890 --> 00:04:56,900 And so in fact, this await keyword here, 85 00:04:56,900 --> 00:04:59,700 which is now outside of an async function, 86 00:04:59,700 --> 00:05:03,040 is blocking the entire execution of this module, 87 00:05:03,040 --> 00:05:05,930 which is something that we had never seen before. 88 00:05:05,930 --> 00:05:07,860 So this really wasn't possible 89 00:05:07,860 --> 00:05:11,053 before we got top-level await in JavaScript. 90 00:05:12,070 --> 00:05:15,380 Now, of course, this can be useful in some situations, 91 00:05:15,380 --> 00:05:17,950 but many times, it can also be harmful, 92 00:05:17,950 --> 00:05:21,750 and especially if it's a really long running task. 93 00:05:21,750 --> 00:05:24,473 So just as we learned in the last section. 94 00:05:25,720 --> 00:05:27,130 And if you don't remember 95 00:05:27,130 --> 00:05:29,970 that very important video from the last section, 96 00:05:29,970 --> 00:05:32,480 then you can just check it out, I think, 97 00:05:32,480 --> 00:05:35,730 it's the first video in that previous section. 98 00:05:35,730 --> 00:05:38,300 But anyway, long story short, 99 00:05:38,300 --> 00:05:41,460 just make sure that you use this new superpower 100 00:05:41,460 --> 00:05:44,250 that you just got with great caution. 101 00:05:44,250 --> 00:05:49,110 All right, now this example here illustrates exactly 102 00:05:49,110 --> 00:05:52,700 how top-level await works, but it's a bit too simple. 103 00:05:52,700 --> 00:05:55,220 It's not really real world enough. 104 00:05:55,220 --> 00:05:58,033 So let's actually get a little bit more real. 105 00:05:58,900 --> 00:06:01,790 So many times, we have the situations 106 00:06:01,790 --> 00:06:04,280 where we do have an async function 107 00:06:04,280 --> 00:06:07,200 that we want to return some data. 108 00:06:07,200 --> 00:06:10,490 So let's actually try that. 109 00:06:10,490 --> 00:06:14,163 And I will just comment out this code here for now. 110 00:06:16,460 --> 00:06:17,430 Okay. 111 00:06:17,430 --> 00:06:21,023 And so let's create a function here called getLastPost. 112 00:06:23,660 --> 00:06:27,600 So this function will basically do this fetch request here, 113 00:06:27,600 --> 00:06:30,433 and will then only return the very last post. 114 00:06:32,230 --> 00:06:35,820 So this is an async function. 115 00:06:35,820 --> 00:06:38,950 It doesn't need any input data. 116 00:06:38,950 --> 00:06:43,273 And then let's just copy these two lines of code here. 117 00:06:47,220 --> 00:06:50,850 And let's again, actually log that data here 118 00:06:50,850 --> 00:06:53,623 so we can take a look at what we receive here. 119 00:06:57,070 --> 00:06:58,980 So for now, let's just call it 120 00:06:58,980 --> 00:07:01,630 so that this code here actually executes. 121 00:07:01,630 --> 00:07:06,630 And to see this, I will now turn off this throttling. 122 00:07:06,720 --> 00:07:09,770 So we no longer need this. 123 00:07:09,770 --> 00:07:10,910 This was just to show you 124 00:07:10,910 --> 00:07:13,503 the blocking effect of top-level await. 125 00:07:14,700 --> 00:07:17,810 Okay, so that's pretty fast now. 126 00:07:17,810 --> 00:07:20,310 And remember that now we want to return 127 00:07:20,310 --> 00:07:22,160 something from this function. 128 00:07:22,160 --> 00:07:24,620 And I simply want to return an object 129 00:07:24,620 --> 00:07:27,110 which contains the title here. 130 00:07:27,110 --> 00:07:30,643 And let's see, also the body. 131 00:07:34,780 --> 00:07:36,920 So let's say return, 132 00:07:36,920 --> 00:07:40,860 and we're gonna return a new object with the title of data, 133 00:07:44,410 --> 00:07:46,370 which has this entire array here, 134 00:07:46,370 --> 00:07:49,330 and then we want to get the last element. 135 00:07:49,330 --> 00:07:51,520 Now, how can we do that? 136 00:07:51,520 --> 00:07:56,520 Well, let's actually use the new ES2022 at method. 137 00:07:56,730 --> 00:07:59,710 And if this is the first time that you're seeing, 138 00:07:59,710 --> 00:08:02,140 or that you're hearing about the at method, 139 00:08:02,140 --> 00:08:03,960 then check out a new video 140 00:08:03,960 --> 00:08:06,850 that I also added to the array section, 141 00:08:06,850 --> 00:08:09,150 so right at the beginning of that. 142 00:08:09,150 --> 00:08:10,230 But anyway, 143 00:08:10,230 --> 00:08:14,170 we can just use data.at, and then minus one, 144 00:08:14,170 --> 00:08:17,823 which will basically get the very last element of an array, 145 00:08:19,270 --> 00:08:20,823 and then .title. 146 00:08:21,740 --> 00:08:24,680 And then the other one is called the body, 147 00:08:24,680 --> 00:08:26,960 but let's just call it text here. 148 00:08:26,960 --> 00:08:31,283 So text is data at minus one .body. 149 00:08:34,840 --> 00:08:37,810 Give it a save, and now, here, 150 00:08:37,810 --> 00:08:40,740 let's try to save that variable 151 00:08:42,140 --> 00:08:44,210 or actually that returned value 152 00:08:44,210 --> 00:08:46,623 into a variable called lastPost. 153 00:08:48,920 --> 00:08:53,140 Okay, now, if you remember the last section, 154 00:08:53,140 --> 00:08:56,453 then you will remember that this is not going to work. 155 00:08:58,190 --> 00:09:01,453 So let me show you what lastPost is actually going to be. 156 00:09:02,890 --> 00:09:05,890 So you see, it is actually a promise. 157 00:09:05,890 --> 00:09:09,290 It is not the object that we were expecting. 158 00:09:09,290 --> 00:09:13,370 And the reason for that is that calling an async function, 159 00:09:13,370 --> 00:09:15,770 which this function here clearly is, 160 00:09:15,770 --> 00:09:17,770 will always return a promise. 161 00:09:17,770 --> 00:09:20,850 It will not return the actual data itself, 162 00:09:20,850 --> 00:09:24,680 because by the time we are running this line of code here, 163 00:09:24,680 --> 00:09:26,690 the data has not yet arrived. 164 00:09:26,690 --> 00:09:29,540 So we still have that pending promise. 165 00:09:29,540 --> 00:09:32,410 And again, if you don't really remember the specifics here, 166 00:09:32,410 --> 00:09:35,540 you can always go back to the last section. 167 00:09:35,540 --> 00:09:40,230 All right, now, the workaround that I showed you before, 168 00:09:40,230 --> 00:09:42,640 so to actually get this data here, 169 00:09:42,640 --> 00:09:45,210 so this object instead of the promise, 170 00:09:45,210 --> 00:09:47,763 was to simply use regular promises. 171 00:09:50,300 --> 00:09:52,720 So we can take this promise here 172 00:09:52,720 --> 00:09:56,400 that is returned and stored in this variable, 173 00:09:56,400 --> 00:09:59,303 and then on that, we can call the then method. 174 00:10:00,210 --> 00:10:01,550 Then in the then method, 175 00:10:01,550 --> 00:10:04,240 we get access to the resolved value, 176 00:10:04,240 --> 00:10:07,000 which we can just call last, 177 00:10:07,000 --> 00:10:10,393 and then let's just log it to the console. 178 00:10:14,550 --> 00:10:19,390 And of course, it's not called lost, but last. 179 00:10:20,620 --> 00:10:23,870 And so after some time, here we get that object, 180 00:10:23,870 --> 00:10:26,860 so with the title and the text. 181 00:10:26,860 --> 00:10:31,860 However, doing this isn't very clean, not very clean. 182 00:10:32,320 --> 00:10:33,870 And so what we can do now is 183 00:10:33,870 --> 00:10:36,123 to use top-level await for this. 184 00:10:38,160 --> 00:10:42,803 So let's call it lastPost2 this time, 185 00:10:43,960 --> 00:10:47,293 which will be the result of awaiting getLastPost. 186 00:10:55,630 --> 00:10:56,673 And let's see. 187 00:10:57,660 --> 00:11:00,390 Of course it takes some time, but then here it is. 188 00:11:00,390 --> 00:11:04,610 So here is the result of awaiting this promise here now. 189 00:11:04,610 --> 00:11:09,040 So the promise returned from this getLastPost function. 190 00:11:09,040 --> 00:11:11,380 And it's in situations like this 191 00:11:11,380 --> 00:11:14,833 where top-level await actually can get quite useful. 192 00:11:15,870 --> 00:11:16,703 All right. 193 00:11:18,720 --> 00:11:21,020 Now to finish, I just want to show you 194 00:11:21,020 --> 00:11:25,280 one more important implication of using top-level await. 195 00:11:25,280 --> 00:11:28,700 And that is the fact that if one module imports 196 00:11:28,700 --> 00:11:31,770 a module which has a top-level await, 197 00:11:31,770 --> 00:11:34,830 then the importing module will wait 198 00:11:34,830 --> 00:11:38,880 for the imported module to finish the blocking code. 199 00:11:38,880 --> 00:11:41,270 So that sounds a bit complicated, 200 00:11:41,270 --> 00:11:44,620 and it sounds more complicated than it actually is. 201 00:11:44,620 --> 00:11:48,640 So let's just demonstrate this with an example. 202 00:11:48,640 --> 00:11:51,900 So let's come here to our shoppingCart module, 203 00:11:51,900 --> 00:11:54,913 which is a module that we import right here. 204 00:11:56,040 --> 00:11:58,000 So remember from the last lecture 205 00:11:58,000 --> 00:12:01,310 that here we are importing the shoppingCart module. 206 00:12:01,310 --> 00:12:04,483 And so let's now just add some blocking code here. 207 00:12:05,550 --> 00:12:09,223 So maybe just here in the very beginning. 208 00:12:17,090 --> 00:12:21,643 So let's say start fetching users, 209 00:12:22,730 --> 00:12:26,123 because this time, we will actually fetch users. 210 00:12:27,580 --> 00:12:29,403 Let's copy all of this. 211 00:12:32,939 --> 00:12:35,340 And this is really just to have some blocking code, 212 00:12:35,340 --> 00:12:39,340 so we don't even need to store the result anywhere. 213 00:12:39,340 --> 00:12:42,800 And here, instead of posts, we can use users, 214 00:12:42,800 --> 00:12:44,680 but in this case, it doesn't really matter, 215 00:12:44,680 --> 00:12:47,050 because we're actually not even saving 216 00:12:47,050 --> 00:12:49,623 the result anymore or anywhere. 217 00:12:51,070 --> 00:12:53,733 So finish fetching. 218 00:12:56,180 --> 00:12:57,610 All right. 219 00:12:57,610 --> 00:12:59,620 And now, to see this effect again, 220 00:12:59,620 --> 00:13:00,800 we should probably throttle 221 00:13:00,800 --> 00:13:03,613 that request again with a slow 3G. 222 00:13:05,510 --> 00:13:07,283 So going back here. 223 00:13:09,650 --> 00:13:11,700 So the first thing that's going to happen is 224 00:13:11,700 --> 00:13:13,803 that the shopping cart is imported. 225 00:13:16,440 --> 00:13:20,120 And so now, we start immediately the start fetching users. 226 00:13:20,120 --> 00:13:22,660 Then only after the fetch is completed, 227 00:13:22,660 --> 00:13:25,483 we get this second console log here. 228 00:13:26,790 --> 00:13:28,290 So that's this one. 229 00:13:28,290 --> 00:13:30,190 And only after all that, 230 00:13:30,190 --> 00:13:32,470 the code in the importing module, 231 00:13:32,470 --> 00:13:36,590 so in script.js is actually executed. 232 00:13:36,590 --> 00:13:38,980 So let's see that again in action. 233 00:13:38,980 --> 00:13:41,000 And so we will now be able to see 234 00:13:41,000 --> 00:13:44,990 that the code in script.js actually has to wait 235 00:13:44,990 --> 00:13:48,960 for the code in shoppingCart.js to finish. 236 00:13:48,960 --> 00:13:52,050 So this top-level await that we have here is 237 00:13:52,050 --> 00:13:56,000 in fact blocking the execution, not only in this module, 238 00:13:56,000 --> 00:13:58,793 but also in the module that is importing it. 239 00:13:59,720 --> 00:14:02,880 So again, it's very important to remember 240 00:14:02,880 --> 00:14:05,150 that using top-level await, 241 00:14:05,150 --> 00:14:08,610 so await outside of any async function 242 00:14:08,610 --> 00:14:11,600 will block the entire module in a way 243 00:14:11,600 --> 00:14:14,690 that we really couldn't block code execution before. 244 00:14:14,690 --> 00:14:17,550 And so this is not only a really helpful tool, 245 00:14:17,550 --> 00:14:21,280 but also one that we need to use with great care. 246 00:14:21,280 --> 00:14:26,000 But anyway, let's now deactivate this code here 247 00:14:26,000 --> 00:14:27,780 so that it's not going to block 248 00:14:29,090 --> 00:14:31,140 when we start going to the next lectures. 249 00:14:33,290 --> 00:14:34,180 All right. 250 00:14:34,180 --> 00:14:37,180 And so yeah, I think we're finished here. 251 00:14:37,180 --> 00:14:39,520 This is how top-level await works. 252 00:14:39,520 --> 00:14:42,383 And so let's now go straight to the next video.