1 00:00:01,330 --> 00:00:02,890 Let's now imagine 2 00:00:02,890 --> 00:00:04,650 that we wanted to get some data 3 00:00:04,650 --> 00:00:07,730 about three countries at the same time, 4 00:00:07,730 --> 00:00:10,700 but in which the order that the data arrives 5 00:00:10,700 --> 00:00:12,463 does not matter at all. 6 00:00:14,090 --> 00:00:16,800 So let's now implement an async function, 7 00:00:16,800 --> 00:00:20,250 using everything that we know at this point, 8 00:00:20,250 --> 00:00:23,810 and that this function will simply take in three countries 9 00:00:23,810 --> 00:00:26,000 and it will lock the capital cities 10 00:00:26,000 --> 00:00:28,803 of these three countries as an array. 11 00:00:30,260 --> 00:00:34,273 So let's say get three countries. 12 00:00:35,720 --> 00:00:38,093 And again, it's an async function. 13 00:00:39,190 --> 00:00:44,187 So country one, two, and three, and then an async function, 14 00:00:45,990 --> 00:00:49,120 we really always need to wrap or coat 15 00:00:49,120 --> 00:00:53,803 into a try catch block, okay? 16 00:00:55,280 --> 00:00:59,713 So never work an async function without this. 17 00:01:01,350 --> 00:01:03,700 And again, in a real world scenario, 18 00:01:03,700 --> 00:01:06,010 you would do real error handling 19 00:01:06,010 --> 00:01:08,113 and not just log it to the console. 20 00:01:09,070 --> 00:01:14,070 Okay, so await, and then let's use our getJSON function 21 00:01:14,940 --> 00:01:16,750 that we coded at some point 22 00:01:16,750 --> 00:01:18,493 at the beginning of this section. 23 00:01:19,460 --> 00:01:21,900 So here at the top of my file, 24 00:01:21,900 --> 00:01:24,630 I have this getJSON function, 25 00:01:24,630 --> 00:01:28,250 which remember, encapsulates the fetch request, 26 00:01:28,250 --> 00:01:30,973 the error handling also. 27 00:01:31,840 --> 00:01:34,950 So basically when there is an error in this fetch, 28 00:01:34,950 --> 00:01:36,860 it will throw a new error 29 00:01:36,860 --> 00:01:40,433 and it also immediately converts the response to JSON. 30 00:01:41,660 --> 00:01:45,050 So again, if you skipped one of the previous lectures, 31 00:01:45,050 --> 00:01:46,840 then make sure to get this function 32 00:01:46,840 --> 00:01:50,713 from the final code of the section. 33 00:01:51,960 --> 00:01:55,630 So getJSON, and then here again, 34 00:01:55,630 --> 00:01:59,750 we're using our rest countries API, 35 00:01:59,750 --> 00:02:01,383 so let me get to the URL. 36 00:02:04,610 --> 00:02:08,993 So here we now will use c1, 37 00:02:11,880 --> 00:02:13,860 and so then we store that data 38 00:02:13,860 --> 00:02:17,580 into a variable just like this. 39 00:02:17,580 --> 00:02:21,053 So this is the magic of async 08, all right? 40 00:02:21,940 --> 00:02:24,530 Now we already know that the result of this 41 00:02:24,530 --> 00:02:27,990 is gonna be an array with one object. 42 00:02:27,990 --> 00:02:29,650 So let's use the structuring 43 00:02:29,650 --> 00:02:31,803 to take the first element there. 44 00:02:33,410 --> 00:02:38,147 And now let's simply duplicate this code here twice, 45 00:02:41,350 --> 00:02:43,873 and do this three times. 46 00:02:44,800 --> 00:02:48,183 So creating three variables for these three countries, 47 00:02:49,480 --> 00:02:53,310 and then what we want to get is the capital. 48 00:02:53,310 --> 00:02:57,670 So now let's say data one.capital, 49 00:03:00,310 --> 00:03:04,763 because there is such a property in each of these objects. 50 00:03:05,790 --> 00:03:09,790 And so remember that we want to return an array here, 51 00:03:09,790 --> 00:03:11,773 and so that's what we're doing, 52 00:03:13,960 --> 00:03:17,173 and data three.capital as well. 53 00:03:18,470 --> 00:03:23,470 And so this should actually already work, all right? 54 00:03:24,010 --> 00:03:27,263 So let's call this function, get three countries. 55 00:03:28,245 --> 00:03:33,245 Let's use Portugal again and Canada and maybe Tanzania, 56 00:03:37,050 --> 00:03:39,740 which is a very beautiful country. 57 00:03:39,740 --> 00:03:42,300 Oh, and here we got something went wrong. 58 00:03:42,300 --> 00:03:43,133 So Portugal, 59 00:03:45,022 --> 00:03:48,680 so missing the G, and yeah. 60 00:03:48,680 --> 00:03:51,640 So here we get the three capital cities 61 00:03:51,640 --> 00:03:53,500 of the three countries. 62 00:03:53,500 --> 00:03:57,110 So great, this works just fine, 63 00:03:57,110 --> 00:04:01,530 and also at a first sight, there seems to make sense. 64 00:04:01,530 --> 00:04:04,830 But if we think about what we did here, 65 00:04:04,830 --> 00:04:08,200 then maybe it actually doesn't make so much sense 66 00:04:08,200 --> 00:04:10,390 because what we did here basically 67 00:04:10,390 --> 00:04:14,240 was to run all these Ajax calls one after another, 68 00:04:14,240 --> 00:04:17,660 even though the result of the second one here 69 00:04:17,660 --> 00:04:19,970 does not depend on the first one, 70 00:04:19,970 --> 00:04:21,680 and the result of the third one 71 00:04:21,680 --> 00:04:25,400 does also not depend on any of the other ones. 72 00:04:25,400 --> 00:04:28,480 And so actually this doesn't make much sense. 73 00:04:28,480 --> 00:04:32,513 Why should the second Ajax call wait for the first one? 74 00:04:33,790 --> 00:04:35,330 And actually let's take a look 75 00:04:35,330 --> 00:04:38,093 at this in our network tab here as well. 76 00:04:39,640 --> 00:04:44,220 So let's again, maybe set this to slow, 3G now, 77 00:04:44,220 --> 00:04:47,330 and then I will have to make it a little bit smaller 78 00:04:47,330 --> 00:04:49,903 so that we can actually see something down here. 79 00:04:53,500 --> 00:04:57,133 Okay, so down here, we actually have the three Ajax calls. 80 00:04:59,490 --> 00:05:02,183 So let's use fast, 3G here actually, 81 00:05:03,050 --> 00:05:04,623 and so let's see what happens. 82 00:05:06,800 --> 00:05:10,720 And so basically these bars that you see here 83 00:05:10,720 --> 00:05:13,660 is JavaScript downloading something. 84 00:05:13,660 --> 00:05:14,900 So here, of course, 85 00:05:14,900 --> 00:05:18,620 the first one is the HTML, CSS and JavaScript, 86 00:05:18,620 --> 00:05:20,560 so nothing strange there, 87 00:05:20,560 --> 00:05:25,200 but then here we load the data for Portugal, right? 88 00:05:25,200 --> 00:05:27,740 So that's the first Ajax call. 89 00:05:27,740 --> 00:05:29,550 And then after that has finished, 90 00:05:29,550 --> 00:05:31,570 we load the data for Canada, 91 00:05:31,570 --> 00:05:33,570 and then after that has finished, 92 00:05:33,570 --> 00:05:36,330 we load the data for Tanzania. 93 00:05:36,330 --> 00:05:38,760 So just as we have it here in the code, 94 00:05:38,760 --> 00:05:43,100 and so as I explained, that doesn't make a lot of sense. 95 00:05:43,100 --> 00:05:46,610 So instead of running these promises in sequence, 96 00:05:46,610 --> 00:05:49,040 we can actually run them in parallel, 97 00:05:49,040 --> 00:05:51,040 so all at the same time. 98 00:05:51,040 --> 00:05:54,350 And so then we can save valuable loading time, 99 00:05:54,350 --> 00:05:59,130 making these three here, basically load at the same time. 100 00:05:59,130 --> 00:06:01,860 And each of them takes half a second. 101 00:06:01,860 --> 00:06:05,370 And so with that, we will basically save one second, 102 00:06:05,370 --> 00:06:09,460 which is actually a lot of time when loading a website. 103 00:06:09,460 --> 00:06:12,550 So let's do that, and for doing that, 104 00:06:12,550 --> 00:06:17,550 we use the promise.all combinator function, so promise.all. 105 00:06:21,340 --> 00:06:23,530 And so this is once again, 106 00:06:23,530 --> 00:06:28,240 kind of a helper function on this promise constructor. 107 00:06:28,240 --> 00:06:31,320 So it's a static method, right? 108 00:06:31,320 --> 00:06:35,130 Now, this function here takes in an array of promises, 109 00:06:35,130 --> 00:06:37,580 and it will return a new promise, 110 00:06:37,580 --> 00:06:39,640 which will then run all the promises 111 00:06:39,640 --> 00:06:42,390 in the array at the same time. 112 00:06:42,390 --> 00:06:47,390 So let's simply grab these three promises from here. 113 00:06:50,540 --> 00:06:55,540 So one, then here, the second one, 114 00:06:59,760 --> 00:07:02,033 and this is the third one, okay? 115 00:07:07,360 --> 00:07:11,323 So here we, again, have these three running, 116 00:07:12,380 --> 00:07:16,710 but you immediately saw the Portugal, Canada and Tanzania 117 00:07:16,710 --> 00:07:21,157 already running another time, but at the same time, right? 118 00:07:23,230 --> 00:07:25,810 So I only wanted to show you this later, 119 00:07:25,810 --> 00:07:29,090 but now here it is already, but for now, 120 00:07:29,090 --> 00:07:31,563 let's keep focusing on making this work. 121 00:07:32,630 --> 00:07:36,690 So as I said, this year, we'll return a new promise, 122 00:07:36,690 --> 00:07:38,100 so a promise that runs 123 00:07:38,100 --> 00:07:40,810 all of these promises at the same time. 124 00:07:40,810 --> 00:07:43,020 And so then we can handle that promise 125 00:07:43,020 --> 00:07:44,973 in the exact same way as before. 126 00:07:47,350 --> 00:07:49,860 So that's called the result data, 127 00:07:49,860 --> 00:07:51,310 and then await it here 128 00:07:52,870 --> 00:07:55,223 and then lock the data to the console. 129 00:07:56,220 --> 00:07:58,683 So this one we also don't need anymore, 130 00:08:01,640 --> 00:08:03,563 so we want to lock the data. 131 00:08:05,270 --> 00:08:09,550 And so yeah, you see once again 132 00:08:09,550 --> 00:08:13,560 that these three now loaded exactly at the same time. 133 00:08:13,560 --> 00:08:17,353 So they are running in parallel, no longer in sequence now. 134 00:08:18,760 --> 00:08:22,283 So that's all I wanted to show you, so let's go back here. 135 00:08:23,840 --> 00:08:27,113 Okay, and so indeed here we get the result. 136 00:08:28,290 --> 00:08:32,350 So an array, which in this case returns three arrays 137 00:08:32,350 --> 00:08:36,400 and each of them is of course the object we're looking for. 138 00:08:36,400 --> 00:08:40,040 And so promise.all receives an array 139 00:08:40,040 --> 00:08:42,740 and it also returns an array. 140 00:08:42,740 --> 00:08:46,150 And so to create the same output as before, 141 00:08:46,150 --> 00:08:49,470 now, all we have to do is to loop over this data 142 00:08:49,470 --> 00:08:51,553 and take out the data that we want. 143 00:08:52,610 --> 00:08:57,610 So console.log then data.map, 144 00:08:57,890 --> 00:09:01,580 because remember that we want to actually return an array, 145 00:09:01,580 --> 00:09:03,180 but not this array, 146 00:09:03,180 --> 00:09:06,320 but simply an array with all the capital cities. 147 00:09:06,320 --> 00:09:07,990 So in this array of data, 148 00:09:07,990 --> 00:09:11,870 each element, let's call it d, which stands for data. 149 00:09:11,870 --> 00:09:15,460 So d is now this single array. 150 00:09:15,460 --> 00:09:19,700 So from d we want to take element zero and then on there, 151 00:09:19,700 --> 00:09:22,360 we want the capital city. 152 00:09:22,360 --> 00:09:24,410 And so this should be it. 153 00:09:24,410 --> 00:09:29,253 And yeah, here we get the exact same results as before. 154 00:09:30,170 --> 00:09:31,710 Now, just one thing 155 00:09:31,710 --> 00:09:34,180 that's also very important to mention here 156 00:09:34,180 --> 00:09:37,470 is that if one of the promises rejects, 157 00:09:37,470 --> 00:09:41,980 then the whole promise.all actually rejects as well. 158 00:09:41,980 --> 00:09:45,330 So we say that promise.all short circuits 159 00:09:45,330 --> 00:09:47,620 when one promise rejects. 160 00:09:47,620 --> 00:09:50,800 So again, because one rejected promise 161 00:09:50,800 --> 00:09:54,860 is enough for the entire thing to reject as well. 162 00:09:54,860 --> 00:09:58,850 Great, so whenever you have a situation 163 00:09:58,850 --> 00:10:02,420 in which you need to do multiple asynchronous operations 164 00:10:02,420 --> 00:10:03,890 at the same time, 165 00:10:03,890 --> 00:10:07,620 and operations that don't depend on one another, 166 00:10:07,620 --> 00:10:10,920 then you should always, always run them in parallel, 167 00:10:10,920 --> 00:10:14,600 just like we did here using promise.all. 168 00:10:14,600 --> 00:10:17,330 And this is actually more common than you might think. 169 00:10:17,330 --> 00:10:19,600 And so please keep this technique in mind 170 00:10:19,600 --> 00:10:22,970 because your users will thank you. 171 00:10:22,970 --> 00:10:24,080 And of course, 172 00:10:24,080 --> 00:10:27,890 just in case you're not using a single weight, 173 00:10:27,890 --> 00:10:31,210 you can, of course also take this result here 174 00:10:31,210 --> 00:10:33,660 and then handle it with the then method. 175 00:10:33,660 --> 00:10:36,170 So that's gonna work just exactly the same 176 00:10:36,170 --> 00:10:38,350 as here with a single weight. 177 00:10:38,350 --> 00:10:41,910 Okay, and that's the promise.all combinator. 178 00:10:41,910 --> 00:10:44,170 So it's called a combinator function 179 00:10:44,170 --> 00:10:48,480 because it allows us to combine multiple promises. 180 00:10:48,480 --> 00:10:51,400 And there are actually other combinator functions, 181 00:10:51,400 --> 00:10:54,363 and so let's take a look at them right in the next video.