Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,110 --> 00:00:02,230 At this point, 2 2 00:00:02,230 --> 00:00:04,070 we have a pretty good idea 3 3 00:00:04,070 --> 00:00:08,200 of how to work with async/await, right? 4 4 00:00:08,200 --> 00:00:11,260 However, there is one important thing missing. 5 5 00:00:11,260 --> 00:00:14,920 So right now, it might still be a little bit unclear 6 6 00:00:14,920 --> 00:00:19,320 what an async function actually is and how it works. 7 7 00:00:19,320 --> 00:00:21,203 And so let's now fix that. 8 8 00:00:23,010 --> 00:00:25,220 So to understand a bit better, 9 9 00:00:25,220 --> 00:00:27,280 what's actually happening here. 10 10 00:00:27,280 --> 00:00:31,163 Let's start by adding some more console.logs here. 11 11 00:00:33,600 --> 00:00:38,600 So let's say, will get location. 12 12 00:00:38,890 --> 00:00:41,763 And then in the second one here, we will say, 13 13 00:00:45,050 --> 00:00:49,073 finished getting location. 14 14 00:00:50,380 --> 00:00:52,720 And if we check the result here, now, 15 15 00:00:52,720 --> 00:00:55,080 I hope that you already know 16 16 00:00:55,080 --> 00:00:58,370 what the order of the logs here will be. 17 17 00:00:58,370 --> 00:00:59,930 So let's see. 18 18 00:00:59,930 --> 00:01:00,770 And so indeed, 19 19 00:01:00,770 --> 00:01:05,110 immediately we get the first log then the second one. 20 20 00:01:05,110 --> 00:01:07,090 And of course only after that 21 21 00:01:07,090 --> 00:01:10,930 we get all the logs coming from the async function. 22 22 00:01:10,930 --> 00:01:11,800 So again, 23 23 00:01:11,800 --> 00:01:14,350 that's because this is an async function 24 24 00:01:14,350 --> 00:01:16,230 that runs in the background. 25 25 00:01:16,230 --> 00:01:18,770 And so JavaScript immediately moves on 26 26 00:01:18,770 --> 00:01:20,590 to the next line here. 27 27 00:01:20,590 --> 00:01:24,040 Now, if this was indeed a regular function 28 28 00:01:24,040 --> 00:01:27,570 and there would be a console.log in that regular function, 29 29 00:01:27,570 --> 00:01:32,040 then of course, that would appear here between one and two. 30 30 00:01:32,040 --> 00:01:36,170 Right? Well, let's call this three here, actually. 31 31 00:01:36,170 --> 00:01:39,180 So it will then appear between one and three, 32 32 00:01:39,180 --> 00:01:41,850 but in this case it's an async function, 33 33 00:01:41,850 --> 00:01:44,210 and so therefore it runs in the background 34 34 00:01:44,210 --> 00:01:46,053 until the results are there, 35 35 00:01:46,940 --> 00:01:47,773 all right. 36 36 00:01:47,773 --> 00:01:51,050 But now let's say that we wanted to return some data 37 37 00:01:51,050 --> 00:01:53,503 from this function, all right? 38 38 00:01:54,940 --> 00:01:58,513 So let's first get rid of all these console.logs here. 39 39 00:02:01,760 --> 00:02:03,963 Put this all a bit better together. 40 40 00:02:05,370 --> 00:02:09,390 And so here at the end let's now say we wanted to return 41 41 00:02:11,210 --> 00:02:16,210 a string like we had previously based on the geocoding data. 42 42 00:02:18,190 --> 00:02:21,060 So that data is in dataGeo 43 43 00:02:21,060 --> 00:02:23,530 and so let's say you are in 44 44 00:02:27,010 --> 00:02:28,530 dataGeo.city 45 45 00:02:30,820 --> 00:02:33,963 and then just quickly the country here as well. 46 46 00:02:37,240 --> 00:02:39,910 So we return this string here 47 47 00:02:39,910 --> 00:02:42,960 and so let's say we now want to get, 48 48 00:02:42,960 --> 00:02:45,090 of course that data out here. 49 49 00:02:45,090 --> 00:02:46,860 And so for now, let's pretend 50 50 00:02:46,860 --> 00:02:49,940 that this is simply a regular function 51 51 00:02:49,940 --> 00:02:51,693 and then we would do this, 52 52 00:02:53,380 --> 00:02:55,870 we would simply define a variable. 53 53 00:02:55,870 --> 00:02:59,290 Then there, we would store that returned value. 54 54 00:02:59,290 --> 00:03:01,490 And then here, we could take a look at that, 55 55 00:03:02,600 --> 00:03:06,470 but what do you think is going to happen here in this case? 56 56 00:03:06,470 --> 00:03:07,873 Well, let's see. 57 57 00:03:08,800 --> 00:03:12,860 And so the second thing that is logged to the console here 58 58 00:03:12,860 --> 00:03:14,880 is this promise. 59 59 00:03:14,880 --> 00:03:16,500 And remember that back then, 60 60 00:03:16,500 --> 00:03:19,870 when we first started to work with async/await, 61 61 00:03:19,870 --> 00:03:24,380 I told you that an async function always returns a promise. 62 62 00:03:24,380 --> 00:03:27,260 And so here is the proof for that. 63 63 00:03:27,260 --> 00:03:28,930 And if we think about this, 64 64 00:03:28,930 --> 00:03:32,500 then it actually makes sense that here we get a promise 65 65 00:03:32,500 --> 00:03:36,120 and not the value that we would like to get. 66 66 00:03:36,120 --> 00:03:38,223 So the string here, right? 67 67 00:03:39,310 --> 00:03:43,260 The reason for that is that at this point of the code, 68 68 00:03:43,260 --> 00:03:46,160 JavaScript has simply no way of knowing yet 69 69 00:03:46,160 --> 00:03:48,450 there's a string here that we want 70 70 00:03:48,450 --> 00:03:50,660 because the function is still running, 71 71 00:03:50,660 --> 00:03:54,190 but it is also not blocking the code out here. 72 72 00:03:54,190 --> 00:03:57,220 And so therefore again, at this point, 73 73 00:03:57,220 --> 00:03:59,090 JavaScript has no way of knowing 74 74 00:03:59,090 --> 00:04:01,890 what will be returned from this function. 75 75 00:04:01,890 --> 00:04:04,850 And so therefore all that this function does return 76 76 00:04:04,850 --> 00:04:06,670 is a promise. 77 77 00:04:06,670 --> 00:04:10,420 Now the value that we return from an async function, 78 78 00:04:10,420 --> 00:04:12,730 so again, that's this string here 79 79 00:04:12,730 --> 00:04:15,730 will become the fulfilled value of the promise 80 80 00:04:15,730 --> 00:04:18,380 that is returned by the function. 81 81 00:04:18,380 --> 00:04:21,140 And so that's important to understand. 82 82 00:04:21,140 --> 00:04:24,500 So again, this promise that we see down here, 83 83 00:04:24,500 --> 00:04:26,750 the fulfilled value of that promise 84 84 00:04:26,750 --> 00:04:29,270 is going to be this string here, 85 85 00:04:29,270 --> 00:04:31,850 because that is the value that we return 86 86 00:04:31,850 --> 00:04:33,780 from the async function 87 87 00:04:33,780 --> 00:04:36,700 while at least if there is no error here happening 88 88 00:04:36,700 --> 00:04:37,940 in the function, 89 89 00:04:37,940 --> 00:04:41,113 but for now, let's assume the success here again. 90 90 00:04:42,200 --> 00:04:46,400 So since we know that this here will return a promise, 91 91 00:04:46,400 --> 00:04:50,193 we also know how we can actually get the data that we want. 92 92 00:04:51,050 --> 00:04:54,400 So all we need to do instead of this here 93 93 00:04:55,960 --> 00:04:57,773 is simply, whereAmI, 94 94 00:05:00,280 --> 00:05:02,693 let's comment out these two, 95 95 00:05:04,190 --> 00:05:06,053 and so this will be our promise. 96 96 00:05:07,030 --> 00:05:08,680 Then just like before 97 97 00:05:08,680 --> 00:05:12,350 we can use the then method to get the fulfilled value 98 98 00:05:12,350 --> 00:05:13,393 of the promise. 99 99 00:05:14,390 --> 00:05:16,783 Let's call that one city now. 100 100 00:05:20,440 --> 00:05:21,610 All right? 101 101 00:05:21,610 --> 00:05:23,830 So we're using the exact same variable name 102 102 00:05:24,740 --> 00:05:26,210 like we did here, 103 103 00:05:26,210 --> 00:05:28,560 but of course this one here didn't work, 104 104 00:05:28,560 --> 00:05:30,910 but here it is going to work. 105 105 00:05:30,910 --> 00:05:34,290 Because again, in the then handler, 106 106 00:05:34,290 --> 00:05:37,820 this argument that will be passed into the callback function 107 107 00:05:37,820 --> 00:05:41,420 is going to be the result value of the promise. 108 108 00:05:41,420 --> 00:05:43,000 And so one more time, 109 109 00:05:43,000 --> 00:05:45,930 that is this string here that is returned 110 110 00:05:45,930 --> 00:05:48,130 from the async function. 111 111 00:05:48,130 --> 00:05:51,283 And so now let's see what happens. 112 112 00:05:53,330 --> 00:05:55,110 Let's wait for it. 113 113 00:05:55,110 --> 00:06:00,093 Now we get our result, you are in Olhao, Portugal. 114 114 00:06:02,020 --> 00:06:02,970 And so with this, 115 115 00:06:02,970 --> 00:06:06,200 we essentially, successfully returned a value 116 116 00:06:06,200 --> 00:06:07,920 from the function. 117 117 00:06:07,920 --> 00:06:10,580 Now we will be able to do a little bit better, 118 118 00:06:10,580 --> 00:06:13,680 but for now let's think about errors. 119 119 00:06:13,680 --> 00:06:17,820 So if any error occurs here in this try block, 120 120 00:06:17,820 --> 00:06:20,620 then this return here will never be reached 121 121 00:06:20,620 --> 00:06:22,900 because the code will immediately jump 122 122 00:06:22,900 --> 00:06:26,150 here to the catch block, right? 123 123 00:06:26,150 --> 00:06:30,570 So let's just try to create some error here. 124 124 00:06:30,570 --> 00:06:33,240 I will just change this one here, 125 125 00:06:33,240 --> 00:06:35,513 so now nothing will work, 126 126 00:06:37,010 --> 00:06:38,283 so let's wait for it. 127 127 00:06:39,730 --> 00:06:42,533 And so indeed, now we have an error. 128 128 00:06:43,660 --> 00:06:48,563 Now here we get undefined from line five, four, three. 129 129 00:06:49,820 --> 00:06:51,120 That's this one. 130 130 00:06:51,120 --> 00:06:54,840 And so indeed now nothing was returned from the function, 131 131 00:06:54,840 --> 00:06:56,063 we get undefined. 132 132 00:06:57,080 --> 00:07:01,193 Now what's interesting here is that the log still worked. 133 133 00:07:02,350 --> 00:07:03,600 This console.log here, 134 134 00:07:03,600 --> 00:07:07,330 which has now logging undefined here is still running, 135 135 00:07:07,330 --> 00:07:11,390 which means that this callback function is still running, 136 136 00:07:11,390 --> 00:07:14,230 which means that the then method was called, 137 137 00:07:14,230 --> 00:07:17,300 which in turn means that this promise here 138 138 00:07:17,300 --> 00:07:21,380 was actually fulfilled and not rejected. 139 139 00:07:21,380 --> 00:07:25,410 So even though there was an error in the async function, 140 140 00:07:25,410 --> 00:07:27,950 the promise that the async function returns 141 141 00:07:27,950 --> 00:07:32,410 is still fulfilled and not rejected, right? 142 142 00:07:32,410 --> 00:07:35,713 And in fact, if we add a catch handler here, 143 143 00:07:39,890 --> 00:07:41,473 then let's see what happens. 144 144 00:07:43,530 --> 00:07:46,363 So console.error, 145 145 00:07:49,500 --> 00:07:51,513 error.message, 146 146 00:07:52,820 --> 00:07:54,283 then our emoji here. 147 147 00:07:55,490 --> 00:07:57,593 And actually let's add a two here. 148 148 00:07:59,740 --> 00:08:02,303 So the sequence is kind of one, two, three, 149 149 00:08:04,120 --> 00:08:05,513 and let's do the same here. 150 150 00:08:11,470 --> 00:08:12,650 All right? 151 151 00:08:12,650 --> 00:08:16,600 And so we should still get the error from here 152 152 00:08:16,600 --> 00:08:18,360 and indeed we do, 153 153 00:08:18,360 --> 00:08:22,230 but still it is this callback here that is executed. 154 154 00:08:22,230 --> 00:08:27,030 So that's why we get two undefined and not the catch block. 155 155 00:08:27,030 --> 00:08:27,890 And so again, 156 156 00:08:27,890 --> 00:08:30,920 what that means is that even though there was an error 157 157 00:08:30,920 --> 00:08:32,810 in the async function, 158 158 00:08:32,810 --> 00:08:36,250 the promise that it returns is still fulfilled. 159 159 00:08:36,250 --> 00:08:38,840 Now, if we wanted to fix that, 160 160 00:08:38,840 --> 00:08:42,520 if we want to be able to catch that error here as well, 161 161 00:08:42,520 --> 00:08:46,373 then we would have to rethrow that error right here. 162 162 00:08:47,500 --> 00:08:49,760 Rethrowing the error means to basically 163 163 00:08:49,760 --> 00:08:54,380 throw the error again so that we can then propagate it down. 164 164 00:08:54,380 --> 00:08:56,897 And so with that, we will manually reject a promise 165 165 00:08:56,897 --> 00:08:59,473 that's returned from the async function. 166 166 00:09:00,890 --> 00:09:05,890 So let's say reject promise returned from async function. 167 167 00:09:10,210 --> 00:09:14,303 So here we can now take the error and throw it again. 168 168 00:09:15,400 --> 00:09:16,723 So throw error, 169 169 00:09:18,080 --> 00:09:22,980 and so now we get the same error here as we had here. 170 170 00:09:22,980 --> 00:09:26,510 So again, it's, cannot read property flag of undefined 171 171 00:09:26,510 --> 00:09:29,180 and here the same and with this too. 172 172 00:09:29,180 --> 00:09:30,853 So it just coming from here. 173 173 00:09:31,790 --> 00:09:34,830 And so sometimes it's important to do this. 174 174 00:09:34,830 --> 00:09:38,350 And so rethrowing an error is then the correct solution 175 175 00:09:38,350 --> 00:09:41,310 to that problem, all right? 176 176 00:09:41,310 --> 00:09:45,520 And now finally, if we wanted to fix the, not the error, 177 177 00:09:45,520 --> 00:09:49,283 but the fact that the three is printed before the two, 178 178 00:09:50,260 --> 00:09:52,063 well then how would we do that? 179 179 00:09:53,100 --> 00:09:57,500 Well, we can simply add a finally here, right? 180 180 00:09:57,500 --> 00:09:59,970 Because the finally, as you already know, 181 181 00:09:59,970 --> 00:10:03,250 is always gonna be executed. 182 182 00:10:03,250 --> 00:10:04,443 So no matter what, 183 183 00:10:08,550 --> 00:10:09,383 all right? 184 184 00:10:10,720 --> 00:10:12,490 So now we only get the one 185 185 00:10:12,490 --> 00:10:14,960 then we should get the two with the error 186 186 00:10:14,960 --> 00:10:16,260 and then the number three. 187 187 00:10:18,540 --> 00:10:22,083 And indeed, if we remove now the error from here, 188 188 00:10:24,120 --> 00:10:27,783 then one, two, three, just as expected, 189 189 00:10:29,776 --> 00:10:31,130 all right? 190 190 00:10:31,130 --> 00:10:35,230 So I admit that this might've been a little bit confusing, 191 191 00:10:35,230 --> 00:10:37,030 but I hope that you understood 192 192 00:10:37,030 --> 00:10:40,350 how all the pieces fit together here. 193 193 00:10:40,350 --> 00:10:44,010 Now this of course works just fine, but in my opinion, 194 194 00:10:44,010 --> 00:10:46,090 there's still a problem here. 195 195 00:10:46,090 --> 00:10:49,600 And that problem is the fact that doing this here 196 196 00:10:50,600 --> 00:10:53,820 kind of makes this the philosophy of async/await 197 197 00:10:53,820 --> 00:10:58,820 with handling promises using then and catch, right? 198 198 00:10:59,320 --> 00:11:00,850 So we are mixing the old 199 199 00:11:00,850 --> 00:11:03,840 and the new way of working with promises here, 200 200 00:11:03,840 --> 00:11:05,400 all in the same code. 201 201 00:11:05,400 --> 00:11:08,840 And that's something that I personally don't like. 202 202 00:11:08,840 --> 00:11:11,970 So I prefer to always just use async functions 203 203 00:11:11,970 --> 00:11:13,683 instead of having to mix them. 204 204 00:11:14,720 --> 00:11:15,960 And so let's now go ahead 205 205 00:11:15,960 --> 00:11:19,560 and convert this to async/await as well. 206 206 00:11:19,560 --> 00:11:21,920 And we can do that because, of course, 207 207 00:11:21,920 --> 00:11:25,520 we can treat the promise here that has returned 208 208 00:11:25,520 --> 00:11:27,750 just like any other promise. 209 209 00:11:27,750 --> 00:11:30,370 And so of course we are able to handle it 210 210 00:11:30,370 --> 00:11:32,260 using async/await. 211 211 00:11:32,260 --> 00:11:34,840 So that's what we're going to do next. 212 212 00:11:34,840 --> 00:11:38,190 Now it would be great if we could simply use await 213 213 00:11:38,190 --> 00:11:40,590 without the async function, 214 214 00:11:40,590 --> 00:11:44,510 but that doesn't really work, at least for now, 215 215 00:11:44,510 --> 00:11:47,610 because there is actually a proposal in the works 216 216 00:11:47,610 --> 00:11:50,220 to make this happen, but for now, 217 217 00:11:50,220 --> 00:11:54,270 await can only be used inside an async function. 218 218 00:11:54,270 --> 00:11:58,860 However, we don't really want a new complete function here, 219 219 00:11:58,860 --> 00:12:01,950 and so instead we can use an IIFE. 220 220 00:12:01,950 --> 00:12:04,950 So remember IIFEs from way back, 221 221 00:12:04,950 --> 00:12:08,060 they are immediately-invoked function expressions. 222 222 00:12:08,060 --> 00:12:11,393 And remember that this is how we create one. 223 223 00:12:12,860 --> 00:12:14,780 So we write function 224 224 00:12:15,980 --> 00:12:18,330 then here the function body, 225 225 00:12:18,330 --> 00:12:21,200 and then in the end we simply call it. 226 226 00:12:21,200 --> 00:12:24,750 And so of course we can also easily create 227 227 00:12:24,750 --> 00:12:25,583 an async 228 228 00:12:27,038 --> 00:12:28,410 IIFE as well, 229 229 00:12:28,410 --> 00:12:29,460 all right? 230 230 00:12:29,460 --> 00:12:31,990 And actually this pattern here 231 231 00:12:31,990 --> 00:12:36,990 is one of the last remaining cases for IIFEs, all right? 232 232 00:12:37,010 --> 00:12:40,880 And now I actually want to leave the conversion of this 233 233 00:12:40,880 --> 00:12:44,650 to the async function for you as a small challenge. 234 234 00:12:44,650 --> 00:12:46,610 So please pause the video now 235 235 00:12:46,610 --> 00:12:48,430 and take a minute or two 236 236 00:12:48,430 --> 00:12:50,393 and write the code yourself here. 237 237 00:12:51,870 --> 00:12:53,390 All right. 238 238 00:12:53,390 --> 00:12:56,823 So let's start with the try catch block. 239 239 00:12:58,720 --> 00:13:02,940 So try catch, here We get access to the error 240 240 00:13:04,470 --> 00:13:08,233 and then let's actually immediately do this part. 241 241 00:13:11,010 --> 00:13:16,010 And then here we can simply await the whereAmI promise, 242 242 00:13:18,030 --> 00:13:18,890 okay? 243 243 00:13:18,890 --> 00:13:23,020 And then all we have to do is to store that result 244 244 00:13:23,020 --> 00:13:27,453 into the city variable and then log that to the console. 245 245 00:13:29,030 --> 00:13:30,963 So that's just this, 246 246 00:13:32,500 --> 00:13:35,090 and now finally, this last part here, 247 247 00:13:35,090 --> 00:13:39,120 we can simply put it outside of the try catch block. 248 248 00:13:39,120 --> 00:13:42,893 And so then it is always gonna be executed no matter what. 249 249 00:13:44,640 --> 00:13:45,970 Okay? 250 250 00:13:45,970 --> 00:13:47,550 So let's comment this one out 251 251 00:13:48,760 --> 00:13:51,950 and we should get the exact same result 252 252 00:13:51,950 --> 00:13:53,530 and let's wait for it. 253 253 00:13:53,530 --> 00:13:55,080 And here we go. 254 254 00:13:55,080 --> 00:13:58,450 So great. We managed to do the conversion 255 255 00:13:58,450 --> 00:14:02,470 and now everything is using async/await. 256 256 00:14:02,470 --> 00:14:04,570 And so that's much nicer. 257 257 00:14:04,570 --> 00:14:08,590 And now we know how to basically return data 258 258 00:14:08,590 --> 00:14:10,540 from an async function 259 259 00:14:10,540 --> 00:14:14,920 and how to properly receive and handle that returned data. 260 260 00:14:14,920 --> 00:14:16,160 Right? 261 261 00:14:16,160 --> 00:14:18,030 And actually in the real life, 262 262 00:14:18,030 --> 00:14:21,150 this is something that happens all the time. 263 263 00:14:21,150 --> 00:14:23,870 So it's pretty common that we have async functions 264 264 00:14:23,870 --> 00:14:26,190 calling other async functions 265 265 00:14:26,190 --> 00:14:28,740 and returning values between them. 266 266 00:14:28,740 --> 00:14:31,590 And so that's the reason why I'm showing you all this. 267 267 00:14:31,590 --> 00:14:34,550 To make sure that you really correctly understand 268 268 00:14:34,550 --> 00:14:37,433 how async functions work behind the scenes. 22821