WEBVTT 1 00:00:01.200 --> 00:00:05.190 So in the last lecture, we did a simple AJAX call 2 00:00:05.190 --> 00:00:08.450 to fetch data from a country's API. 3 00:00:08.450 --> 00:00:10.810 So we created a function for that. 4 00:00:10.810 --> 00:00:13.570 And as we call the function multiple times, 5 00:00:13.570 --> 00:00:17.660 multiple AJAX calls were made at the same time. 6 00:00:17.660 --> 00:00:20.420 So they were basically running in parallel. 7 00:00:20.420 --> 00:00:23.680 And we could not control which one finished first, 8 00:00:23.680 --> 00:00:25.250 remember that? 9 00:00:25.250 --> 00:00:27.170 However, in this lecture, 10 00:00:27.170 --> 00:00:30.310 let's create a sequence of AJAX calls, 11 00:00:30.310 --> 00:00:31.650 so that the second one 12 00:00:31.650 --> 00:00:34.623 runs only after the first one has finished. 13 00:00:36.410 --> 00:00:38.440 And here's what we're gonna do. 14 00:00:38.440 --> 00:00:41.140 So in the countries data here, 15 00:00:41.140 --> 00:00:45.850 there is some property of the bordering countries. 16 00:00:45.850 --> 00:00:49.380 So you see, this one here has the code ESP, 17 00:00:49.380 --> 00:00:51.330 which stands for Spain. 18 00:00:51.330 --> 00:00:52.860 And so that's because Spain 19 00:00:52.860 --> 00:00:55.920 is a bordering country of Portugal. 20 00:00:55.920 --> 00:00:57.480 And so what we will do now 21 00:00:57.480 --> 00:01:00.590 is after the first AJAX call is completed, 22 00:01:00.590 --> 00:01:02.460 we will get this border. 23 00:01:02.460 --> 00:01:03.890 And then based on this code, 24 00:01:03.890 --> 00:01:06.710 we will also render the neighboring country 25 00:01:06.710 --> 00:01:09.950 right here besides the original country. 26 00:01:09.950 --> 00:01:11.230 And so in this case, 27 00:01:11.230 --> 00:01:15.370 the second AJAX call really depends on the first one, 28 00:01:15.370 --> 00:01:18.060 because the data about neighboring countries, 29 00:01:18.060 --> 00:01:21.240 is of course a result of the first call. 30 00:01:21.240 --> 00:01:22.930 So without the first call, 31 00:01:22.930 --> 00:01:25.440 we wouldn't even know which data to fetch, 32 00:01:25.440 --> 00:01:27.010 in the second call. 33 00:01:27.010 --> 00:01:32.010 And so what we need to implement is a sequence of AJAX call. 34 00:01:32.010 --> 00:01:33.610 So here, I already copied 35 00:01:33.610 --> 00:01:37.810 the function from the last lecture, which is still up here. 36 00:01:37.810 --> 00:01:39.976 And so let's call this one here now, 37 00:01:39.976 --> 00:01:44.976 getCountryAndNeighbor. 38 00:01:47.850 --> 00:01:52.060 So, again, we get the country as an input. 39 00:01:52.060 --> 00:01:55.150 And then here, we do the first AJAX call. 40 00:01:55.150 --> 00:01:58.070 And then once the load event is fired, 41 00:01:58.070 --> 00:02:01.460 when the data arrives, we then handle that data. 42 00:02:01.460 --> 00:02:04.513 And so everything that we have here is still the same. 43 00:02:05.460 --> 00:02:09.480 Now, we will do this part here another time. 44 00:02:09.480 --> 00:02:12.510 So basically, once the neighboring country arrives, 45 00:02:12.510 --> 00:02:15.080 we also will want to render this one. 46 00:02:15.080 --> 00:02:17.560 And so let's export this functionality 47 00:02:17.560 --> 00:02:18.993 into its own function. 48 00:02:20.290 --> 00:02:22.730 So that we don't have to copy it later. 49 00:02:22.730 --> 00:02:26.640 And this also makes this function a little bit cleaner. 50 00:02:26.640 --> 00:02:31.330 So renderCountry, that's gonna be a function, 51 00:02:31.330 --> 00:02:34.490 which simply takes in some data. 52 00:02:34.490 --> 00:02:37.380 And select this, we don't have to change, 53 00:02:37.380 --> 00:02:38.883 the variable names in here. 54 00:02:42.500 --> 00:02:47.103 And so now here, let's then actually call that function. 55 00:02:47.970 --> 00:02:51.963 So renderCountry with data. 56 00:02:52.930 --> 00:02:55.180 And now we get this error here, 57 00:02:55.180 --> 00:02:58.620 because of course, this function no longer exists. 58 00:02:58.620 --> 00:03:00.797 So getCountryAndNeighbor. 59 00:03:01.690 --> 00:03:05.560 So as I save this now, this should look the same as before. 60 00:03:05.560 --> 00:03:07.233 And so indeed it does. 61 00:03:08.932 --> 00:03:12.430 But now here, let's actually get the neighbor country. 62 00:03:13.710 --> 00:03:17.913 So let's write that, Get neighbor country. 63 00:03:18.871 --> 00:03:21.823 And here actually, let's also do some comments now. 64 00:03:25.300 --> 00:03:27.743 So Render country 1, let's say. 65 00:03:28.979 --> 00:03:32.033 And here I will say, AJAX call country 1. 66 00:03:38.740 --> 00:03:41.123 So the neighbor country will then be country 2. 67 00:03:44.800 --> 00:03:49.547 So the neighbor is gonna be data.borders, I believe. 68 00:03:53.630 --> 00:03:55.483 So let's just check that here again. 69 00:03:57.460 --> 00:03:59.730 And so this is actually an array. 70 00:03:59.730 --> 00:04:03.410 And so we will simply render the first element. 71 00:04:03.410 --> 00:04:06.360 So in the case of Portugal, there is just one border. 72 00:04:06.360 --> 00:04:09.090 But in other countries, like Germany, 73 00:04:09.090 --> 00:04:11.283 there's like 10 borders or something. 74 00:04:12.480 --> 00:04:14.850 So let's just destructor here, 75 00:04:14.850 --> 00:04:17.670 basically just take the first element. 76 00:04:17.670 --> 00:04:19.830 But of course, there are also countries 77 00:04:19.830 --> 00:04:22.080 which have no neighbors at all. 78 00:04:22.080 --> 00:04:24.520 So islands, basically. 79 00:04:24.520 --> 00:04:26.100 And so for these cases, 80 00:04:26.100 --> 00:04:30.123 let's simply make sure that we don't run into any mistakes. 81 00:04:31.150 --> 00:04:34.283 And so in that case, we simply return immediately. 82 00:04:35.250 --> 00:04:37.780 But of course, if the neighbor does exist, 83 00:04:37.780 --> 00:04:40.733 then now we can do the second AJAX call. 84 00:04:41.640 --> 00:04:43.313 And so let's copy all of this. 85 00:04:46.760 --> 00:04:50.440 And so here AJAX call 2 86 00:04:50.440 --> 00:04:53.660 and now here of course we don't want to use the country, 87 00:04:53.660 --> 00:04:55.800 but he wants to use the neighbor. 88 00:04:55.800 --> 00:04:58.400 But there is one particularity about that 89 00:04:59.330 --> 00:05:01.980 because here the border. 90 00:05:01.980 --> 00:05:03.860 So this one here, this country, 91 00:05:03.860 --> 00:05:06.760 actually doesn't come with the name of the country. 92 00:05:06.760 --> 00:05:08.023 But with this code. 93 00:05:09.920 --> 00:05:14.503 But using our API, we can actually also search by the code. 94 00:05:16.060 --> 00:05:18.763 So, right here we have that. 95 00:05:19.690 --> 00:05:21.750 So right now we are using the name. 96 00:05:21.750 --> 00:05:24.403 But as I said, we can also search for the code. 97 00:05:25.300 --> 00:05:27.970 And so all we have to change is basically here, 98 00:05:27.970 --> 00:05:29.633 from name to alpha. 99 00:05:31.710 --> 00:05:35.563 So that's alpha here, and then here, the neighbor. 100 00:05:40.240 --> 00:05:43.830 And so now just like before, we have to then list them 101 00:05:43.830 --> 00:05:47.050 for the load event on this new request. 102 00:05:47.050 --> 00:05:49.470 And let's call this request 2, 103 00:05:49.470 --> 00:05:52.800 because of course, we can't do that on the same request 104 00:05:52.800 --> 00:05:54.500 that we did here in the beginning. 105 00:05:56.690 --> 00:06:00.143 So request 2 addEventListener. 106 00:06:01.830 --> 00:06:06.830 Load, and then, or callback function. 107 00:06:08.390 --> 00:06:12.750 And so you're starting to see now that the second AJAX call 108 00:06:12.750 --> 00:06:14.950 now in the way we are setting it up here 109 00:06:14.950 --> 00:06:17.980 is really dependent on the first one. 110 00:06:17.980 --> 00:06:21.340 So that's because basically we are firing of, 111 00:06:21.340 --> 00:06:24.670 the second AJAX call here, in the callback function 112 00:06:24.670 --> 00:06:27.840 of the first one, right? 113 00:06:27.840 --> 00:06:30.620 So basically, inside of this callback function, 114 00:06:30.620 --> 00:06:34.580 we are now adding a new EventListener for the new request. 115 00:06:34.580 --> 00:06:35.810 And so here, we now have 116 00:06:35.810 --> 00:06:38.163 one callback inside of the other one. 117 00:06:41.471 --> 00:06:43.490 And so we will talk about that 118 00:06:43.490 --> 00:06:45.950 once we have this code working. 119 00:06:45.950 --> 00:06:50.310 But for now, let's actually take a look at the result here. 120 00:06:50.310 --> 00:06:53.070 And so that's gonna be, request 121 00:06:53.070 --> 00:06:55.220 or actually just a disk keyword. 122 00:06:55.220 --> 00:06:58.673 So this.responseText. 123 00:07:00.460 --> 00:07:01.830 So let's see. 124 00:07:01.830 --> 00:07:05.110 And, indeed, now we get data about Spain. 125 00:07:05.110 --> 00:07:08.190 And no matter how many times we reload the page, 126 00:07:08.190 --> 00:07:12.093 it will now always, always appear after Portugal. 127 00:07:14.010 --> 00:07:18.190 Because there is no way that this AJAX call here can be made 128 00:07:18.190 --> 00:07:20.023 before the one on Portugal. 129 00:07:22.180 --> 00:07:25.900 Okay, and so now, well, let's just do the same 130 00:07:25.900 --> 00:07:26.863 as we did here. 131 00:07:28.330 --> 00:07:29.683 So we don't need this, 132 00:07:30.750 --> 00:07:35.750 let's say data2 should be JSON.parse, and then this. 133 00:07:41.210 --> 00:07:43.960 And of course, we need to also the destructure it then, 134 00:07:46.140 --> 00:07:47.673 logging into the Console. 135 00:07:48.780 --> 00:07:50.513 But now we get some error here. 136 00:07:52.090 --> 00:07:54.760 So let's just take a look at the result itself 137 00:07:54.760 --> 00:07:56.333 without any destructuring. 138 00:07:57.220 --> 00:07:59.790 Oh, and so now it works. 139 00:07:59.790 --> 00:08:03.660 And the reason for that is that the response of this API 140 00:08:03.660 --> 00:08:08.180 is actually no longer an array, when we search for the code. 141 00:08:08.180 --> 00:08:10.750 So here we have this alpha, remember, 142 00:08:10.750 --> 00:08:13.690 and so this time, we are searching for country codes, 143 00:08:13.690 --> 00:08:15.640 and not for country names. 144 00:08:15.640 --> 00:08:18.050 And so the country codes are unique. 145 00:08:18.050 --> 00:08:21.510 And so therefore, they can always just be one result. 146 00:08:21.510 --> 00:08:25.310 And so that's the reason why no array is returned. 147 00:08:25.310 --> 00:08:28.513 And probably it says here so, in the documentation. 148 00:08:29.700 --> 00:08:31.640 Well, it doesn't say so. 149 00:08:31.640 --> 00:08:34.540 But if we would have just simply inspected 150 00:08:34.540 --> 00:08:35.810 the response here, 151 00:08:35.810 --> 00:08:39.920 then we would have understood that as well. 152 00:08:39.920 --> 00:08:41.960 But anyway, now it worked. 153 00:08:41.960 --> 00:08:46.053 And so let's now render, this country here as well. 154 00:08:47.840 --> 00:08:52.840 So data2 and now let's wait, and there it is, great. 155 00:08:54.350 --> 00:08:57.050 Now Actually, I created a special class, 156 00:08:57.050 --> 00:08:59.140 here for the neighboring country, 157 00:08:59.140 --> 00:09:01.393 so that it appears a little bit smaller. 158 00:09:02.700 --> 00:09:04.180 And so when it is the neighbor, 159 00:09:04.180 --> 00:09:06.963 we want to attach some class here to the country. 160 00:09:07.950 --> 00:09:11.193 And so let's pass that class in. 161 00:09:12.700 --> 00:09:14.400 So let's say className. 162 00:09:14.400 --> 00:09:17.100 And by default, we set it to nothing. 163 00:09:17.100 --> 00:09:20.430 So here, we will just edit to the string, like this. 164 00:09:23.930 --> 00:09:25.530 And now when it is a neighbor, 165 00:09:25.530 --> 00:09:30.530 we can just pass in, neighbor like this. 166 00:09:32.180 --> 00:09:36.640 Give it a safe, and yeah, so that looks a bit nicer. 167 00:09:36.640 --> 00:09:39.623 We get information that this is a neighbor country. 168 00:09:40.750 --> 00:09:45.750 And so now let's try this, for example, for the USA as well. 169 00:09:46.480 --> 00:09:48.853 But now I just want to do one at a time. 170 00:09:49.800 --> 00:09:52.723 So here we should probably get Mexico or Canada. 171 00:09:53.650 --> 00:09:55.190 And indeed, here it is. 172 00:09:55.190 --> 00:09:59.010 Here is Canada, the neighboring country of the US. 173 00:09:59.010 --> 00:10:00.170 And so one more time. 174 00:10:00.170 --> 00:10:03.110 This second AJAX call would not have been possible 175 00:10:03.110 --> 00:10:04.570 without the first one. 176 00:10:04.570 --> 00:10:06.610 Because otherwise, how would we know 177 00:10:06.610 --> 00:10:09.973 that the second country here needed to be Canada? 178 00:10:12.130 --> 00:10:15.450 So, again, we have one AJAX call here 179 00:10:15.450 --> 00:10:17.870 that depends on another one. 180 00:10:17.870 --> 00:10:20.630 And so what we have here is one callback function 181 00:10:20.630 --> 00:10:22.303 inside of another one. 182 00:10:23.380 --> 00:10:26.640 So you see here, we attach the first callback function. 183 00:10:26.640 --> 00:10:30.690 And then inside of that, we have yet another one. 184 00:10:30.690 --> 00:10:34.720 So in other words, here, we have nested callbacks. 185 00:10:34.720 --> 00:10:36.500 But now imagine that we wanted 186 00:10:36.500 --> 00:10:39.020 to do more requests in sequence, 187 00:10:39.020 --> 00:10:41.890 like the neighbor of the neighbor of the neighbor, 188 00:10:41.890 --> 00:10:44.040 and like 10 times over. 189 00:10:44.040 --> 00:10:45.790 So in that case, we would end up 190 00:10:45.790 --> 00:10:49.200 with callbacks inside of callbacks inside of callbacks, 191 00:10:49.200 --> 00:10:51.060 like 10 times. 192 00:10:51.060 --> 00:10:53.600 And actually, for that kind of structure. 193 00:10:53.600 --> 00:10:57.040 And for that kind of behavior, we have a special name. 194 00:10:57.040 --> 00:11:00.400 And that special name is callback hell. 195 00:11:00.400 --> 00:11:02.570 So basically, callback hell 196 00:11:02.570 --> 00:11:05.460 is when we have a lot of nested callbacks 197 00:11:05.460 --> 00:11:09.690 in order to execute asynchronous tasks in sequence. 198 00:11:09.690 --> 00:11:13.400 And in fact, this happens for all asynchronous tasks, 199 00:11:13.400 --> 00:11:15.520 which are handled by callbacks. 200 00:11:15.520 --> 00:11:18.060 And not just AJAX calls. 201 00:11:18.060 --> 00:11:22.373 So for example, let's say we have a set timeout function. 202 00:11:25.190 --> 00:11:29.170 And then here, we want to log something to the Console, 203 00:11:29.170 --> 00:11:33.310 like 1 second passed, but then also, 204 00:11:33.310 --> 00:11:35.463 we want to start another timeout. 205 00:11:36.760 --> 00:11:38.863 Let's just set 1000 here. 206 00:11:40.010 --> 00:11:41.623 So let's copy this one here. 207 00:11:42.650 --> 00:11:45.200 And so as I just said, let's say, 208 00:11:45.200 --> 00:11:47.620 that here we wanted to start a new timer 209 00:11:47.620 --> 00:11:49.883 after the first timer has finished. 210 00:11:51.190 --> 00:11:53.423 So here, we can say 2 seconds passed. 211 00:11:54.610 --> 00:11:57.190 And we can even add another one. 212 00:11:57.190 --> 00:12:01.561 So never mind about what just happened in the Console. 213 00:12:01.561 --> 00:12:04.763 And here, why not add yet another one? 214 00:12:07.690 --> 00:12:11.083 And so now they should appear like one, two, three, four. 215 00:12:12.310 --> 00:12:15.960 And so here to of course, we have callback hell. 216 00:12:15.960 --> 00:12:19.700 And in fact, callback hell is pretty easy to identify 217 00:12:19.700 --> 00:12:24.700 by this triangular shape that is formed here, you see that. 218 00:12:25.150 --> 00:12:28.453 And also the same is starting to appear here. 219 00:12:30.640 --> 00:12:32.633 So if we had more callbacks in here, 220 00:12:32.633 --> 00:12:36.310 then we would start to see a lot more indentation here. 221 00:12:36.310 --> 00:12:40.400 And then this triangular shape, would also appear there. 222 00:12:40.400 --> 00:12:42.280 Now, the problem with callback hell 223 00:12:42.280 --> 00:12:45.430 is that it makes our code look very messy. 224 00:12:45.430 --> 00:12:47.000 But even more important, 225 00:12:47.000 --> 00:12:49.380 it makes our code harder to maintain, 226 00:12:49.380 --> 00:12:53.340 and very difficult to understand, and to reason about, 227 00:12:53.340 --> 00:12:55.760 and code that is hard to understand 228 00:12:55.760 --> 00:12:57.670 and difficult to reason about. 229 00:12:57.670 --> 00:13:01.500 Will have more bugs, and it's just worse code. 230 00:13:01.500 --> 00:13:03.410 So this is a great rule 231 00:13:03.410 --> 00:13:06.410 that you should always remember and keep in mind. 232 00:13:06.410 --> 00:13:10.690 So again, the rule is that code that's hard to understand, 233 00:13:10.690 --> 00:13:14.620 is basically bad code, because it will have more bugs, 234 00:13:14.620 --> 00:13:17.050 because the harder it is to understand code 235 00:13:17.050 --> 00:13:18.860 and to reason about the code, 236 00:13:18.860 --> 00:13:22.080 the more difficult it will be to add new features 237 00:13:22.080 --> 00:13:25.400 and to add more functionality to the application. 238 00:13:25.400 --> 00:13:29.280 But anyway, given all these problems with callback hell, 239 00:13:29.280 --> 00:13:32.810 we of course, need a way to solve callback hell. 240 00:13:32.810 --> 00:13:36.020 And fortunately for us, since ES6, 241 00:13:36.020 --> 00:13:39.660 there is actually a way of escaping callback hell 242 00:13:39.660 --> 00:13:42.570 by using something called promises. 243 00:13:42.570 --> 00:13:44.690 And so let's now take the next step 244 00:13:44.690 --> 00:13:48.000 in our journey of asynchronous JavaScript, 245 00:13:48.000 --> 00:13:50.493 which is to learn all about promises.