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.