Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,200 --> 00:00:05,190
So in the last lecture, we did a simple AJAX call
2
2
00:00:05,190 --> 00:00:08,450
to fetch data from a country's API.
3
3
00:00:08,450 --> 00:00:10,810
So we created a function for that.
4
4
00:00:10,810 --> 00:00:13,570
And as we call the function multiple times,
5
5
00:00:13,570 --> 00:00:17,660
multiple AJAX calls were made at the same time.
6
6
00:00:17,660 --> 00:00:20,420
So they were basically running in parallel.
7
7
00:00:20,420 --> 00:00:23,680
And we could not control which one finished first,
8
8
00:00:23,680 --> 00:00:25,250
remember that?
9
9
00:00:25,250 --> 00:00:27,170
However, in this lecture,
10
10
00:00:27,170 --> 00:00:30,310
let's create a sequence of AJAX calls,
11
11
00:00:30,310 --> 00:00:31,650
so that the second one
12
12
00:00:31,650 --> 00:00:34,623
runs only after the first one has finished.
13
13
00:00:36,410 --> 00:00:38,440
And here's what we're gonna do.
14
14
00:00:38,440 --> 00:00:41,140
So in the countries data here,
15
15
00:00:41,140 --> 00:00:45,850
there is some property of the bordering countries.
16
16
00:00:45,850 --> 00:00:49,380
So you see, this one here has the code ESP,
17
17
00:00:49,380 --> 00:00:51,330
which stands for Spain.
18
18
00:00:51,330 --> 00:00:52,860
And so that's because Spain
19
19
00:00:52,860 --> 00:00:55,920
is a bordering country of Portugal.
20
20
00:00:55,920 --> 00:00:57,480
And so what we will do now
21
21
00:00:57,480 --> 00:01:00,590
is after the first AJAX call is completed,
22
22
00:01:00,590 --> 00:01:02,460
we will get this border.
23
23
00:01:02,460 --> 00:01:03,890
And then based on this code,
24
24
00:01:03,890 --> 00:01:06,710
we will also render the neighboring country
25
25
00:01:06,710 --> 00:01:09,950
right here besides the original country.
26
26
00:01:09,950 --> 00:01:11,230
And so in this case,
27
27
00:01:11,230 --> 00:01:15,370
the second AJAX call really depends on the first one,
28
28
00:01:15,370 --> 00:01:18,060
because the data about neighboring countries,
29
29
00:01:18,060 --> 00:01:21,240
is of course a result of the first call.
30
30
00:01:21,240 --> 00:01:22,930
So without the first call,
31
31
00:01:22,930 --> 00:01:25,440
we wouldn't even know which data to fetch,
32
32
00:01:25,440 --> 00:01:27,010
in the second call.
33
33
00:01:27,010 --> 00:01:32,010
And so what we need to implement is a sequence of AJAX call.
34
34
00:01:32,010 --> 00:01:33,610
So here, I already copied
35
35
00:01:33,610 --> 00:01:37,810
the function from the last lecture, which is still up here.
36
36
00:01:37,810 --> 00:01:39,976
And so let's call this one here now,
37
37
00:01:39,976 --> 00:01:44,976
getCountryAndNeighbor.
38
38
00:01:47,850 --> 00:01:52,060
So, again, we get the country as an input.
39
39
00:01:52,060 --> 00:01:55,150
And then here, we do the first AJAX call.
40
40
00:01:55,150 --> 00:01:58,070
And then once the load event is fired,
41
41
00:01:58,070 --> 00:02:01,460
when the data arrives, we then handle that data.
42
42
00:02:01,460 --> 00:02:04,513
And so everything that we have here is still the same.
43
43
00:02:05,460 --> 00:02:09,480
Now, we will do this part here another time.
44
44
00:02:09,480 --> 00:02:12,510
So basically, once the neighboring country arrives,
45
45
00:02:12,510 --> 00:02:15,080
we also will want to render this one.
46
46
00:02:15,080 --> 00:02:17,560
And so let's export this functionality
47
47
00:02:17,560 --> 00:02:18,993
into its own function.
48
48
00:02:20,290 --> 00:02:22,730
So that we don't have to copy it later.
49
49
00:02:22,730 --> 00:02:26,640
And this also makes this function a little bit cleaner.
50
50
00:02:26,640 --> 00:02:31,330
So renderCountry, that's gonna be a function,
51
51
00:02:31,330 --> 00:02:34,490
which simply takes in some data.
52
52
00:02:34,490 --> 00:02:37,380
And select this, we don't have to change,
53
53
00:02:37,380 --> 00:02:38,883
the variable names in here.
54
54
00:02:42,500 --> 00:02:47,103
And so now here, let's then actually call that function.
55
55
00:02:47,970 --> 00:02:51,963
So renderCountry with data.
56
56
00:02:52,930 --> 00:02:55,180
And now we get this error here,
57
57
00:02:55,180 --> 00:02:58,620
because of course, this function no longer exists.
58
58
00:02:58,620 --> 00:03:00,797
So getCountryAndNeighbor.
59
59
00:03:01,690 --> 00:03:05,560
So as I save this now, this should look the same as before.
60
60
00:03:05,560 --> 00:03:07,233
And so indeed it does.
61
61
00:03:08,932 --> 00:03:12,430
But now here, let's actually get the neighbor country.
62
62
00:03:13,710 --> 00:03:17,913
So let's write that, Get neighbor country.
63
63
00:03:18,871 --> 00:03:21,823
And here actually, let's also do some comments now.
64
64
00:03:25,300 --> 00:03:27,743
So Render country 1, let's say.
65
65
00:03:28,979 --> 00:03:32,033
And here I will say, AJAX call country 1.
66
66
00:03:38,740 --> 00:03:41,123
So the neighbor country will then be country 2.
67
67
00:03:44,800 --> 00:03:49,547
So the neighbor is gonna be data.borders, I believe.
68
68
00:03:53,630 --> 00:03:55,483
So let's just check that here again.
69
69
00:03:57,460 --> 00:03:59,730
And so this is actually an array.
70
70
00:03:59,730 --> 00:04:03,410
And so we will simply render the first element.
71
71
00:04:03,410 --> 00:04:06,360
So in the case of Portugal, there is just one border.
72
72
00:04:06,360 --> 00:04:09,090
But in other countries, like Germany,
73
73
00:04:09,090 --> 00:04:11,283
there's like 10 borders or something.
74
74
00:04:12,480 --> 00:04:14,850
So let's just destructor here,
75
75
00:04:14,850 --> 00:04:17,670
basically just take the first element.
76
76
00:04:17,670 --> 00:04:19,830
But of course, there are also countries
77
77
00:04:19,830 --> 00:04:22,080
which have no neighbors at all.
78
78
00:04:22,080 --> 00:04:24,520
So islands, basically.
79
79
00:04:24,520 --> 00:04:26,100
And so for these cases,
80
80
00:04:26,100 --> 00:04:30,123
let's simply make sure that we don't run into any mistakes.
81
81
00:04:31,150 --> 00:04:34,283
And so in that case, we simply return immediately.
82
82
00:04:35,250 --> 00:04:37,780
But of course, if the neighbor does exist,
83
83
00:04:37,780 --> 00:04:40,733
then now we can do the second AJAX call.
84
84
00:04:41,640 --> 00:04:43,313
And so let's copy all of this.
85
85
00:04:46,760 --> 00:04:50,440
And so here AJAX call 2
86
86
00:04:50,440 --> 00:04:53,660
and now here of course we don't want to use the country,
87
87
00:04:53,660 --> 00:04:55,800
but he wants to use the neighbor.
88
88
00:04:55,800 --> 00:04:58,400
But there is one particularity about that
89
89
00:04:59,330 --> 00:05:01,980
because here the border.
90
90
00:05:01,980 --> 00:05:03,860
So this one here, this country,
91
91
00:05:03,860 --> 00:05:06,760
actually doesn't come with the name of the country.
92
92
00:05:06,760 --> 00:05:08,023
But with this code.
93
93
00:05:09,920 --> 00:05:14,503
But using our API, we can actually also search by the code.
94
94
00:05:16,060 --> 00:05:18,763
So, right here we have that.
95
95
00:05:19,690 --> 00:05:21,750
So right now we are using the name.
96
96
00:05:21,750 --> 00:05:24,403
But as I said, we can also search for the code.
97
97
00:05:25,300 --> 00:05:27,970
And so all we have to change is basically here,
98
98
00:05:27,970 --> 00:05:29,633
from name to alpha.
99
99
00:05:31,710 --> 00:05:35,563
So that's alpha here, and then here, the neighbor.
100
100
00:05:40,240 --> 00:05:43,830
And so now just like before, we have to then list them
101
101
00:05:43,830 --> 00:05:47,050
for the load event on this new request.
102
102
00:05:47,050 --> 00:05:49,470
And let's call this request 2,
103
103
00:05:49,470 --> 00:05:52,800
because of course, we can't do that on the same request
104
104
00:05:52,800 --> 00:05:54,500
that we did here in the beginning.
105
105
00:05:56,690 --> 00:06:00,143
So request 2 addEventListener.
106
106
00:06:01,830 --> 00:06:06,830
Load, and then, or callback function.
107
107
00:06:08,390 --> 00:06:12,750
And so you're starting to see now that the second AJAX call
108
108
00:06:12,750 --> 00:06:14,950
now in the way we are setting it up here
109
109
00:06:14,950 --> 00:06:17,980
is really dependent on the first one.
110
110
00:06:17,980 --> 00:06:21,340
So that's because basically we are firing of,
111
111
00:06:21,340 --> 00:06:24,670
the second AJAX call here, in the callback function
112
112
00:06:24,670 --> 00:06:27,840
of the first one, right?
113
113
00:06:27,840 --> 00:06:30,620
So basically, inside of this callback function,
114
114
00:06:30,620 --> 00:06:34,580
we are now adding a new EventListener for the new request.
115
115
00:06:34,580 --> 00:06:35,810
And so here, we now have
116
116
00:06:35,810 --> 00:06:38,163
one callback inside of the other one.
117
117
00:06:41,471 --> 00:06:43,490
And so we will talk about that
118
118
00:06:43,490 --> 00:06:45,950
once we have this code working.
119
119
00:06:45,950 --> 00:06:50,310
But for now, let's actually take a look at the result here.
120
120
00:06:50,310 --> 00:06:53,070
And so that's gonna be, request
121
121
00:06:53,070 --> 00:06:55,220
or actually just a disk keyword.
122
122
00:06:55,220 --> 00:06:58,673
So this.responseText.
123
123
00:07:00,460 --> 00:07:01,830
So let's see.
124
124
00:07:01,830 --> 00:07:05,110
And, indeed, now we get data about Spain.
125
125
00:07:05,110 --> 00:07:08,190
And no matter how many times we reload the page,
126
126
00:07:08,190 --> 00:07:12,093
it will now always, always appear after Portugal.
127
127
00:07:14,010 --> 00:07:18,190
Because there is no way that this AJAX call here can be made
128
128
00:07:18,190 --> 00:07:20,023
before the one on Portugal.
129
129
00:07:22,180 --> 00:07:25,900
Okay, and so now, well, let's just do the same
130
130
00:07:25,900 --> 00:07:26,863
as we did here.
131
131
00:07:28,330 --> 00:07:29,683
So we don't need this,
132
132
00:07:30,750 --> 00:07:35,750
let's say data2 should be JSON.parse, and then this.
133
133
00:07:41,210 --> 00:07:43,960
And of course, we need to also the destructure it then,
134
134
00:07:46,140 --> 00:07:47,673
logging into the Console.
135
135
00:07:48,780 --> 00:07:50,513
But now we get some error here.
136
136
00:07:52,090 --> 00:07:54,760
So let's just take a look at the result itself
137
137
00:07:54,760 --> 00:07:56,333
without any destructuring.
138
138
00:07:57,220 --> 00:07:59,790
Oh, and so now it works.
139
139
00:07:59,790 --> 00:08:03,660
And the reason for that is that the response of this API
140
140
00:08:03,660 --> 00:08:08,180
is actually no longer an array, when we search for the code.
141
141
00:08:08,180 --> 00:08:10,750
So here we have this alpha, remember,
142
142
00:08:10,750 --> 00:08:13,690
and so this time, we are searching for country codes,
143
143
00:08:13,690 --> 00:08:15,640
and not for country names.
144
144
00:08:15,640 --> 00:08:18,050
And so the country codes are unique.
145
145
00:08:18,050 --> 00:08:21,510
And so therefore, they can always just be one result.
146
146
00:08:21,510 --> 00:08:25,310
And so that's the reason why no array is returned.
147
147
00:08:25,310 --> 00:08:28,513
And probably it says here so, in the documentation.
148
148
00:08:29,700 --> 00:08:31,640
Well, it doesn't say so.
149
149
00:08:31,640 --> 00:08:34,540
But if we would have just simply inspected
150
150
00:08:34,540 --> 00:08:35,810
the response here,
151
151
00:08:35,810 --> 00:08:39,920
then we would have understood that as well.
152
152
00:08:39,920 --> 00:08:41,960
But anyway, now it worked.
153
153
00:08:41,960 --> 00:08:46,053
And so let's now render, this country here as well.
154
154
00:08:47,840 --> 00:08:52,840
So data2 and now let's wait, and there it is, great.
155
155
00:08:54,350 --> 00:08:57,050
Now Actually, I created a special class,
156
156
00:08:57,050 --> 00:08:59,140
here for the neighboring country,
157
157
00:08:59,140 --> 00:09:01,393
so that it appears a little bit smaller.
158
158
00:09:02,700 --> 00:09:04,180
And so when it is the neighbor,
159
159
00:09:04,180 --> 00:09:06,963
we want to attach some class here to the country.
160
160
00:09:07,950 --> 00:09:11,193
And so let's pass that class in.
161
161
00:09:12,700 --> 00:09:14,400
So let's say className.
162
162
00:09:14,400 --> 00:09:17,100
And by default, we set it to nothing.
163
163
00:09:17,100 --> 00:09:20,430
So here, we will just edit to the string, like this.
164
164
00:09:23,930 --> 00:09:25,530
And now when it is a neighbor,
165
165
00:09:25,530 --> 00:09:30,530
we can just pass in, neighbor like this.
166
166
00:09:32,180 --> 00:09:36,640
Give it a safe, and yeah, so that looks a bit nicer.
167
167
00:09:36,640 --> 00:09:39,623
We get information that this is a neighbor country.
168
168
00:09:40,750 --> 00:09:45,750
And so now let's try this, for example, for the USA as well.
169
169
00:09:46,480 --> 00:09:48,853
But now I just want to do one at a time.
170
170
00:09:49,800 --> 00:09:52,723
So here we should probably get Mexico or Canada.
171
171
00:09:53,650 --> 00:09:55,190
And indeed, here it is.
172
172
00:09:55,190 --> 00:09:59,010
Here is Canada, the neighboring country of the US.
173
173
00:09:59,010 --> 00:10:00,170
And so one more time.
174
174
00:10:00,170 --> 00:10:03,110
This second AJAX call would not have been possible
175
175
00:10:03,110 --> 00:10:04,570
without the first one.
176
176
00:10:04,570 --> 00:10:06,610
Because otherwise, how would we know
177
177
00:10:06,610 --> 00:10:09,973
that the second country here needed to be Canada?
178
178
00:10:12,130 --> 00:10:15,450
So, again, we have one AJAX call here
179
179
00:10:15,450 --> 00:10:17,870
that depends on another one.
180
180
00:10:17,870 --> 00:10:20,630
And so what we have here is one callback function
181
181
00:10:20,630 --> 00:10:22,303
inside of another one.
182
182
00:10:23,380 --> 00:10:26,640
So you see here, we attach the first callback function.
183
183
00:10:26,640 --> 00:10:30,690
And then inside of that, we have yet another one.
184
184
00:10:30,690 --> 00:10:34,720
So in other words, here, we have nested callbacks.
185
185
00:10:34,720 --> 00:10:36,500
But now imagine that we wanted
186
186
00:10:36,500 --> 00:10:39,020
to do more requests in sequence,
187
187
00:10:39,020 --> 00:10:41,890
like the neighbor of the neighbor of the neighbor,
188
188
00:10:41,890 --> 00:10:44,040
and like 10 times over.
189
189
00:10:44,040 --> 00:10:45,790
So in that case, we would end up
190
190
00:10:45,790 --> 00:10:49,200
with callbacks inside of callbacks inside of callbacks,
191
191
00:10:49,200 --> 00:10:51,060
like 10 times.
192
192
00:10:51,060 --> 00:10:53,600
And actually, for that kind of structure.
193
193
00:10:53,600 --> 00:10:57,040
And for that kind of behavior, we have a special name.
194
194
00:10:57,040 --> 00:11:00,400
And that special name is callback hell.
195
195
00:11:00,400 --> 00:11:02,570
So basically, callback hell
196
196
00:11:02,570 --> 00:11:05,460
is when we have a lot of nested callbacks
197
197
00:11:05,460 --> 00:11:09,690
in order to execute asynchronous tasks in sequence.
198
198
00:11:09,690 --> 00:11:13,400
And in fact, this happens for all asynchronous tasks,
199
199
00:11:13,400 --> 00:11:15,520
which are handled by callbacks.
200
200
00:11:15,520 --> 00:11:18,060
And not just AJAX calls.
201
201
00:11:18,060 --> 00:11:22,373
So for example, let's say we have a set timeout function.
202
202
00:11:25,190 --> 00:11:29,170
And then here, we want to log something to the Console,
203
203
00:11:29,170 --> 00:11:33,310
like 1 second passed, but then also,
204
204
00:11:33,310 --> 00:11:35,463
we want to start another timeout.
205
205
00:11:36,760 --> 00:11:38,863
Let's just set 1000 here.
206
206
00:11:40,010 --> 00:11:41,623
So let's copy this one here.
207
207
00:11:42,650 --> 00:11:45,200
And so as I just said, let's say,
208
208
00:11:45,200 --> 00:11:47,620
that here we wanted to start a new timer
209
209
00:11:47,620 --> 00:11:49,883
after the first timer has finished.
210
210
00:11:51,190 --> 00:11:53,423
So here, we can say 2 seconds passed.
211
211
00:11:54,610 --> 00:11:57,190
And we can even add another one.
212
212
00:11:57,190 --> 00:12:01,561
So never mind about what just happened in the Console.
213
213
00:12:01,561 --> 00:12:04,763
And here, why not add yet another one?
214
214
00:12:07,690 --> 00:12:11,083
And so now they should appear like one, two, three, four.
215
215
00:12:12,310 --> 00:12:15,960
And so here to of course, we have callback hell.
216
216
00:12:15,960 --> 00:12:19,700
And in fact, callback hell is pretty easy to identify
217
217
00:12:19,700 --> 00:12:24,700
by this triangular shape that is formed here, you see that.
218
218
00:12:25,150 --> 00:12:28,453
And also the same is starting to appear here.
219
219
00:12:30,640 --> 00:12:32,633
So if we had more callbacks in here,
220
220
00:12:32,633 --> 00:12:36,310
then we would start to see a lot more indentation here.
221
221
00:12:36,310 --> 00:12:40,400
And then this triangular shape, would also appear there.
222
222
00:12:40,400 --> 00:12:42,280
Now, the problem with callback hell
223
223
00:12:42,280 --> 00:12:45,430
is that it makes our code look very messy.
224
224
00:12:45,430 --> 00:12:47,000
But even more important,
225
225
00:12:47,000 --> 00:12:49,380
it makes our code harder to maintain,
226
226
00:12:49,380 --> 00:12:53,340
and very difficult to understand, and to reason about,
227
227
00:12:53,340 --> 00:12:55,760
and code that is hard to understand
228
228
00:12:55,760 --> 00:12:57,670
and difficult to reason about.
229
229
00:12:57,670 --> 00:13:01,500
Will have more bugs, and it's just worse code.
230
230
00:13:01,500 --> 00:13:03,410
So this is a great rule
231
231
00:13:03,410 --> 00:13:06,410
that you should always remember and keep in mind.
232
232
00:13:06,410 --> 00:13:10,690
So again, the rule is that code that's hard to understand,
233
233
00:13:10,690 --> 00:13:14,620
is basically bad code, because it will have more bugs,
234
234
00:13:14,620 --> 00:13:17,050
because the harder it is to understand code
235
235
00:13:17,050 --> 00:13:18,860
and to reason about the code,
236
236
00:13:18,860 --> 00:13:22,080
the more difficult it will be to add new features
237
237
00:13:22,080 --> 00:13:25,400
and to add more functionality to the application.
238
238
00:13:25,400 --> 00:13:29,280
But anyway, given all these problems with callback hell,
239
239
00:13:29,280 --> 00:13:32,810
we of course, need a way to solve callback hell.
240
240
00:13:32,810 --> 00:13:36,020
And fortunately for us, since ES6,
241
241
00:13:36,020 --> 00:13:39,660
there is actually a way of escaping callback hell
242
242
00:13:39,660 --> 00:13:42,570
by using something called promises.
243
243
00:13:42,570 --> 00:13:44,690
And so let's now take the next step
244
244
00:13:44,690 --> 00:13:48,000
in our journey of asynchronous JavaScript,
245
245
00:13:48,000 --> 00:13:50,493
which is to learn all about promises.
21448
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.