Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,240 --> 00:00:03,540
In the last video we got a glimpse
2
2
00:00:03,540 --> 00:00:07,600
into callback hell and it was not pretty.
3
3
00:00:07,600 --> 00:00:09,000
So in this lecture,
4
4
00:00:09,000 --> 00:00:12,120
let's learn about a modern JavaScript feature called
5
5
00:00:12,120 --> 00:00:15,913
promises, so that we can escape callback hell.
6
6
00:00:17,320 --> 00:00:19,922
However, before we learn about promises,
7
7
00:00:19,922 --> 00:00:22,720
we should actually see one.
8
8
00:00:22,720 --> 00:00:27,046
And so let's not replace the old XML HTTP request function
9
9
00:00:27,046 --> 00:00:31,160
with the modern way of making AJAX calls.
10
10
00:00:31,160 --> 00:00:33,893
And that is by using the Fetch API.
11
11
00:00:35,330 --> 00:00:37,260
So let me go up here
12
12
00:00:37,260 --> 00:00:39,253
to our first function.
13
13
00:00:40,860 --> 00:00:43,260
And I will just copy all of this
14
14
00:00:44,890 --> 00:00:47,410
just to see how it used to work and
15
15
00:00:47,410 --> 00:00:48,563
how we can do it now.
16
16
00:00:51,690 --> 00:00:52,523
Okay.
17
17
00:00:54,726 --> 00:00:57,560
So this is how we used to do it.
18
18
00:00:57,560 --> 00:01:00,461
And now all we need to do is
19
19
00:01:00,461 --> 00:01:04,263
to call fetch and then with our URL.
20
20
00:01:05,950 --> 00:01:08,100
So let's just grab that part
21
21
00:01:08,100 --> 00:01:11,980
and then specify a Portugal.
22
22
00:01:11,980 --> 00:01:13,810
And that's actually it,
23
23
00:01:13,810 --> 00:01:15,910
all we have to do now is
24
24
00:01:15,910 --> 00:01:18,540
to store the results into a variable
25
25
00:01:18,540 --> 00:01:22,360
and let's still call it request here.
26
26
00:01:22,360 --> 00:01:24,860
Now there are actually some more options
27
27
00:01:24,860 --> 00:01:26,420
that we can specify here
28
28
00:01:26,420 --> 00:01:29,040
in the fetch function, if we'd like,
29
29
00:01:29,040 --> 00:01:32,400
but to make a simple get request like this one,
30
30
00:01:32,400 --> 00:01:35,460
all we really need is to pass in the URL
31
31
00:01:35,460 --> 00:01:37,290
and that's it.
32
32
00:01:37,290 --> 00:01:39,940
So for more complex AJAX calls,
33
33
00:01:39,940 --> 00:01:43,110
the fetch function can take in like an object
34
34
00:01:43,110 --> 00:01:44,780
of options as well.
35
35
00:01:44,780 --> 00:01:47,433
But again, for now, we don't need that.
36
36
00:01:48,340 --> 00:01:52,010
But anyway, let's now give it a safe and well,
37
37
00:01:52,010 --> 00:01:55,370
we should also log the request to the console
38
38
00:01:55,370 --> 00:01:56,593
to see what happens.
39
39
00:01:57,430 --> 00:01:58,600
And so you see
40
40
00:01:58,600 --> 00:02:02,790
that the fetch function immediately returned a promise here.
41
41
00:02:02,790 --> 00:02:05,270
So as soon as we started to request,
42
42
00:02:05,270 --> 00:02:07,280
we stored the result of that
43
43
00:02:07,280 --> 00:02:09,690
into the request variable,
44
44
00:02:09,690 --> 00:02:11,410
and then as we logged it,
45
45
00:02:11,410 --> 00:02:13,763
we immediately got the promise here.
46
46
00:02:14,690 --> 00:02:16,710
So let's do that again.
47
47
00:02:16,710 --> 00:02:18,220
And again, right away,
48
48
00:02:18,220 --> 00:02:20,680
we got something called promise
49
49
00:02:20,680 --> 00:02:22,253
and here it says pending.
50
50
00:02:23,290 --> 00:02:25,130
So if we open that up,
51
51
00:02:25,130 --> 00:02:27,309
then here it says fulfilled.
52
52
00:02:27,309 --> 00:02:30,490
And we also have like a value here,
53
53
00:02:30,490 --> 00:02:33,787
but I'm not gonna go into full detail just yet.
54
54
00:02:33,787 --> 00:02:36,000
So what matters here is
55
55
00:02:36,000 --> 00:02:38,680
that now we actually have a promise.
56
56
00:02:38,680 --> 00:02:41,193
And so this promise is right now stored in
57
57
00:02:41,193 --> 00:02:43,760
this request variable,
58
58
00:02:43,760 --> 00:02:46,700
but now what exactly is a promise
59
59
00:02:46,700 --> 00:02:48,880
and what can we do with it?
60
60
00:02:48,880 --> 00:02:50,563
Well, let's find out.
61
61
00:02:51,830 --> 00:02:54,620
So the formal definition of a promise
62
62
00:02:54,620 --> 00:02:58,030
is that it's an object that is used basically as a
63
63
00:02:58,030 --> 00:03:00,860
placeholder for the future result of
64
64
00:03:00,860 --> 00:03:03,100
an asynchronous operation.
65
65
00:03:03,100 --> 00:03:05,560
And if that sounds weird to you,
66
66
00:03:05,560 --> 00:03:07,550
we can also say that a promise
67
67
00:03:07,550 --> 00:03:12,550
is like a container for an asynchronously delivered value
68
68
00:03:12,590 --> 00:03:14,440
or even less formal.
69
69
00:03:14,440 --> 00:03:19,260
Let's say that a promise is a container for a future value.
70
70
00:03:19,260 --> 00:03:20,538
So there you go.
71
71
00:03:20,538 --> 00:03:23,418
That's the most distilled down definition
72
72
00:03:23,418 --> 00:03:25,710
of what a promise is.
73
73
00:03:25,710 --> 00:03:30,012
So a container or a placeholder for a future value,
74
74
00:03:30,012 --> 00:03:33,011
and the perfect example of a future value
75
75
00:03:33,011 --> 00:03:37,400
is the response coming from an AJAX call.
76
76
00:03:37,400 --> 00:03:39,910
So when we start the AJAX call,
77
77
00:03:39,910 --> 00:03:41,920
there is no value yet,
78
78
00:03:41,920 --> 00:03:44,350
but we know that there will be some value
79
79
00:03:45,231 --> 00:03:47,210
in the future.
80
80
00:03:47,210 --> 00:03:50,020
And so we can use a promise to handle this future value.
81
81
00:03:50,020 --> 00:03:51,210
And don't worry,
82
82
00:03:51,210 --> 00:03:55,520
this will really make sense once we go back to code,
83
83
00:03:55,520 --> 00:03:58,280
but to understand this concept even better,
84
84
00:03:58,280 --> 00:04:00,030
I like to use the analogy
85
85
00:04:00,030 --> 00:04:02,590
of a lottery ticket.
86
86
00:04:02,590 --> 00:04:06,550
So a promise is just like a lottery ticket.
87
87
00:04:06,550 --> 00:04:09,120
So when I buy a lottery ticket,
88
88
00:04:09,120 --> 00:04:11,969
essentially I buy the promise that I will receive
89
89
00:04:11,969 --> 00:04:13,660
some amount of money
90
90
00:04:13,660 --> 00:04:18,430
in the future if I guess the correct outcome, right?
91
91
00:04:18,430 --> 00:04:21,610
So I buy the ticket now with the prospect
92
92
00:04:21,610 --> 00:04:23,830
of winning money in the future
93
93
00:04:23,830 --> 00:04:26,030
and the lottery draw which determines
94
94
00:04:26,030 --> 00:04:30,090
if I get the money or not happens asynchronously.
95
95
00:04:30,090 --> 00:04:33,290
So of course I don't have to drop everything
96
96
00:04:33,290 --> 00:04:37,043
and keep waiting until the lottery draw happens, right?
97
97
00:04:37,960 --> 00:04:40,930
Now, in case I did get the correct outcome,
98
98
00:04:40,930 --> 00:04:42,960
then I will receive my money
99
99
00:04:42,960 --> 00:04:45,210
because I have my lottery ticket,
100
100
00:04:45,210 --> 00:04:48,020
which is the promise that I bought.
101
101
00:04:48,020 --> 00:04:52,270
Now, what's the big advantage of using promises?
102
102
00:04:52,270 --> 00:04:55,300
Well, there are two of them actually,
103
103
00:04:55,300 --> 00:04:57,360
first by using promises,
104
104
00:04:57,360 --> 00:05:00,090
we no longer need to rely on events
105
105
00:05:00,090 --> 00:05:04,350
and callback functions to handle asynchronous results,
106
106
00:05:04,350 --> 00:05:06,480
events and callback functions can
107
107
00:05:06,480 --> 00:05:09,270
sometimes cause unpredictable results.
108
108
00:05:09,270 --> 00:05:11,756
And so this is a big win already,
109
109
00:05:11,756 --> 00:05:14,560
but even better with promises,
110
110
00:05:14,560 --> 00:05:16,520
we can chain promises for a
111
111
00:05:16,520 --> 00:05:19,230
sequence of asynchronous operations
112
112
00:05:19,230 --> 00:05:22,070
instead of nesting like we did
113
113
00:05:22,070 --> 00:05:23,610
in the last video.
114
114
00:05:23,610 --> 00:05:24,443
And with this,
115
115
00:05:24,443 --> 00:05:26,750
we can finally escape callback hell,
116
116
00:05:26,750 --> 00:05:29,910
which was our initial goal all along
117
117
00:05:29,910 --> 00:05:30,890
and by the way,
118
118
00:05:30,890 --> 00:05:33,540
promises are an ES6 feature.
119
119
00:05:33,540 --> 00:05:37,498
So they became available in JavaScript in 2015.
120
120
00:05:37,498 --> 00:05:38,589
And so by now,
121
121
00:05:38,589 --> 00:05:41,433
they are widely used by everyone.
122
122
00:05:42,634 --> 00:05:46,808
Now, since promises work with asynchronous operations,
123
123
00:05:46,808 --> 00:05:49,400
they are time sensitive.
124
124
00:05:49,400 --> 00:05:51,510
So they change over time.
125
125
00:05:51,510 --> 00:05:55,300
And so promises can be in different states
126
126
00:05:55,300 --> 00:05:59,420
and this is what they call the cycle of a promise.
127
127
00:05:59,420 --> 00:06:01,030
So in the very beginning,
128
128
00:06:01,030 --> 00:06:04,160
we say that a promise is pending.
129
129
00:06:04,160 --> 00:06:07,420
And so this is before any value resulting from the
130
130
00:06:07,420 --> 00:06:10,450
asynchronous task is available.
131
131
00:06:10,450 --> 00:06:12,060
Now, during this time,
132
132
00:06:12,060 --> 00:06:14,951
the asynchronous task is still doing its work
133
133
00:06:14,951 --> 00:06:17,310
in the background.
134
134
00:06:17,310 --> 00:06:20,210
Then when the task finally finishes,
135
135
00:06:20,210 --> 00:06:23,422
we say that the promise is settled and there
136
136
00:06:23,422 --> 00:06:26,761
are two different types of settled promises and
137
137
00:06:26,761 --> 00:06:31,761
that's fulfilled promises and rejected promises.
138
138
00:06:31,820 --> 00:06:34,479
So a fulfilled promise is a promise that has
139
139
00:06:34,479 --> 00:06:39,479
successfully resulted in a value just as we expect it.
140
140
00:06:39,570 --> 00:06:42,800
For example, when we use the promise to fetch data
141
141
00:06:42,800 --> 00:06:44,220
from an API,
142
142
00:06:44,220 --> 00:06:47,069
a fulfilled promise successfully guts that data,
143
143
00:06:47,069 --> 00:06:50,900
and it's now available to being used.
144
144
00:06:50,900 --> 00:06:52,791
On the other hand,
145
145
00:06:52,791 --> 00:06:53,940
a rejected promise means
146
146
00:06:53,940 --> 00:06:58,180
that there has been an error during the asynchronous task.
147
147
00:06:58,180 --> 00:07:01,560
And the example of fetching data from an API,
148
148
00:07:01,560 --> 00:07:03,610
an error would be for example,
149
149
00:07:03,610 --> 00:07:06,340
when the user is offline and can't connect
150
150
00:07:06,340 --> 00:07:07,773
to the API server.
151
151
00:07:08,760 --> 00:07:12,280
Now going back to the analogy of our lottery ticket,
152
152
00:07:12,280 --> 00:07:15,437
the lottery draw is basically the asynchronous task,
153
153
00:07:15,437 --> 00:07:18,320
which determines the result.
154
154
00:07:18,320 --> 00:07:20,720
Then once the result is available,
155
155
00:07:20,720 --> 00:07:23,200
the ticket would be settled.
156
156
00:07:23,200 --> 00:07:26,060
Then if we guessed the correct outcome,
157
157
00:07:26,060 --> 00:07:28,470
the lottery ticket will be fulfilled
158
158
00:07:28,470 --> 00:07:30,360
and we get our money.
159
159
00:07:30,360 --> 00:07:32,500
However, if we guessed wrong,
160
160
00:07:32,500 --> 00:07:35,100
then the ticket basically gets rejected.
161
161
00:07:35,100 --> 00:07:38,691
And all we did was waste our money.
162
162
00:07:38,691 --> 00:07:40,600
Now these different states
163
163
00:07:40,600 --> 00:07:42,908
are very important to understand because
164
164
00:07:42,908 --> 00:07:46,010
when we use promises in our code,
165
165
00:07:46,010 --> 00:07:49,280
we will be able to handle these different states in
166
166
00:07:49,280 --> 00:07:51,570
order to do something as a result
167
167
00:07:51,570 --> 00:07:55,540
of either a successful promise or a rejected one.
168
168
00:07:55,540 --> 00:07:58,530
Another important thing about promises is that
169
169
00:07:58,530 --> 00:08:01,030
a promise is only settled once.
170
170
00:08:01,030 --> 00:08:02,180
And so from there,
171
171
00:08:02,180 --> 00:08:04,793
the state will remain unchanged forever.
172
172
00:08:05,680 --> 00:08:08,955
So the promise was either fulfilled or rejected,
173
173
00:08:08,955 --> 00:08:12,054
but it's impossible to change that state.
174
174
00:08:12,054 --> 00:08:15,960
Now, these different states that I showed you here
175
175
00:08:15,960 --> 00:08:19,020
are relevant and useful when we use a promise
176
176
00:08:19,020 --> 00:08:20,530
to get a result,
177
177
00:08:20,530 --> 00:08:24,030
which is called, to consume a promise.
178
178
00:08:24,030 --> 00:08:25,720
So we consume a promise
179
179
00:08:25,720 --> 00:08:28,770
when we already have a promise, for example,
180
180
00:08:28,770 --> 00:08:30,620
the promise that was returned
181
181
00:08:30,620 --> 00:08:31,970
from the fetch function,
182
182
00:08:31,970 --> 00:08:34,416
right at the beginning of this video, remember.
183
183
00:08:34,416 --> 00:08:38,980
But in order for a promise to exist in the first place,
184
184
00:08:38,980 --> 00:08:40,643
it must first be built.
185
185
00:08:41,870 --> 00:08:45,500
So it must be created in the case of the fetch API,
186
186
00:08:45,500 --> 00:08:48,080
it's the fetch function that builds the promise
187
187
00:08:49,270 --> 00:08:51,010
and returns it for us to consume.
188
188
00:08:51,010 --> 00:08:51,870
So in this case,
189
189
00:08:51,870 --> 00:08:54,470
we don't have to build the promise ourselves in
190
190
00:08:54,470 --> 00:08:56,160
order to consume it.
191
191
00:08:56,160 --> 00:08:58,350
Now, most of the time we will actually
192
192
00:08:58,350 --> 00:09:00,250
just consume promises,
193
193
00:09:00,250 --> 00:09:03,780
which is also the easier and more useful part.
194
194
00:09:03,780 --> 00:09:05,580
And so that's what we will do
195
195
00:09:05,580 --> 00:09:07,620
in the next couple of videos.
196
196
00:09:07,620 --> 00:09:10,710
But sometimes we also need to build a promise and
197
197
00:09:10,710 --> 00:09:12,330
to not just consume it.
198
198
00:09:12,330 --> 00:09:13,810
And of course,
199
199
00:09:13,810 --> 00:09:15,559
we will also learn how to do
200
200
00:09:15,559 --> 00:09:16,409
that a bit later.
201
201
00:09:17,250 --> 00:09:18,200
Alright.
202
202
00:09:18,200 --> 00:09:21,350
And so now let's actually start using promises
203
203
00:09:21,350 --> 00:09:22,563
in the next video.
16682
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.