WEBVTT 1 00:00:00.924 --> 00:00:03.430 Let's now quickly talk about 2 00:00:03.430 --> 00:00:05.970 the three other Promise combinators, 3 00:00:05.970 --> 00:00:09.383 which are race, allSettled and any. 4 00:00:10.960 --> 00:00:15.653 And the first one we're gonna talk about is Promise.race. 5 00:00:16.860 --> 00:00:18.610 So like this . 6 00:00:18.610 --> 00:00:21.939 And Promise.race, just like all other combinators, 7 00:00:21.939 --> 00:00:26.939 receives an array of promises and it also returns a promise. 8 00:00:27.420 --> 00:00:30.698 Now this promise returned by Promise.race 9 00:00:30.698 --> 00:00:35.698 is settled as soon as one of the input promises settles. 10 00:00:36.060 --> 00:00:38.680 And remember that settled simply means 11 00:00:38.680 --> 00:00:40.720 that a value is available, 12 00:00:40.720 --> 00:00:41.880 but it doesn't matter 13 00:00:41.880 --> 00:00:44.982 if the promise got rejected or fulfilled. 14 00:00:44.982 --> 00:00:47.390 And so in Promis.race, 15 00:00:47.390 --> 00:00:51.420 basically the first settled promise wins the race. 16 00:00:51.420 --> 00:00:54.208 But let's now actually see this in action. 17 00:00:54.208 --> 00:00:56.880 And I will create a quick IIFE here 18 00:00:56.880 --> 00:00:59.720 so that I can use async await 19 00:00:59.720 --> 00:01:04.003 without like creating a whole new function with a name. 20 00:01:08.580 --> 00:01:13.580 And so as always then we use await Promise 21 00:01:14.020 --> 00:01:15.170 and in this case .race, 22 00:01:16.810 --> 00:01:21.810 and let's also now store it here as a response. 23 00:01:23.400 --> 00:01:26.880 And now here let's define an array of promises 24 00:01:27.753 --> 00:01:32.510 and lets just get this JSON here, 25 00:01:32.510 --> 00:01:37.510 let's getJSON function and try it with three countries. 26 00:01:38.910 --> 00:01:40.243 Let's say Italy, 27 00:01:43.140 --> 00:01:45.165 and do this three times. 28 00:01:45.165 --> 00:01:49.557 Let's say Egypt and then also Mexico. 29 00:01:51.520 --> 00:01:54.260 And so now these three promises will basically 30 00:01:54.260 --> 00:01:57.980 race against each other, like in a real race. 31 00:01:57.980 --> 00:02:01.680 Now, if the winning promise is then a fulfilled promise, 32 00:02:01.680 --> 00:02:06.160 then the fulfillment value of this whole race promise 33 00:02:06.160 --> 00:02:09.743 is gonna be the fulfillment value of the winning promise. 34 00:02:11.610 --> 00:02:14.900 So that's more obvious than it maybe sound. 35 00:02:14.900 --> 00:02:18.454 So let's just see the result here in the console. 36 00:02:18.454 --> 00:02:22.890 And so we got Italy, but if we try it again, 37 00:02:22.890 --> 00:02:25.130 then maybe we get another result 38 00:02:25.130 --> 00:02:28.253 because then maybe another call is gonna be faster. 39 00:02:29.230 --> 00:02:34.210 But well, it seems to be always Italy but now it's Mexico 40 00:02:34.210 --> 00:02:36.603 and let's actually see this in the network tab. 41 00:02:38.350 --> 00:02:40.680 So making it smaller again. 42 00:02:40.680 --> 00:02:43.020 And so you see that indeed Mexico 43 00:02:43.020 --> 00:02:45.630 is the one who took the least time. 44 00:02:45.630 --> 00:02:47.800 So test the smallest bar here. 45 00:02:47.800 --> 00:02:52.800 And it also was the fastest of the three, right? 46 00:02:53.320 --> 00:02:56.890 This time, the fastest was Egypt here by far. 47 00:02:56.890 --> 00:02:59.290 And so that's what we should see in the console. 48 00:03:00.840 --> 00:03:03.670 Okay, so again, just keep in mind 49 00:03:03.670 --> 00:03:05.730 that here in Promised.race, 50 00:03:05.730 --> 00:03:07.490 we only get one result 51 00:03:07.490 --> 00:03:11.053 and not an array of the results of all the three. 52 00:03:11.980 --> 00:03:14.070 Now a promise that gets rejected 53 00:03:14.070 --> 00:03:16.550 can actually also win the race. 54 00:03:16.550 --> 00:03:19.444 And so we say that Promise.race short circuits 55 00:03:19.444 --> 00:03:22.920 whenever one of the promises gets settled. 56 00:03:22.920 --> 00:03:27.123 And so again, that means no matter if fulfilled or rejected. 57 00:03:28.240 --> 00:03:30.173 So let's try some weird name here. 58 00:03:32.480 --> 00:03:36.883 And so now it is the rejected promise that won basically. 59 00:03:38.530 --> 00:03:41.423 But let's go back here to as it was, 60 00:03:42.770 --> 00:03:45.940 and see another example because in the real world 61 00:03:45.940 --> 00:03:48.810 Promise.race is actually very useful 62 00:03:48.810 --> 00:03:51.930 to prevent against never ending promises 63 00:03:51.930 --> 00:03:55.110 or also very long running promises. 64 00:03:55.110 --> 00:03:56.880 For example, if your user 65 00:03:56.880 --> 00:03:59.430 has a very bad internet connection, 66 00:03:59.430 --> 00:04:01.940 then a fetch requests in your application 67 00:04:01.940 --> 00:04:05.580 might take way too long to actually be useful. 68 00:04:05.580 --> 00:04:08.790 And so we can create a special time out promise, 69 00:04:08.790 --> 00:04:13.370 which automatically rejects after a certain time has passed. 70 00:04:13.370 --> 00:04:15.060 So let's do that. 71 00:04:15.060 --> 00:04:17.820 And it's gonna be similar to the wait function 72 00:04:17.820 --> 00:04:19.270 that we created earlier. 73 00:04:19.270 --> 00:04:22.930 But the difference is that this one is actually going 74 00:04:22.930 --> 00:04:25.763 to reject and not going to resolve. 75 00:04:27.130 --> 00:04:31.820 So this time let's actually pass in milliseconds, right? 76 00:04:31.820 --> 00:04:34.690 Well, let's just pass in seconds 77 00:04:34.690 --> 00:04:37.003 just to make it consistent with the other one. 78 00:04:38.020 --> 00:04:40.220 So return new Promise 79 00:04:43.280 --> 00:04:45.310 and execute a function. 80 00:04:45.310 --> 00:04:49.034 And again, in this case, we will not resolve but reject. 81 00:04:49.034 --> 00:04:51.180 And so here for the resolve function, 82 00:04:51.180 --> 00:04:54.430 which is always the first one we can once again, 83 00:04:54.430 --> 00:04:57.090 use this throw away variable. 84 00:04:57.090 --> 00:04:58.520 So using this convention 85 00:05:00.670 --> 00:05:03.970 and then here reject and setTimeout 86 00:05:05.962 --> 00:05:08.973 and here we specify a callback function. 87 00:05:10.410 --> 00:05:14.660 And so we say that after a certain amount of seconds, 88 00:05:14.660 --> 00:05:18.413 let's call it sec like this actually. 89 00:05:20.220 --> 00:05:23.743 So after this time has passed, we reject the promise. 90 00:05:25.000 --> 00:05:26.460 So we create a new error 91 00:05:28.640 --> 00:05:32.507 saying, "Requests took too long." 92 00:05:34.357 --> 00:05:37.740 And so now we can simply have the Ajax call 93 00:05:37.740 --> 00:05:40.230 that we were talking about earlier, 94 00:05:40.230 --> 00:05:43.210 raced against this timeout. 95 00:05:43.210 --> 00:05:46.673 All right, so let me show you what that means. 96 00:05:49.930 --> 00:05:51.943 So Promise.race, 97 00:05:53.880 --> 00:05:57.330 and then here, the first promise, 98 00:05:57.330 --> 00:05:59.173 let's use again or getJSON. 99 00:06:00.870 --> 00:06:04.690 So this is basically what we are interested in here 100 00:06:04.690 --> 00:06:09.150 and let's use another country Tanzania again. 101 00:06:09.150 --> 00:06:12.533 And the second promise is then going to be or timeout. 102 00:06:14.720 --> 00:06:18.343 So let's say that we only want to wait like one second. 103 00:06:19.780 --> 00:06:24.190 And so we will have these two then race against each other. 104 00:06:24.190 --> 00:06:26.410 And if the timeout happens first, 105 00:06:26.410 --> 00:06:30.170 then all of this here will be rejected, right? 106 00:06:30.170 --> 00:06:33.470 And so basically that will then abort the fetch 107 00:06:33.470 --> 00:06:36.170 that is happening here in getJSON. 108 00:06:36.170 --> 00:06:39.303 So I could have used again async await, 109 00:06:40.920 --> 00:06:43.663 but why not use the then method also here? 110 00:06:47.670 --> 00:06:52.670 So in this case, let's just log the response 111 00:06:52.946 --> 00:06:54.743 or we could have called it data, 112 00:06:55.890 --> 00:06:58.600 but that's not really important here 113 00:06:59.831 --> 00:07:01.223 and here the error, 114 00:07:02.530 --> 00:07:06.313 and lets just also log to the console in case there is any. 115 00:07:09.330 --> 00:07:12.760 And so now we have "Request took too long." 116 00:07:12.760 --> 00:07:15.580 But that was very fast. 117 00:07:15.580 --> 00:07:19.420 I went here, we have to multiply it by a 1000. 118 00:07:19.420 --> 00:07:23.293 So again, this one takes milliseconds and not just seconds. 119 00:07:25.330 --> 00:07:28.410 Okay, so we got to Tanzania pretty fast. 120 00:07:28.410 --> 00:07:30.820 And so it was faster than one second. 121 00:07:30.820 --> 00:07:35.000 And so therefore it did not timeout. 122 00:07:35.000 --> 00:07:37.403 But let's now try 0.1 seconds. 123 00:07:38.400 --> 00:07:41.980 And so now we see that the request took too long. 124 00:07:41.980 --> 00:07:44.870 So 0.1 seconds was not enough 125 00:07:44.870 --> 00:07:48.020 for this request here to get finished. 126 00:07:48.020 --> 00:07:50.934 And you will have to experiment with different values here 127 00:07:50.934 --> 00:07:55.820 because this is going to depend on your internet connection. 128 00:07:55.820 --> 00:07:58.086 So let's see 0.2 seconds. 129 00:07:58.086 --> 00:08:02.240 And so now the request was actually fast enough 130 00:08:02.240 --> 00:08:04.700 so that it didn't timeout. 131 00:08:04.700 --> 00:08:09.700 So with 0.15 seconds, again it takes too long. 132 00:08:10.430 --> 00:08:15.430 And so then this promise here is the result of Promise.race. 133 00:08:16.690 --> 00:08:18.068 So that's pretty useful. 134 00:08:18.068 --> 00:08:19.380 And in the real world 135 00:08:19.380 --> 00:08:22.590 of course you will use a larger number. 136 00:08:22.590 --> 00:08:25.023 Let's say like five seconds. 137 00:08:26.020 --> 00:08:29.510 Now, okay, so that's Promis.race 138 00:08:29.510 --> 00:08:33.100 and in fact Promise.race and Promise.all 139 00:08:33.100 --> 00:08:37.360 are by far the two most important promise combinators. 140 00:08:37.360 --> 00:08:40.283 But let me show you also the other two that we have. 141 00:08:41.460 --> 00:08:42.370 So the next one 142 00:08:43.430 --> 00:08:45.340 is Promise.allSettled. 143 00:08:48.561 --> 00:08:50.610 And this one is a pretty new one. 144 00:08:50.610 --> 00:08:55.560 It is from ES2020 and it is actually a very simple one. 145 00:08:55.560 --> 00:08:58.480 So it takes in an array of promises again, 146 00:08:58.480 --> 00:09:00.510 and it will simply return an array 147 00:09:00.510 --> 00:09:02.810 of all the settled promises. 148 00:09:02.810 --> 00:09:07.810 And so again, no matter if the promises got rejected or not. 149 00:09:08.430 --> 00:09:10.278 So it's similar to Promise.all 150 00:09:10.278 --> 00:09:15.180 in regard that it also returns an array of all the results, 151 00:09:15.180 --> 00:09:17.720 but the difference is that Promise.all 152 00:09:17.720 --> 00:09:21.770 will short circuit as soon as one promise rejects, 153 00:09:21.770 --> 00:09:26.380 but Promise.allSettled, simply never short circuits. 154 00:09:26.380 --> 00:09:27.720 So it will simply return 155 00:09:27.720 --> 00:09:30.193 all the results of all the promises. 156 00:09:31.220 --> 00:09:33.260 So Promise.allSettled. 157 00:09:38.347 --> 00:09:40.550 And so now here I will create 158 00:09:40.550 --> 00:09:44.290 actually the most basic example ever. 159 00:09:44.290 --> 00:09:47.330 So I will simply fake promises 160 00:09:47.330 --> 00:09:50.120 by saying Promise.resolve 161 00:09:51.440 --> 00:09:54.170 Success, all right. 162 00:09:54.170 --> 00:09:57.490 And so you already know that this here automatically creates 163 00:09:57.490 --> 00:10:00.180 a promise that is resolved. 164 00:10:00.180 --> 00:10:03.120 And so we don't have to wait for anything to finish 165 00:10:03.120 --> 00:10:05.613 like this here, okay? 166 00:10:07.200 --> 00:10:09.950 So then we can have a couple of more. 167 00:10:09.950 --> 00:10:11.693 Here we have a rejected one. 168 00:10:14.530 --> 00:10:16.993 So let's say ERROR and here another one, 169 00:10:18.200 --> 00:10:21.173 let's say Another success. 170 00:10:22.160 --> 00:10:26.090 Now, okay, and then here we can just call then 171 00:10:27.390 --> 00:10:28.253 and let's see. 172 00:10:30.120 --> 00:10:34.173 Now here we want actually all of the results. 173 00:10:36.630 --> 00:10:40.140 And so indeed here we get three results, 174 00:10:40.140 --> 00:10:44.780 even though one of them rejected, okay? 175 00:10:44.780 --> 00:10:47.420 So this is the result of the three promises 176 00:10:48.815 --> 00:10:52.030 and yeah, so this is how they look like 177 00:10:52.030 --> 00:10:56.310 when we do them manually with resolve, reject and resolve. 178 00:10:56.310 --> 00:11:00.963 Just contrast that with Promise.all, 179 00:11:03.120 --> 00:11:05.730 so that would then look different. 180 00:11:05.730 --> 00:11:09.750 So here we would get an error, okay. 181 00:11:09.750 --> 00:11:12.223 So of course we can also catch the error then. 182 00:11:14.540 --> 00:11:18.345 And so here we will simply get error and that's again... 183 00:11:18.345 --> 00:11:22.970 Because the .allpromise combinator will short circuit 184 00:11:22.970 --> 00:11:27.133 if there is one error, if there is one rejected promise. 185 00:11:28.230 --> 00:11:30.380 So that's the difference between these two. 186 00:11:32.620 --> 00:11:35.070 But now let's go to the last one, 187 00:11:35.070 --> 00:11:39.063 which is Promise.any. 188 00:11:40.580 --> 00:11:41.633 So like this. 189 00:11:43.180 --> 00:11:46.110 Now Promise.any is even more modern. 190 00:11:46.110 --> 00:11:50.950 It is ES2021 and actually at the time of recording, 191 00:11:50.950 --> 00:11:53.460 this one doesn't work in my browser, 192 00:11:53.460 --> 00:11:56.190 but probably by the time I'm releasing this course, 193 00:11:56.190 --> 00:11:59.360 it will work in the latest version of Google Chrome. 194 00:11:59.360 --> 00:12:02.603 And so let me simply do this here as well. 195 00:12:03.570 --> 00:12:07.523 So all am gonna do is to just copy this example here 196 00:12:07.523 --> 00:12:12.340 and then do any, and this is not going to work. 197 00:12:12.340 --> 00:12:14.000 Let me show you. 198 00:12:14.000 --> 00:12:17.120 So we get Promised.any is not a function. 199 00:12:17.120 --> 00:12:21.110 But again in your case, it might already work. 200 00:12:21.110 --> 00:12:24.740 So let me simply explain what it does. 201 00:12:24.740 --> 00:12:28.220 So as always Promise.any takes in an array 202 00:12:28.220 --> 00:12:31.970 of multiple promises and this one will then return 203 00:12:31.970 --> 00:12:34.210 the first fulfilled promise 204 00:12:34.210 --> 00:12:37.730 and it will simply ignore rejected promises. 205 00:12:37.730 --> 00:12:40.620 So basically Promise.any is very similar 206 00:12:40.620 --> 00:12:43.440 to Promise.race with the difference 207 00:12:43.440 --> 00:12:46.480 that rejected promises are ignored. 208 00:12:46.480 --> 00:12:50.000 And so therefore the results of Promise.any 209 00:12:50.000 --> 00:12:52.890 is always gonna be a fulfilled promise, 210 00:12:52.890 --> 00:12:56.490 unless of course all of them reject, okay. 211 00:12:56.490 --> 00:12:58.810 But at the time you're watching this video 212 00:12:58.810 --> 00:13:01.140 again, this should already work. 213 00:13:01.140 --> 00:13:04.060 And then maybe you can experiment a little bit with this 214 00:13:04.060 --> 00:13:05.640 to see the difference between 215 00:13:05.640 --> 00:13:08.260 all the four Promise combinators. 216 00:13:08.260 --> 00:13:09.960 And again, the most important ones 217 00:13:09.960 --> 00:13:14.050 are definitely Promise.all and Promise.race. 218 00:13:14.050 --> 00:13:17.603 So keep at least these two in mind for your own projects.