Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,220 --> 00:00:02,320
In this lecture,
2
2
00:00:02,320 --> 00:00:05,320
we will learn how to consume a promise.
3
3
00:00:05,320 --> 00:00:08,430
And in this case, we will consume the promise
4
4
00:00:08,430 --> 00:00:10,993
that was returned by the fetch function.
5
5
00:00:13,000 --> 00:00:16,350
So let's now implement the get country data function
6
6
00:00:16,350 --> 00:00:18,470
from the very first lecture.
7
7
00:00:18,470 --> 00:00:21,383
But of course, this one using a promise.
8
8
00:00:22,960 --> 00:00:25,460
So get country data
9
9
00:00:27,360 --> 00:00:30,433
and so again, here we pass in a country.
10
10
00:00:33,560 --> 00:00:37,400
And then here, we will want this fetch function
11
11
00:00:38,800 --> 00:00:41,820
and here again with the country then.
12
12
00:00:41,820 --> 00:00:46,820
So making this a template literal again and then country.
13
13
00:00:49,450 --> 00:00:51,580
And as we already know,
14
14
00:00:51,580 --> 00:00:53,760
calling the fetch function like this,
15
15
00:00:53,760 --> 00:00:56,250
will then immediately return a promise.
16
16
00:00:56,250 --> 00:00:58,900
So as soon as we start the request
17
17
00:00:58,900 --> 00:01:00,130
and in the beginning,
18
18
00:01:00,130 --> 00:01:02,930
this promise is of course still pending
19
19
00:01:02,930 --> 00:01:04,820
because the asynchronous task
20
20
00:01:04,820 --> 00:01:08,490
of getting the data, is still running in the background.
21
21
00:01:08,490 --> 00:01:11,440
So just as we learned in the last lecture.
22
22
00:01:11,440 --> 00:01:13,590
Now, of course, at a certain point
23
23
00:01:13,590 --> 00:01:18,080
the promise will then be settled and either in a fulfilled
24
24
00:01:18,080 --> 00:01:23,010
or in a rejected state, but for now let's assume success.
25
25
00:01:23,010 --> 00:01:26,250
So assume that the promise will be fulfilled
26
26
00:01:26,250 --> 00:01:30,050
and that we have a value available to work with.
27
27
00:01:30,050 --> 00:01:32,670
And so to handle this fulfilled state,
28
28
00:01:32,670 --> 00:01:34,980
we can use the then method
29
29
00:01:34,980 --> 00:01:38,010
that is available on all promises.
30
30
00:01:38,010 --> 00:01:39,363
So just like this.
31
31
00:01:40,820 --> 00:01:43,890
So again, this here will return a promise.
32
32
00:01:43,890 --> 00:01:47,890
And on all promises, we can call the then method.
33
33
00:01:47,890 --> 00:01:49,510
Now into the then method,
34
34
00:01:49,510 --> 00:01:51,970
we need to pass a callback function
35
35
00:01:51,970 --> 00:01:53,440
that we want to be executed
36
36
00:01:53,440 --> 00:01:56,860
as soon as the promise is actually fulfilled.
37
37
00:01:56,860 --> 00:01:59,663
So as soon as the result is available.
38
38
00:02:00,760 --> 00:02:04,270
So a function and then this function
39
39
00:02:04,270 --> 00:02:06,720
will actually receive one argument
40
40
00:02:06,720 --> 00:02:09,310
once it's called by JavaScript
41
41
00:02:09,310 --> 00:02:12,100
and that argument is the resulting value
42
42
00:02:12,100 --> 00:02:14,540
of the fulfilled promise.
43
43
00:02:14,540 --> 00:02:17,580
So let me call it response here
44
44
00:02:17,580 --> 00:02:21,473
because this is the response of an AJAX call in this case.
45
45
00:02:22,730 --> 00:02:25,090
All right, and that's it.
46
46
00:02:25,090 --> 00:02:28,913
So this is how we actually handle a fulfilled promise,
47
47
00:02:30,600 --> 00:02:34,200
but now let's actually do something with the response here.
48
48
00:02:34,200 --> 00:02:37,623
And as always, I will start by logging it to the console.
49
49
00:02:40,100 --> 00:02:43,923
But of course, we also need to call this function here.
50
50
00:02:46,680 --> 00:02:51,040
All right, and so here we now get the response indeed.
51
51
00:02:51,040 --> 00:02:54,090
And even the type of this object
52
52
00:02:54,090 --> 00:02:55,793
is actually called response.
53
53
00:02:57,320 --> 00:02:59,970
Let's just get rid of this here for a second
54
54
00:03:01,520 --> 00:03:03,793
so we have a cleaner output here.
55
55
00:03:05,780 --> 00:03:08,190
All right, and so here indeed,
56
56
00:03:08,190 --> 00:03:12,350
we have a couple of things about the response itself,
57
57
00:03:12,350 --> 00:03:15,960
for example, here to status code for the headers.
58
58
00:03:15,960 --> 00:03:17,330
And so if you watch the lecture
59
59
00:03:17,330 --> 00:03:20,500
about how the web actually works behind the scenes,
60
60
00:03:20,500 --> 00:03:24,023
then this kind of data here will be familiar to you.
61
61
00:03:25,040 --> 00:03:27,550
But anyway what we're actually interested in
62
62
00:03:27,550 --> 00:03:29,150
is the data itself.
63
63
00:03:29,150 --> 00:03:32,510
And so that data is in the response body here.
64
64
00:03:32,510 --> 00:03:34,760
So let's click here just to see.
65
65
00:03:34,760 --> 00:03:39,760
And as we see, the body is basically this readable stream.
66
66
00:03:40,680 --> 00:03:44,100
All right, and so actually we cannot yet
67
67
00:03:44,100 --> 00:03:46,440
really look at the data here.
68
68
00:03:46,440 --> 00:03:49,410
So in order to be able to actually read
69
69
00:03:49,410 --> 00:03:51,960
this data from the body,
70
70
00:03:51,960 --> 00:03:55,940
we need to call the json method on the response.
71
71
00:03:55,940 --> 00:03:59,330
Okay, so json is a method that is available
72
72
00:03:59,330 --> 00:04:02,493
on all responses of the fetch method.
73
73
00:04:03,590 --> 00:04:07,640
So what I mean is this, so response dot json.
74
74
00:04:09,460 --> 00:04:11,420
So again, the json method here
75
75
00:04:11,420 --> 00:04:13,300
is a method that is available
76
76
00:04:13,300 --> 00:04:16,530
on all the response objects that is coming
77
77
00:04:16,530 --> 00:04:18,390
from the fetch function,
78
78
00:04:18,390 --> 00:04:20,770
so all of the resolved values,
79
79
00:04:20,770 --> 00:04:25,150
and indeed this response here is in fact a resolved value.
80
80
00:04:25,150 --> 00:04:26,757
And so therefore it does have
81
81
00:04:26,757 --> 00:04:29,750
the json method attached to it.
82
82
00:04:29,750 --> 00:04:31,120
Now, the problem here is
83
83
00:04:31,120 --> 00:04:33,530
that this json function itself,
84
84
00:04:33,530 --> 00:04:36,780
is actually also an asynchronous function.
85
85
00:04:36,780 --> 00:04:37,833
And so what that means,
86
86
00:04:37,833 --> 00:04:41,400
is that it will also return a new promise.
87
87
00:04:41,400 --> 00:04:43,770
And that's all a bit confusing
88
88
00:04:43,770 --> 00:04:47,400
and I really don't know why it was implemented like this,
89
89
00:04:47,400 --> 00:04:49,920
but this is just how it works.
90
90
00:04:49,920 --> 00:04:52,910
So anyway, what we need to do now here
91
91
00:04:52,910 --> 00:04:55,883
is to actually return this promise from here.
92
92
00:04:56,870 --> 00:05:01,660
Okay, because remember this here will be a new promise.
93
93
00:05:01,660 --> 00:05:05,770
Okay, and so now we need to handle that promise as well.
94
94
00:05:05,770 --> 00:05:07,960
All right, and so the way we do that
95
95
00:05:07,960 --> 00:05:11,173
is to then call another then right here.
96
96
00:05:13,640 --> 00:05:16,340
So we need another callback function,
97
97
00:05:16,340 --> 00:05:18,283
this time let's call it data.
98
98
00:05:20,080 --> 00:05:23,280
And for now let's log it here to the console
99
99
00:05:23,280 --> 00:05:26,163
and let's give it a save, just to see if it worked.
100
100
00:05:27,900 --> 00:05:30,410
And yeah, here it is.
101
101
00:05:30,410 --> 00:05:33,060
So here we are back to having the same data
102
102
00:05:33,060 --> 00:05:34,870
that we already had before,
103
103
00:05:34,870 --> 00:05:39,303
but this time using a promise or actually two promises.
104
104
00:05:40,670 --> 00:05:43,350
So let's recap what happened here.
105
105
00:05:43,350 --> 00:05:46,760
And the first part here I think, is pretty straight forward
106
106
00:05:46,760 --> 00:05:50,300
which is this fetch function here returning a promise.
107
107
00:05:50,300 --> 00:05:52,170
And then we handled that promise
108
108
00:05:52,170 --> 00:05:54,970
using the then method, right.
109
109
00:05:54,970 --> 00:05:58,480
But then to actually read the data from the response,
110
110
00:05:58,480 --> 00:06:02,720
we need to call the json method on that response object.
111
111
00:06:02,720 --> 00:06:06,160
Now this itself will also return a promise.
112
112
00:06:06,160 --> 00:06:10,560
And so if we then return that promise from this method
113
113
00:06:10,560 --> 00:06:14,650
then basically all of this becomes a new promise itself.
114
114
00:06:14,650 --> 00:06:16,860
And so since this is a promise
115
115
00:06:16,860 --> 00:06:20,620
we can then again, call the then method on that.
116
116
00:06:20,620 --> 00:06:23,820
And so then again we have a callback
117
117
00:06:23,820 --> 00:06:26,600
and this time, we get access to the data
118
118
00:06:26,600 --> 00:06:31,040
because the resolved value of this promise here
119
119
00:06:31,040 --> 00:06:33,590
is going to be the data itself.
120
120
00:06:33,590 --> 00:06:36,660
So basically the data that we're looking for,
121
121
00:06:36,660 --> 00:06:40,720
which is then this one here, right.
122
122
00:06:40,720 --> 00:06:42,480
And so now all we have to do
123
123
00:06:42,480 --> 00:06:47,090
is render country of data zero, okay.
124
124
00:06:50,010 --> 00:06:51,823
And so here it is.
125
125
00:06:53,210 --> 00:06:58,010
So we just did the same thing as before, but using promises.
126
126
00:06:58,010 --> 00:07:00,960
And if we didn't have all of these console dot logs here,
127
127
00:07:00,960 --> 00:07:03,163
we could actually simplify this a lot.
128
128
00:07:04,000 --> 00:07:05,180
So let me just copy it
129
129
00:07:06,260 --> 00:07:09,320
so that we get to keep this version as well
130
130
00:07:09,320 --> 00:07:13,550
but then we can create a highly simplified version as well.
131
131
00:07:13,550 --> 00:07:16,200
So getting rid of this console dot log
132
132
00:07:16,200 --> 00:07:20,190
and this one here, and then we can transform these here
133
133
00:07:21,100 --> 00:07:22,463
to arrow functions.
134
134
00:07:25,140 --> 00:07:27,420
And so this is gonna work because this one
135
135
00:07:27,420 --> 00:07:32,250
will now implicitly return this result here.
136
136
00:07:32,250 --> 00:07:36,380
So this promise and so then on that promise,
137
137
00:07:36,380 --> 00:07:38,263
we can call another then method.
138
138
00:07:40,620 --> 00:07:43,020
All I'm doing here is to simplify the code
139
139
00:07:43,020 --> 00:07:44,950
that we already had before.
140
140
00:07:44,950 --> 00:07:48,920
And you see that indeed, it still works.
141
141
00:07:48,920 --> 00:07:52,460
So what do you think looks cleaner and nicer?
142
142
00:07:52,460 --> 00:07:57,040
Is it this code here, using fetch and promises
143
143
00:07:57,040 --> 00:08:00,960
or is this function that we wrote right in the beginning
144
144
00:08:00,960 --> 00:08:03,030
with all of this weird stuff
145
145
00:08:03,030 --> 00:08:05,010
that we have going on here
146
146
00:08:05,010 --> 00:08:07,710
and with this event and listening for the event
147
147
00:08:08,790 --> 00:08:12,453
and even worse here, with all these nested callbacks.
148
148
00:08:13,550 --> 00:08:16,260
So I hope that you agree that this here,
149
149
00:08:16,260 --> 00:08:20,080
is actually a lot nicer but beside being nicer,
150
150
00:08:20,080 --> 00:08:23,750
the code is also easier to read and to reason about
151
151
00:08:23,750 --> 00:08:25,370
and as I mentioned before,
152
152
00:08:25,370 --> 00:08:27,900
that in itself is very important.
153
153
00:08:27,900 --> 00:08:32,610
So it's very easy to understand that this fetches something
154
154
00:08:32,610 --> 00:08:34,850
and then we get a response
155
155
00:08:34,850 --> 00:08:36,960
which will be transformed to json.
156
156
00:08:36,960 --> 00:08:38,550
And then we take that data
157
157
00:08:38,550 --> 00:08:41,920
and render the country to the DOM.
158
158
00:08:41,920 --> 00:08:46,070
Okay, so this almost reads like English sentences
159
159
00:08:46,070 --> 00:08:48,830
and that's very helpful to understand the code now
160
160
00:08:48,830 --> 00:08:51,100
and also in the future.
161
161
00:08:51,100 --> 00:08:54,010
Now, just to finish you might be thinking,
162
162
00:08:54,010 --> 00:08:57,506
well, we're using callbacks here, right.
163
163
00:08:57,506 --> 00:08:59,930
And that is actually true.
164
164
00:08:59,930 --> 00:09:03,020
So promises do not get rid of callbacks,
165
165
00:09:03,020 --> 00:09:06,840
but they do in fact get rid of callback hell.
166
166
00:09:06,840 --> 00:09:10,450
So even if this doesn't look like a big change for now,
167
167
00:09:10,450 --> 00:09:12,060
it will look like a change
168
168
00:09:12,060 --> 00:09:14,250
after we add the functionality
169
169
00:09:14,250 --> 00:09:16,130
of loading the neighbor country
170
170
00:09:16,130 --> 00:09:18,520
like we did in the previous lecture.
171
171
00:09:18,520 --> 00:09:21,963
And so actually let's go do that now in the next lecture.
14923
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.