WEBVTT 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.