Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,330 --> 00:00:02,890
Let's now imagine
2
2
00:00:02,890 --> 00:00:04,650
that we wanted to get some data
3
3
00:00:04,650 --> 00:00:07,730
about three countries at the same time,
4
4
00:00:07,730 --> 00:00:10,700
but in which the order that the data arrives
5
5
00:00:10,700 --> 00:00:12,463
does not matter at all.
6
6
00:00:14,090 --> 00:00:16,800
So let's now implement an async function,
7
7
00:00:16,800 --> 00:00:20,250
using everything that we know at this point,
8
8
00:00:20,250 --> 00:00:23,810
and that this function will simply take in three countries
9
9
00:00:23,810 --> 00:00:26,000
and it will lock the capital cities
10
10
00:00:26,000 --> 00:00:28,803
of these three countries as an array.
11
11
00:00:30,260 --> 00:00:34,273
So let's say get three countries.
12
12
00:00:35,720 --> 00:00:38,093
And again, it's an async function.
13
13
00:00:39,190 --> 00:00:44,187
So country one, two, and three, and then an async function,
14
14
00:00:45,990 --> 00:00:49,120
we really always need to wrap or coat
15
15
00:00:49,120 --> 00:00:53,803
into a try catch block, okay?
16
16
00:00:55,280 --> 00:00:59,713
So never work an async function without this.
17
17
00:01:01,350 --> 00:01:03,700
And again, in a real world scenario,
18
18
00:01:03,700 --> 00:01:06,010
you would do real error handling
19
19
00:01:06,010 --> 00:01:08,113
and not just log it to the console.
20
20
00:01:09,070 --> 00:01:14,070
Okay, so await, and then let's use our getJSON function
21
21
00:01:14,940 --> 00:01:16,750
that we coded at some point
22
22
00:01:16,750 --> 00:01:18,493
at the beginning of this section.
23
23
00:01:19,460 --> 00:01:21,900
So here at the top of my file,
24
24
00:01:21,900 --> 00:01:24,630
I have this getJSON function,
25
25
00:01:24,630 --> 00:01:28,250
which remember, encapsulates the fetch request,
26
26
00:01:28,250 --> 00:01:30,973
the error handling also.
27
27
00:01:31,840 --> 00:01:34,950
So basically when there is an error in this fetch,
28
28
00:01:34,950 --> 00:01:36,860
it will throw a new error
29
29
00:01:36,860 --> 00:01:40,433
and it also immediately converts the response to JSON.
30
30
00:01:41,660 --> 00:01:45,050
So again, if you skipped one of the previous lectures,
31
31
00:01:45,050 --> 00:01:46,840
then make sure to get this function
32
32
00:01:46,840 --> 00:01:50,713
from the final code of the section.
33
33
00:01:51,960 --> 00:01:55,630
So getJSON, and then here again,
34
34
00:01:55,630 --> 00:01:59,750
we're using our rest countries API,
35
35
00:01:59,750 --> 00:02:01,383
so let me get to the URL.
36
36
00:02:04,610 --> 00:02:08,993
So here we now will use c1,
37
37
00:02:11,880 --> 00:02:13,860
and so then we store that data
38
38
00:02:13,860 --> 00:02:17,580
into a variable just like this.
39
39
00:02:17,580 --> 00:02:21,053
So this is the magic of async 08, all right?
40
40
00:02:21,940 --> 00:02:24,530
Now we already know that the result of this
41
41
00:02:24,530 --> 00:02:27,990
is gonna be an array with one object.
42
42
00:02:27,990 --> 00:02:29,650
So let's use the structuring
43
43
00:02:29,650 --> 00:02:31,803
to take the first element there.
44
44
00:02:33,410 --> 00:02:38,147
And now let's simply duplicate this code here twice,
45
45
00:02:41,350 --> 00:02:43,873
and do this three times.
46
46
00:02:44,800 --> 00:02:48,183
So creating three variables for these three countries,
47
47
00:02:49,480 --> 00:02:53,310
and then what we want to get is the capital.
48
48
00:02:53,310 --> 00:02:57,670
So now let's say data one.capital,
49
49
00:03:00,310 --> 00:03:04,763
because there is such a property in each of these objects.
50
50
00:03:05,790 --> 00:03:09,790
And so remember that we want to return an array here,
51
51
00:03:09,790 --> 00:03:11,773
and so that's what we're doing,
52
52
00:03:13,960 --> 00:03:17,173
and data three.capital as well.
53
53
00:03:18,470 --> 00:03:23,470
And so this should actually already work, all right?
54
54
00:03:24,010 --> 00:03:27,263
So let's call this function, get three countries.
55
55
00:03:28,245 --> 00:03:33,245
Let's use Portugal again and Canada and maybe Tanzania,
56
56
00:03:37,050 --> 00:03:39,740
which is a very beautiful country.
57
57
00:03:39,740 --> 00:03:42,300
Oh, and here we got something went wrong.
58
58
00:03:42,300 --> 00:03:43,133
So Portugal,
59
59
00:03:45,022 --> 00:03:48,680
so missing the G, and yeah.
60
60
00:03:48,680 --> 00:03:51,640
So here we get the three capital cities
61
61
00:03:51,640 --> 00:03:53,500
of the three countries.
62
62
00:03:53,500 --> 00:03:57,110
So great, this works just fine,
63
63
00:03:57,110 --> 00:04:01,530
and also at a first sight, there seems to make sense.
64
64
00:04:01,530 --> 00:04:04,830
But if we think about what we did here,
65
65
00:04:04,830 --> 00:04:08,200
then maybe it actually doesn't make so much sense
66
66
00:04:08,200 --> 00:04:10,390
because what we did here basically
67
67
00:04:10,390 --> 00:04:14,240
was to run all these Ajax calls one after another,
68
68
00:04:14,240 --> 00:04:17,660
even though the result of the second one here
69
69
00:04:17,660 --> 00:04:19,970
does not depend on the first one,
70
70
00:04:19,970 --> 00:04:21,680
and the result of the third one
71
71
00:04:21,680 --> 00:04:25,400
does also not depend on any of the other ones.
72
72
00:04:25,400 --> 00:04:28,480
And so actually this doesn't make much sense.
73
73
00:04:28,480 --> 00:04:32,513
Why should the second Ajax call wait for the first one?
74
74
00:04:33,790 --> 00:04:35,330
And actually let's take a look
75
75
00:04:35,330 --> 00:04:38,093
at this in our network tab here as well.
76
76
00:04:39,640 --> 00:04:44,220
So let's again, maybe set this to slow, 3G now,
77
77
00:04:44,220 --> 00:04:47,330
and then I will have to make it a little bit smaller
78
78
00:04:47,330 --> 00:04:49,903
so that we can actually see something down here.
79
79
00:04:53,500 --> 00:04:57,133
Okay, so down here, we actually have the three Ajax calls.
80
80
00:04:59,490 --> 00:05:02,183
So let's use fast, 3G here actually,
81
81
00:05:03,050 --> 00:05:04,623
and so let's see what happens.
82
82
00:05:06,800 --> 00:05:10,720
And so basically these bars that you see here
83
83
00:05:10,720 --> 00:05:13,660
is JavaScript downloading something.
84
84
00:05:13,660 --> 00:05:14,900
So here, of course,
85
85
00:05:14,900 --> 00:05:18,620
the first one is the HTML, CSS and JavaScript,
86
86
00:05:18,620 --> 00:05:20,560
so nothing strange there,
87
87
00:05:20,560 --> 00:05:25,200
but then here we load the data for Portugal, right?
88
88
00:05:25,200 --> 00:05:27,740
So that's the first Ajax call.
89
89
00:05:27,740 --> 00:05:29,550
And then after that has finished,
90
90
00:05:29,550 --> 00:05:31,570
we load the data for Canada,
91
91
00:05:31,570 --> 00:05:33,570
and then after that has finished,
92
92
00:05:33,570 --> 00:05:36,330
we load the data for Tanzania.
93
93
00:05:36,330 --> 00:05:38,760
So just as we have it here in the code,
94
94
00:05:38,760 --> 00:05:43,100
and so as I explained, that doesn't make a lot of sense.
95
95
00:05:43,100 --> 00:05:46,610
So instead of running these promises in sequence,
96
96
00:05:46,610 --> 00:05:49,040
we can actually run them in parallel,
97
97
00:05:49,040 --> 00:05:51,040
so all at the same time.
98
98
00:05:51,040 --> 00:05:54,350
And so then we can save valuable loading time,
99
99
00:05:54,350 --> 00:05:59,130
making these three here, basically load at the same time.
100
100
00:05:59,130 --> 00:06:01,860
And each of them takes half a second.
101
101
00:06:01,860 --> 00:06:05,370
And so with that, we will basically save one second,
102
102
00:06:05,370 --> 00:06:09,460
which is actually a lot of time when loading a website.
103
103
00:06:09,460 --> 00:06:12,550
So let's do that, and for doing that,
104
104
00:06:12,550 --> 00:06:17,550
we use the promise.all combinator function, so promise.all.
105
105
00:06:21,340 --> 00:06:23,530
And so this is once again,
106
106
00:06:23,530 --> 00:06:28,240
kind of a helper function on this promise constructor.
107
107
00:06:28,240 --> 00:06:31,320
So it's a static method, right?
108
108
00:06:31,320 --> 00:06:35,130
Now, this function here takes in an array of promises,
109
109
00:06:35,130 --> 00:06:37,580
and it will return a new promise,
110
110
00:06:37,580 --> 00:06:39,640
which will then run all the promises
111
111
00:06:39,640 --> 00:06:42,390
in the array at the same time.
112
112
00:06:42,390 --> 00:06:47,390
So let's simply grab these three promises from here.
113
113
00:06:50,540 --> 00:06:55,540
So one, then here, the second one,
114
114
00:06:59,760 --> 00:07:02,033
and this is the third one, okay?
115
115
00:07:07,360 --> 00:07:11,323
So here we, again, have these three running,
116
116
00:07:12,380 --> 00:07:16,710
but you immediately saw the Portugal, Canada and Tanzania
117
117
00:07:16,710 --> 00:07:21,157
already running another time, but at the same time, right?
118
118
00:07:23,230 --> 00:07:25,810
So I only wanted to show you this later,
119
119
00:07:25,810 --> 00:07:29,090
but now here it is already, but for now,
120
120
00:07:29,090 --> 00:07:31,563
let's keep focusing on making this work.
121
121
00:07:32,630 --> 00:07:36,690
So as I said, this year, we'll return a new promise,
122
122
00:07:36,690 --> 00:07:38,100
so a promise that runs
123
123
00:07:38,100 --> 00:07:40,810
all of these promises at the same time.
124
124
00:07:40,810 --> 00:07:43,020
And so then we can handle that promise
125
125
00:07:43,020 --> 00:07:44,973
in the exact same way as before.
126
126
00:07:47,350 --> 00:07:49,860
So that's called the result data,
127
127
00:07:49,860 --> 00:07:51,310
and then await it here
128
128
00:07:52,870 --> 00:07:55,223
and then lock the data to the console.
129
129
00:07:56,220 --> 00:07:58,683
So this one we also don't need anymore,
130
130
00:08:01,640 --> 00:08:03,563
so we want to lock the data.
131
131
00:08:05,270 --> 00:08:09,550
And so yeah, you see once again
132
132
00:08:09,550 --> 00:08:13,560
that these three now loaded exactly at the same time.
133
133
00:08:13,560 --> 00:08:17,353
So they are running in parallel, no longer in sequence now.
134
134
00:08:18,760 --> 00:08:22,283
So that's all I wanted to show you, so let's go back here.
135
135
00:08:23,840 --> 00:08:27,113
Okay, and so indeed here we get the result.
136
136
00:08:28,290 --> 00:08:32,350
So an array, which in this case returns three arrays
137
137
00:08:32,350 --> 00:08:36,400
and each of them is of course the object we're looking for.
138
138
00:08:36,400 --> 00:08:40,040
And so promise.all receives an array
139
139
00:08:40,040 --> 00:08:42,740
and it also returns an array.
140
140
00:08:42,740 --> 00:08:46,150
And so to create the same output as before,
141
141
00:08:46,150 --> 00:08:49,470
now, all we have to do is to loop over this data
142
142
00:08:49,470 --> 00:08:51,553
and take out the data that we want.
143
143
00:08:52,610 --> 00:08:57,610
So console.log then data.map,
144
144
00:08:57,890 --> 00:09:01,580
because remember that we want to actually return an array,
145
145
00:09:01,580 --> 00:09:03,180
but not this array,
146
146
00:09:03,180 --> 00:09:06,320
but simply an array with all the capital cities.
147
147
00:09:06,320 --> 00:09:07,990
So in this array of data,
148
148
00:09:07,990 --> 00:09:11,870
each element, let's call it d, which stands for data.
149
149
00:09:11,870 --> 00:09:15,460
So d is now this single array.
150
150
00:09:15,460 --> 00:09:19,700
So from d we want to take element zero and then on there,
151
151
00:09:19,700 --> 00:09:22,360
we want the capital city.
152
152
00:09:22,360 --> 00:09:24,410
And so this should be it.
153
153
00:09:24,410 --> 00:09:29,253
And yeah, here we get the exact same results as before.
154
154
00:09:30,170 --> 00:09:31,710
Now, just one thing
155
155
00:09:31,710 --> 00:09:34,180
that's also very important to mention here
156
156
00:09:34,180 --> 00:09:37,470
is that if one of the promises rejects,
157
157
00:09:37,470 --> 00:09:41,980
then the whole promise.all actually rejects as well.
158
158
00:09:41,980 --> 00:09:45,330
So we say that promise.all short circuits
159
159
00:09:45,330 --> 00:09:47,620
when one promise rejects.
160
160
00:09:47,620 --> 00:09:50,800
So again, because one rejected promise
161
161
00:09:50,800 --> 00:09:54,860
is enough for the entire thing to reject as well.
162
162
00:09:54,860 --> 00:09:58,850
Great, so whenever you have a situation
163
163
00:09:58,850 --> 00:10:02,420
in which you need to do multiple asynchronous operations
164
164
00:10:02,420 --> 00:10:03,890
at the same time,
165
165
00:10:03,890 --> 00:10:07,620
and operations that don't depend on one another,
166
166
00:10:07,620 --> 00:10:10,920
then you should always, always run them in parallel,
167
167
00:10:10,920 --> 00:10:14,600
just like we did here using promise.all.
168
168
00:10:14,600 --> 00:10:17,330
And this is actually more common than you might think.
169
169
00:10:17,330 --> 00:10:19,600
And so please keep this technique in mind
170
170
00:10:19,600 --> 00:10:22,970
because your users will thank you.
171
171
00:10:22,970 --> 00:10:24,080
And of course,
172
172
00:10:24,080 --> 00:10:27,890
just in case you're not using a single weight,
173
173
00:10:27,890 --> 00:10:31,210
you can, of course also take this result here
174
174
00:10:31,210 --> 00:10:33,660
and then handle it with the then method.
175
175
00:10:33,660 --> 00:10:36,170
So that's gonna work just exactly the same
176
176
00:10:36,170 --> 00:10:38,350
as here with a single weight.
177
177
00:10:38,350 --> 00:10:41,910
Okay, and that's the promise.all combinator.
178
178
00:10:41,910 --> 00:10:44,170
So it's called a combinator function
179
179
00:10:44,170 --> 00:10:48,480
because it allows us to combine multiple promises.
180
180
00:10:48,480 --> 00:10:51,400
And there are actually other combinator functions,
181
181
00:10:51,400 --> 00:10:54,363
and so let's take a look at them right in the next video.
15837
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.