WEBVTT 1 00:00:00.765 --> 00:00:04.650 Let's now learn how to chain promises in order 2 00:00:04.650 --> 00:00:07.350 to also render the neighboring country, 3 00:00:07.350 --> 00:00:09.010 of the initial country 4 00:00:09.010 --> 00:00:10.460 that we give to the function. 5 00:00:12.550 --> 00:00:16.530 And actually, we already have a small chain of promises 6 00:00:16.530 --> 00:00:19.110 because of this JSON function. 7 00:00:19.110 --> 00:00:19.943 And so here, 8 00:00:19.943 --> 00:00:22.860 these two thens called and sequence 9 00:00:22.860 --> 00:00:25.860 are basically already a small chain. 10 00:00:25.860 --> 00:00:27.780 But anyway, in this lecture, 11 00:00:27.780 --> 00:00:30.770 we will now take chaining to a new level 12 00:00:30.770 --> 00:00:32.620 and actually chain together, 13 00:00:32.620 --> 00:00:35.070 two sequential Ajax calls. 14 00:00:35.070 --> 00:00:38.010 So just like before we first get data 15 00:00:38.010 --> 00:00:39.590 about the country. 16 00:00:39.590 --> 00:00:40.850 And so that's the part 17 00:00:40.850 --> 00:00:42.520 that we already have here. 18 00:00:42.520 --> 00:00:44.800 But then we also want to get the data 19 00:00:44.800 --> 00:00:46.970 about the neighboring country. 20 00:00:46.970 --> 00:00:47.970 And so again, 21 00:00:47.970 --> 00:00:51.110 the second Ajax call depends on the data 22 00:00:51.110 --> 00:00:52.670 from the first call. 23 00:00:52.670 --> 00:00:55.393 And so they need to be done in sequence. 24 00:00:56.500 --> 00:00:59.783 So let's simply modify what we already have here. 25 00:01:00.720 --> 00:01:03.330 And so the second Ajax call basically needs 26 00:01:03.330 --> 00:01:04.710 to happen here in 27 00:01:04.710 --> 00:01:07.163 this then handler. 28 00:01:08.820 --> 00:01:10.973 So as soon as we get the data, 29 00:01:12.050 --> 00:01:14.330 then we need to get the neighbor country 30 00:01:14.330 --> 00:01:17.213 and do the Ajax call for that one as well. 31 00:01:19.360 --> 00:01:23.810 So let's get the neighbor and we already know 32 00:01:23.810 --> 00:01:27.550 that it is at data zero at borders. 33 00:01:32.120 --> 00:01:34.240 And then also the first one. 34 00:01:34.240 --> 00:01:36.270 And just like before, let's say, 35 00:01:36.270 --> 00:01:37.763 if there is no neighbor, 36 00:01:39.240 --> 00:01:41.280 then return immediately. 37 00:01:41.280 --> 00:01:43.530 And actually this is not going to work, 38 00:01:43.530 --> 00:01:45.890 but nevermind about this for now. 39 00:01:45.890 --> 00:01:48.440 So we will talk about error handling actually 40 00:01:48.440 --> 00:01:49.513 in the next video. 41 00:01:50.700 --> 00:01:53.063 Now here, there is some kind of problem. 42 00:01:53.940 --> 00:01:58.870 Now we're missing the closing parenthesis here now. 43 00:01:58.870 --> 00:02:00.290 Right? 44 00:02:00.290 --> 00:02:02.340 But now there is no error. 45 00:02:02.340 --> 00:02:05.533 And so let's do the second Ajax call. 46 00:02:06.540 --> 00:02:07.970 And let me just get the URL 47 00:02:07.970 --> 00:02:09.033 from up here. 48 00:02:10.060 --> 00:02:11.363 So that's this one. 49 00:02:14.660 --> 00:02:15.937 Now.Okay. 50 00:02:15.937 --> 00:02:19.220 And so, we use again fetch 51 00:02:21.040 --> 00:02:22.283 and then the URL. 52 00:02:24.740 --> 00:02:27.210 So let's call it country two and 53 00:02:27.210 --> 00:02:32.093 to your country one, all right. 54 00:02:33.170 --> 00:02:34.080 Now, for now, 55 00:02:34.080 --> 00:02:35.860 this is not going to do anything 56 00:02:35.860 --> 00:02:38.100 because what we need to do now is 57 00:02:38.100 --> 00:02:41.110 to actually return does new promise, 58 00:02:41.110 --> 00:02:43.120 because then when we do that, 59 00:02:43.120 --> 00:02:46.150 we will be able to chain a new then method 60 00:02:46.150 --> 00:02:49.563 on the result of this then method. 61 00:02:51.690 --> 00:02:52.600 All right. 62 00:02:52.600 --> 00:02:55.000 So that's a bit similar to what we did here 63 00:02:55.000 --> 00:02:56.373 with the JSON method, 64 00:02:57.280 --> 00:02:59.890 which remember also returned to promise. 65 00:02:59.890 --> 00:03:01.690 And so we return all of 66 00:03:01.690 --> 00:03:03.130 that promise here, 67 00:03:03.130 --> 00:03:06.050 and then we can chain a new then method on 68 00:03:06.050 --> 00:03:07.710 to that as well. 69 00:03:07.710 --> 00:03:09.020 Now, in the last lecture, 70 00:03:09.020 --> 00:03:13.000 I actually oversimplified how things really work. 71 00:03:13.000 --> 00:03:17.340 So actually the then method always returns a promise, 72 00:03:17.340 --> 00:03:21.020 no matter if we actually return anything or not. 73 00:03:21.020 --> 00:03:23.460 But if we do return a value, 74 00:03:23.460 --> 00:03:26.840 then that value will become the fulfillment value 75 00:03:26.840 --> 00:03:28.840 of the return promise. 76 00:03:28.840 --> 00:03:30.693 So let me actually show that to you. 77 00:03:31.550 --> 00:03:32.670 So instead of returning 78 00:03:32.670 --> 00:03:34.110 this for now, 79 00:03:34.110 --> 00:03:36.979 let me just return 23. 80 00:03:36.979 --> 00:03:40.563 And so then when I chain a new then method here, 81 00:03:42.730 --> 00:03:44.880 let's say data, 82 00:03:44.880 --> 00:03:47.793 and then let's alert debt data. 83 00:03:49.560 --> 00:03:50.950 Let's see. 84 00:03:50.950 --> 00:03:54.040 And then indeed we get 23. 85 00:03:54.040 --> 00:03:55.380 And so again, 86 00:03:55.380 --> 00:03:58.640 that happens because whatever we return from 87 00:03:58.640 --> 00:04:01.827 this promise here will become the fulfilled value 88 00:04:01.827 --> 00:04:03.113 of the promise. 89 00:04:03.990 --> 00:04:04.823 Okay? 90 00:04:05.660 --> 00:04:08.600 So again, this year it returns a promise. 91 00:04:08.600 --> 00:04:11.230 And so we can handle it using the then method 92 00:04:11.230 --> 00:04:13.450 And to fulfill to value, 93 00:04:13.450 --> 00:04:15.317 so the success value basically 94 00:04:15.317 --> 00:04:17.880 of the promise will be the valued that 95 00:04:17.880 --> 00:04:20.960 we return from this then method. 96 00:04:20.960 --> 00:04:21.793 Right? 97 00:04:21.793 --> 00:04:24.230 And so that is, this 23 here. 98 00:04:24.230 --> 00:04:27.110 And so therefore in the next then method, 99 00:04:27.110 --> 00:04:30.620 then the data here will be 23. 100 00:04:30.620 --> 00:04:33.980 And of course this year must be 23. 101 00:04:33.980 --> 00:04:36.663 Otherwise we cannot see that in effect. 102 00:04:37.810 --> 00:04:42.323 But yeah, so it is 23 because this value is 23. 103 00:04:43.950 --> 00:04:47.440 So again, this data that we receive here as an input 104 00:04:47.440 --> 00:04:50.920 to dysfunction is the fulfilled value of the promise 105 00:04:50.920 --> 00:04:52.270 that we're handling. 106 00:04:52.270 --> 00:04:53.880 And so again, 107 00:04:53.880 --> 00:04:55.610 that's this value 23, 108 00:04:55.610 --> 00:04:57.170 that we are returning from 109 00:04:57.170 --> 00:04:58.603 this then method here. 110 00:05:00.120 --> 00:05:01.130 Okay. 111 00:05:01.130 --> 00:05:03.140 But anyway, of course the same 112 00:05:03.140 --> 00:05:06.463 is true for ah, promises. 113 00:05:07.300 --> 00:05:09.230 And so by doing this, 114 00:05:09.230 --> 00:05:11.570 so by returning this promise here, 115 00:05:11.570 --> 00:05:13.020 then the fulfilled value 116 00:05:13.020 --> 00:05:17.340 of the next then method will be fulfilled value of 117 00:05:17.340 --> 00:05:18.930 this previous promise. 118 00:05:18.930 --> 00:05:19.883 So of this one. 119 00:05:21.470 --> 00:05:22.303 Okay. 120 00:05:22.303 --> 00:05:24.200 So I know that sounds confusing, 121 00:05:24.200 --> 00:05:27.590 but what you need to understand is that basically 122 00:05:27.590 --> 00:05:31.070 this then method here returns in your promise until, 123 00:05:31.070 --> 00:05:34.700 we can then one more time handle the success value 124 00:05:34.700 --> 00:05:35.763 of that promise. 125 00:05:36.830 --> 00:05:38.540 So one more time, I'm calling this 126 00:05:38.540 --> 00:05:40.130 one now a response, 127 00:05:40.130 --> 00:05:43.490 because here we are dealing with the fulfilled value 128 00:05:43.490 --> 00:05:45.780 of a fetch promise. 129 00:05:45.780 --> 00:05:48.123 And so that is a response. 130 00:05:49.030 --> 00:05:51.620 And so therefore I like to call it like that. 131 00:05:51.620 --> 00:05:52.960 And so here, one more time, 132 00:05:52.960 --> 00:05:55.950 we need to call the JSON method and that 133 00:05:55.950 --> 00:05:57.063 is pretty annoying, 134 00:05:58.000 --> 00:06:00.790 but that's just how we have to do it. 135 00:06:00.790 --> 00:06:01.860 And so here again, 136 00:06:01.860 --> 00:06:06.810 the fulfilled value of the promise will become dart body. 137 00:06:06.810 --> 00:06:08.750 So the data that is stored 138 00:06:08.750 --> 00:06:10.100 in the body, 139 00:06:10.100 --> 00:06:12.533 and then we can again, handle that. 140 00:06:13.620 --> 00:06:15.760 So data like this 141 00:06:16.870 --> 00:06:19.653 and then render country with data. 142 00:06:21.450 --> 00:06:23.280 And then here again, 143 00:06:23.280 --> 00:06:26.833 we pass in that CSS class for the neighbor. 144 00:06:28.740 --> 00:06:29.573 Okay. 145 00:06:29.573 --> 00:06:31.490 And that should already be it. 146 00:06:31.490 --> 00:06:34.160 And indeed, here we go. 147 00:06:34.160 --> 00:06:35.793 And if we try something else, 148 00:06:37.140 --> 00:06:39.173 let's say Germany, 149 00:06:40.070 --> 00:06:42.250 let's see what country we get 150 00:06:42.250 --> 00:06:43.643 and it's Austria. 151 00:06:44.480 --> 00:06:46.000 Okay. 152 00:06:46.000 --> 00:06:46.833 But anyway, 153 00:06:46.833 --> 00:06:51.833 let's just put it back to this one here and yeah, 154 00:06:51.940 --> 00:06:54.290 that's actually it already. 155 00:06:54.290 --> 00:06:55.710 So as you can see, 156 00:06:55.710 --> 00:06:56.810 promises really 157 00:06:56.810 --> 00:07:01.000 allow us to handle these complex asynchronous operations 158 00:07:01.000 --> 00:07:02.480 with as many steps 159 00:07:02.480 --> 00:07:03.920 as we want. 160 00:07:03.920 --> 00:07:07.010 So right now we have four steps here, even, 161 00:07:07.010 --> 00:07:09.490 but of course we could extend this as much 162 00:07:09.490 --> 00:07:10.930 as we want. 163 00:07:10.930 --> 00:07:13.230 So even if we wanted the neighbor of the neighbor 164 00:07:13.230 --> 00:07:14.380 of the neighbor, 165 00:07:14.380 --> 00:07:15.930 like 10 countries, 166 00:07:15.930 --> 00:07:19.110 we could easily do this by chaining all these promises 167 00:07:19.110 --> 00:07:21.120 one after another and all 168 00:07:21.120 --> 00:07:23.200 without the callback hell. 169 00:07:23.200 --> 00:07:25.360 So here, instead of the callback, 170 00:07:25.360 --> 00:07:29.760 hell we have what we call a flat chain of promises. 171 00:07:29.760 --> 00:07:32.390 And this one is again, 172 00:07:32.390 --> 00:07:35.640 very easy to understand and to read. 173 00:07:35.640 --> 00:07:39.220 So as a conclusion to this video and the previous one, 174 00:07:39.220 --> 00:07:40.330 promises really, 175 00:07:40.330 --> 00:07:44.010 are an incredibly powerful and elegant solution 176 00:07:44.010 --> 00:07:45.763 to handle asynchronous code. 177 00:07:46.640 --> 00:07:47.770 Now, just to finish, 178 00:07:47.770 --> 00:07:50.060 I want to show you a pretty common mistake 179 00:07:50.060 --> 00:07:51.940 that many beginners make, 180 00:07:51.940 --> 00:07:56.110 which is to basically chain this then method directly 181 00:07:56.110 --> 00:07:58.173 onto a new nested promise. 182 00:07:59.330 --> 00:08:01.060 So as we know, 183 00:08:01.060 --> 00:08:03.750 this one immediately returns a promise. 184 00:08:03.750 --> 00:08:08.190 And so many beginners basically do this instead, 185 00:08:08.190 --> 00:08:09.980 let me show it to you here. 186 00:08:09.980 --> 00:08:12.180 So instead of returning the new promise, 187 00:08:12.180 --> 00:08:16.150 they then chain theme then method right here. 188 00:08:16.150 --> 00:08:17.960 So right inside of 189 00:08:17.960 --> 00:08:19.063 this then method. 190 00:08:20.220 --> 00:08:22.720 Now this actually does still work, 191 00:08:22.720 --> 00:08:26.540 but then we are in fact back to callback hell. 192 00:08:26.540 --> 00:08:27.840 Because now indeed, 193 00:08:27.840 --> 00:08:30.100 we have one callback function here 194 00:08:30.100 --> 00:08:33.240 defined inside of another one. 195 00:08:33.240 --> 00:08:34.640 So inside of this, 196 00:08:34.640 --> 00:08:37.230 in closing callback function. 197 00:08:37.230 --> 00:08:38.270 Okay. 198 00:08:38.270 --> 00:08:39.250 And so of course 199 00:08:39.250 --> 00:08:41.510 that's exactly what we're trying to avoid. 200 00:08:41.510 --> 00:08:43.163 And so don't do this. 201 00:08:44.100 --> 00:08:46.210 So always return to promise 202 00:08:46.210 --> 00:08:49.090 and then handle it outside by simply continuing 203 00:08:49.090 --> 00:08:51.240 the chain like this. 204 00:08:51.240 --> 00:08:53.150 Alright, but I hope that this 205 00:08:53.150 --> 00:08:55.260 was already pretty obvious anyway, 206 00:08:55.260 --> 00:08:58.140 from all the explanations that I gave you throughout 207 00:08:58.140 --> 00:09:01.010 this lecture and the previous one. 208 00:09:01.010 --> 00:09:01.890 But anyway, 209 00:09:01.890 --> 00:09:05.520 let's now move on and actually handle errors because 210 00:09:05.520 --> 00:09:08.400 that is also a pretty common scenario when we work 211 00:09:08.400 --> 00:09:10.310 with promises and especially 212 00:09:10.310 --> 00:09:11.653 with Ajax calls.