Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:00,765 --> 00:00:04,650
Let's now learn how to chain promises in order
2
2
00:00:04,650 --> 00:00:07,350
to also render the neighboring country,
3
3
00:00:07,350 --> 00:00:09,010
of the initial country
4
4
00:00:09,010 --> 00:00:10,460
that we give to the function.
5
5
00:00:12,550 --> 00:00:16,530
And actually, we already have a small chain of promises
6
6
00:00:16,530 --> 00:00:19,110
because of this JSON function.
7
7
00:00:19,110 --> 00:00:19,943
And so here,
8
8
00:00:19,943 --> 00:00:22,860
these two thens called and sequence
9
9
00:00:22,860 --> 00:00:25,860
are basically already a small chain.
10
10
00:00:25,860 --> 00:00:27,780
But anyway, in this lecture,
11
11
00:00:27,780 --> 00:00:30,770
we will now take chaining to a new level
12
12
00:00:30,770 --> 00:00:32,620
and actually chain together,
13
13
00:00:32,620 --> 00:00:35,070
two sequential Ajax calls.
14
14
00:00:35,070 --> 00:00:38,010
So just like before we first get data
15
15
00:00:38,010 --> 00:00:39,590
about the country.
16
16
00:00:39,590 --> 00:00:40,850
And so that's the part
17
17
00:00:40,850 --> 00:00:42,520
that we already have here.
18
18
00:00:42,520 --> 00:00:44,800
But then we also want to get the data
19
19
00:00:44,800 --> 00:00:46,970
about the neighboring country.
20
20
00:00:46,970 --> 00:00:47,970
And so again,
21
21
00:00:47,970 --> 00:00:51,110
the second Ajax call depends on the data
22
22
00:00:51,110 --> 00:00:52,670
from the first call.
23
23
00:00:52,670 --> 00:00:55,393
And so they need to be done in sequence.
24
24
00:00:56,500 --> 00:00:59,783
So let's simply modify what we already have here.
25
25
00:01:00,720 --> 00:01:03,330
And so the second Ajax call basically needs
26
26
00:01:03,330 --> 00:01:04,710
to happen here in
27
27
00:01:04,710 --> 00:01:07,163
this then handler.
28
28
00:01:08,820 --> 00:01:10,973
So as soon as we get the data,
29
29
00:01:12,050 --> 00:01:14,330
then we need to get the neighbor country
30
30
00:01:14,330 --> 00:01:17,213
and do the Ajax call for that one as well.
31
31
00:01:19,360 --> 00:01:23,810
So let's get the neighbor and we already know
32
32
00:01:23,810 --> 00:01:27,550
that it is at data zero at borders.
33
33
00:01:32,120 --> 00:01:34,240
And then also the first one.
34
34
00:01:34,240 --> 00:01:36,270
And just like before, let's say,
35
35
00:01:36,270 --> 00:01:37,763
if there is no neighbor,
36
36
00:01:39,240 --> 00:01:41,280
then return immediately.
37
37
00:01:41,280 --> 00:01:43,530
And actually this is not going to work,
38
38
00:01:43,530 --> 00:01:45,890
but nevermind about this for now.
39
39
00:01:45,890 --> 00:01:48,440
So we will talk about error handling actually
40
40
00:01:48,440 --> 00:01:49,513
in the next video.
41
41
00:01:50,700 --> 00:01:53,063
Now here, there is some kind of problem.
42
42
00:01:53,940 --> 00:01:58,870
Now we're missing the closing parenthesis here now.
43
43
00:01:58,870 --> 00:02:00,290
Right?
44
44
00:02:00,290 --> 00:02:02,340
But now there is no error.
45
45
00:02:02,340 --> 00:02:05,533
And so let's do the second Ajax call.
46
46
00:02:06,540 --> 00:02:07,970
And let me just get the URL
47
47
00:02:07,970 --> 00:02:09,033
from up here.
48
48
00:02:10,060 --> 00:02:11,363
So that's this one.
49
49
00:02:14,660 --> 00:02:15,937
Now.Okay.
50
50
00:02:15,937 --> 00:02:19,220
And so, we use again fetch
51
51
00:02:21,040 --> 00:02:22,283
and then the URL.
52
52
00:02:24,740 --> 00:02:27,210
So let's call it country two and
53
53
00:02:27,210 --> 00:02:32,093
to your country one, all right.
54
54
00:02:33,170 --> 00:02:34,080
Now, for now,
55
55
00:02:34,080 --> 00:02:35,860
this is not going to do anything
56
56
00:02:35,860 --> 00:02:38,100
because what we need to do now is
57
57
00:02:38,100 --> 00:02:41,110
to actually return does new promise,
58
58
00:02:41,110 --> 00:02:43,120
because then when we do that,
59
59
00:02:43,120 --> 00:02:46,150
we will be able to chain a new then method
60
60
00:02:46,150 --> 00:02:49,563
on the result of this then method.
61
61
00:02:51,690 --> 00:02:52,600
All right.
62
62
00:02:52,600 --> 00:02:55,000
So that's a bit similar to what we did here
63
63
00:02:55,000 --> 00:02:56,373
with the JSON method,
64
64
00:02:57,280 --> 00:02:59,890
which remember also returned to promise.
65
65
00:02:59,890 --> 00:03:01,690
And so we return all of
66
66
00:03:01,690 --> 00:03:03,130
that promise here,
67
67
00:03:03,130 --> 00:03:06,050
and then we can chain a new then method on
68
68
00:03:06,050 --> 00:03:07,710
to that as well.
69
69
00:03:07,710 --> 00:03:09,020
Now, in the last lecture,
70
70
00:03:09,020 --> 00:03:13,000
I actually oversimplified how things really work.
71
71
00:03:13,000 --> 00:03:17,340
So actually the then method always returns a promise,
72
72
00:03:17,340 --> 00:03:21,020
no matter if we actually return anything or not.
73
73
00:03:21,020 --> 00:03:23,460
But if we do return a value,
74
74
00:03:23,460 --> 00:03:26,840
then that value will become the fulfillment value
75
75
00:03:26,840 --> 00:03:28,840
of the return promise.
76
76
00:03:28,840 --> 00:03:30,693
So let me actually show that to you.
77
77
00:03:31,550 --> 00:03:32,670
So instead of returning
78
78
00:03:32,670 --> 00:03:34,110
this for now,
79
79
00:03:34,110 --> 00:03:36,979
let me just return 23.
80
80
00:03:36,979 --> 00:03:40,563
And so then when I chain a new then method here,
81
81
00:03:42,730 --> 00:03:44,880
let's say data,
82
82
00:03:44,880 --> 00:03:47,793
and then let's alert debt data.
83
83
00:03:49,560 --> 00:03:50,950
Let's see.
84
84
00:03:50,950 --> 00:03:54,040
And then indeed we get 23.
85
85
00:03:54,040 --> 00:03:55,380
And so again,
86
86
00:03:55,380 --> 00:03:58,640
that happens because whatever we return from
87
87
00:03:58,640 --> 00:04:01,827
this promise here will become the fulfilled value
88
88
00:04:01,827 --> 00:04:03,113
of the promise.
89
89
00:04:03,990 --> 00:04:04,823
Okay?
90
90
00:04:05,660 --> 00:04:08,600
So again, this year it returns a promise.
91
91
00:04:08,600 --> 00:04:11,230
And so we can handle it using the then method
92
92
00:04:11,230 --> 00:04:13,450
And to fulfill to value,
93
93
00:04:13,450 --> 00:04:15,317
so the success value basically
94
94
00:04:15,317 --> 00:04:17,880
of the promise will be the valued that
95
95
00:04:17,880 --> 00:04:20,960
we return from this then method.
96
96
00:04:20,960 --> 00:04:21,793
Right?
97
97
00:04:21,793 --> 00:04:24,230
And so that is, this 23 here.
98
98
00:04:24,230 --> 00:04:27,110
And so therefore in the next then method,
99
99
00:04:27,110 --> 00:04:30,620
then the data here will be 23.
100
100
00:04:30,620 --> 00:04:33,980
And of course this year must be 23.
101
101
00:04:33,980 --> 00:04:36,663
Otherwise we cannot see that in effect.
102
102
00:04:37,810 --> 00:04:42,323
But yeah, so it is 23 because this value is 23.
103
103
00:04:43,950 --> 00:04:47,440
So again, this data that we receive here as an input
104
104
00:04:47,440 --> 00:04:50,920
to dysfunction is the fulfilled value of the promise
105
105
00:04:50,920 --> 00:04:52,270
that we're handling.
106
106
00:04:52,270 --> 00:04:53,880
And so again,
107
107
00:04:53,880 --> 00:04:55,610
that's this value 23,
108
108
00:04:55,610 --> 00:04:57,170
that we are returning from
109
109
00:04:57,170 --> 00:04:58,603
this then method here.
110
110
00:05:00,120 --> 00:05:01,130
Okay.
111
111
00:05:01,130 --> 00:05:03,140
But anyway, of course the same
112
112
00:05:03,140 --> 00:05:06,463
is true for ah, promises.
113
113
00:05:07,300 --> 00:05:09,230
And so by doing this,
114
114
00:05:09,230 --> 00:05:11,570
so by returning this promise here,
115
115
00:05:11,570 --> 00:05:13,020
then the fulfilled value
116
116
00:05:13,020 --> 00:05:17,340
of the next then method will be fulfilled value of
117
117
00:05:17,340 --> 00:05:18,930
this previous promise.
118
118
00:05:18,930 --> 00:05:19,883
So of this one.
119
119
00:05:21,470 --> 00:05:22,303
Okay.
120
120
00:05:22,303 --> 00:05:24,200
So I know that sounds confusing,
121
121
00:05:24,200 --> 00:05:27,590
but what you need to understand is that basically
122
122
00:05:27,590 --> 00:05:31,070
this then method here returns in your promise until,
123
123
00:05:31,070 --> 00:05:34,700
we can then one more time handle the success value
124
124
00:05:34,700 --> 00:05:35,763
of that promise.
125
125
00:05:36,830 --> 00:05:38,540
So one more time, I'm calling this
126
126
00:05:38,540 --> 00:05:40,130
one now a response,
127
127
00:05:40,130 --> 00:05:43,490
because here we are dealing with the fulfilled value
128
128
00:05:43,490 --> 00:05:45,780
of a fetch promise.
129
129
00:05:45,780 --> 00:05:48,123
And so that is a response.
130
130
00:05:49,030 --> 00:05:51,620
And so therefore I like to call it like that.
131
131
00:05:51,620 --> 00:05:52,960
And so here, one more time,
132
132
00:05:52,960 --> 00:05:55,950
we need to call the JSON method and that
133
133
00:05:55,950 --> 00:05:57,063
is pretty annoying,
134
134
00:05:58,000 --> 00:06:00,790
but that's just how we have to do it.
135
135
00:06:00,790 --> 00:06:01,860
And so here again,
136
136
00:06:01,860 --> 00:06:06,810
the fulfilled value of the promise will become dart body.
137
137
00:06:06,810 --> 00:06:08,750
So the data that is stored
138
138
00:06:08,750 --> 00:06:10,100
in the body,
139
139
00:06:10,100 --> 00:06:12,533
and then we can again, handle that.
140
140
00:06:13,620 --> 00:06:15,760
So data like this
141
141
00:06:16,870 --> 00:06:19,653
and then render country with data.
142
142
00:06:21,450 --> 00:06:23,280
And then here again,
143
143
00:06:23,280 --> 00:06:26,833
we pass in that CSS class for the neighbor.
144
144
00:06:28,740 --> 00:06:29,573
Okay.
145
145
00:06:29,573 --> 00:06:31,490
And that should already be it.
146
146
00:06:31,490 --> 00:06:34,160
And indeed, here we go.
147
147
00:06:34,160 --> 00:06:35,793
And if we try something else,
148
148
00:06:37,140 --> 00:06:39,173
let's say Germany,
149
149
00:06:40,070 --> 00:06:42,250
let's see what country we get
150
150
00:06:42,250 --> 00:06:43,643
and it's Austria.
151
151
00:06:44,480 --> 00:06:46,000
Okay.
152
152
00:06:46,000 --> 00:06:46,833
But anyway,
153
153
00:06:46,833 --> 00:06:51,833
let's just put it back to this one here and yeah,
154
154
00:06:51,940 --> 00:06:54,290
that's actually it already.
155
155
00:06:54,290 --> 00:06:55,710
So as you can see,
156
156
00:06:55,710 --> 00:06:56,810
promises really
157
157
00:06:56,810 --> 00:07:01,000
allow us to handle these complex asynchronous operations
158
158
00:07:01,000 --> 00:07:02,480
with as many steps
159
159
00:07:02,480 --> 00:07:03,920
as we want.
160
160
00:07:03,920 --> 00:07:07,010
So right now we have four steps here, even,
161
161
00:07:07,010 --> 00:07:09,490
but of course we could extend this as much
162
162
00:07:09,490 --> 00:07:10,930
as we want.
163
163
00:07:10,930 --> 00:07:13,230
So even if we wanted the neighbor of the neighbor
164
164
00:07:13,230 --> 00:07:14,380
of the neighbor,
165
165
00:07:14,380 --> 00:07:15,930
like 10 countries,
166
166
00:07:15,930 --> 00:07:19,110
we could easily do this by chaining all these promises
167
167
00:07:19,110 --> 00:07:21,120
one after another and all
168
168
00:07:21,120 --> 00:07:23,200
without the callback hell.
169
169
00:07:23,200 --> 00:07:25,360
So here, instead of the callback,
170
170
00:07:25,360 --> 00:07:29,760
hell we have what we call a flat chain of promises.
171
171
00:07:29,760 --> 00:07:32,390
And this one is again,
172
172
00:07:32,390 --> 00:07:35,640
very easy to understand and to read.
173
173
00:07:35,640 --> 00:07:39,220
So as a conclusion to this video and the previous one,
174
174
00:07:39,220 --> 00:07:40,330
promises really,
175
175
00:07:40,330 --> 00:07:44,010
are an incredibly powerful and elegant solution
176
176
00:07:44,010 --> 00:07:45,763
to handle asynchronous code.
177
177
00:07:46,640 --> 00:07:47,770
Now, just to finish,
178
178
00:07:47,770 --> 00:07:50,060
I want to show you a pretty common mistake
179
179
00:07:50,060 --> 00:07:51,940
that many beginners make,
180
180
00:07:51,940 --> 00:07:56,110
which is to basically chain this then method directly
181
181
00:07:56,110 --> 00:07:58,173
onto a new nested promise.
182
182
00:07:59,330 --> 00:08:01,060
So as we know,
183
183
00:08:01,060 --> 00:08:03,750
this one immediately returns a promise.
184
184
00:08:03,750 --> 00:08:08,190
And so many beginners basically do this instead,
185
185
00:08:08,190 --> 00:08:09,980
let me show it to you here.
186
186
00:08:09,980 --> 00:08:12,180
So instead of returning the new promise,
187
187
00:08:12,180 --> 00:08:16,150
they then chain theme then method right here.
188
188
00:08:16,150 --> 00:08:17,960
So right inside of
189
189
00:08:17,960 --> 00:08:19,063
this then method.
190
190
00:08:20,220 --> 00:08:22,720
Now this actually does still work,
191
191
00:08:22,720 --> 00:08:26,540
but then we are in fact back to callback hell.
192
192
00:08:26,540 --> 00:08:27,840
Because now indeed,
193
193
00:08:27,840 --> 00:08:30,100
we have one callback function here
194
194
00:08:30,100 --> 00:08:33,240
defined inside of another one.
195
195
00:08:33,240 --> 00:08:34,640
So inside of this,
196
196
00:08:34,640 --> 00:08:37,230
in closing callback function.
197
197
00:08:37,230 --> 00:08:38,270
Okay.
198
198
00:08:38,270 --> 00:08:39,250
And so of course
199
199
00:08:39,250 --> 00:08:41,510
that's exactly what we're trying to avoid.
200
200
00:08:41,510 --> 00:08:43,163
And so don't do this.
201
201
00:08:44,100 --> 00:08:46,210
So always return to promise
202
202
00:08:46,210 --> 00:08:49,090
and then handle it outside by simply continuing
203
203
00:08:49,090 --> 00:08:51,240
the chain like this.
204
204
00:08:51,240 --> 00:08:53,150
Alright, but I hope that this
205
205
00:08:53,150 --> 00:08:55,260
was already pretty obvious anyway,
206
206
00:08:55,260 --> 00:08:58,140
from all the explanations that I gave you throughout
207
207
00:08:58,140 --> 00:09:01,010
this lecture and the previous one.
208
208
00:09:01,010 --> 00:09:01,890
But anyway,
209
209
00:09:01,890 --> 00:09:05,520
let's now move on and actually handle errors because
210
210
00:09:05,520 --> 00:09:08,400
that is also a pretty common scenario when we work
211
211
00:09:08,400 --> 00:09:10,310
with promises and especially
212
212
00:09:10,310 --> 00:09:11,653
with Ajax calls.
16540
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.