Original subtitles

1 1

Let's now imagine 2

2

that we wanted to get some data 3

3

about three countries at the same time, 4

4

but in which the order that the data arrives 5

5

does not matter at all. 6

6

So let's now implement an async function, 7

7

using everything that we know at this point, 8

8

and that this function will simply take in three countries 9

9

and it will lock the capital cities 10

10

of these three countries as an array. 11

11

So let's say get three countries. 12

12

And again, it's an async function. 13

13

So country one, two, and three, and then an async function, 14

14

we really always need to wrap or coat 15

15

into a try catch block, okay? 16

16

So never work an async function without this. 17

17

And again, in a real world scenario, 18

18

you would do real error handling 19

19

and not just log it to the console. 20

20

Okay, so await, and then let's use our getJSON function 21

21

that we coded at some point 22

22

at the beginning of this section. 23

23

So here at the top of my file, 24

24

I have this getJSON function, 25

25

which remember, encapsulates the fetch request, 26

26

the error handling also. 27

27

So basically when there is an error in this fetch, 28

28

it will throw a new error 29

29

and it also immediately converts the response to JSON. 30

30

So again, if you skipped one of the previous lectures, 31

31

then make sure to get this function 32

32

from the final code of the section. 33

33

So getJSON, and then here again, 34

34

we're using our rest countries API, 35

35

so let me get to the URL. 36

36

So here we now will use c1, 37

37

and so then we store that data 38

38

into a variable just like this. 39

39

So this is the magic of async 08, all right? 40

40

Now we already know that the result of this 41

41

is gonna be an array with one object. 42

42

So let's use the structuring 43

43

to take the first element there. 44

44

And now let's simply duplicate this code here twice, 45

45

and do this three times. 46

46

So creating three variables for these three countries, 47

47

and then what we want to get is the capital. 48

48

So now let's say data one.capital, 49

49

because there is such a property in each of these objects. 50

50

And so remember that we want to return an array here, 51

51

and so that's what we're doing, 52

52

and data three.capital as well. 53

53

And so this should actually already work, all right? 54

54

So let's call this function, get three countries. 55

55

Let's use Portugal again and Canada and maybe Tanzania, 56

56

which is a very beautiful country. 57

57

Oh, and here we got something went wrong. 58

58

So Portugal, 59

59

so missing the G, and yeah. 60

60

So here we get the three capital cities 61

61

of the three countries. 62

62

So great, this works just fine, 63

63

and also at a first sight, there seems to make sense. 64

64

But if we think about what we did here, 65

65

then maybe it actually doesn't make so much sense 66

66

because what we did here basically 67

67

was to run all these Ajax calls one after another, 68

68

even though the result of the second one here 69

69

does not depend on the first one, 70

70

and the result of the third one 71

71

does also not depend on any of the other ones. 72

72

And so actually this doesn't make much sense. 73

73

Why should the second Ajax call wait for the first one? 74

74

And actually let's take a look 75

75

at this in our network tab here as well. 76

76

So let's again, maybe set this to slow, 3G now, 77

77

and then I will have to make it a little bit smaller 78

78

so that we can actually see something down here. 79

79

Okay, so down here, we actually have the three Ajax calls. 80

80

So let's use fast, 3G here actually, 81

81

and so let's see what happens. 82

82

And so basically these bars that you see here 83

83

is JavaScript downloading something. 84

84

So here, of course, 85

85

the first one is the HTML, CSS and JavaScript, 86

86

so nothing strange there, 87

87

but then here we load the data for Portugal, right? 88

88

So that's the first Ajax call. 89

89

And then after that has finished, 90

90

we load the data for Canada, 91

91

and then after that has finished, 92

92

we load the data for Tanzania. 93

93

So just as we have it here in the code, 94

94

and so as I explained, that doesn't make a lot of sense. 95

95

So instead of running these promises in sequence, 96

96

we can actually run them in parallel, 97

97

so all at the same time. 98

98

And so then we can save valuable loading time, 99

99

making these three here, basically load at the same time. 100

100

And each of them takes half a second. 101

101

And so with that, we will basically save one second, 102

102

which is actually a lot of time when loading a website. 103

103

So let's do that, and for doing that, 104

104

we use the promise.all combinator function, so promise.all. 105

105

And so this is once again, 106

106

kind of a helper function on this promise constructor. 107

107

So it's a static method, right? 108

108

Now, this function here takes in an array of promises, 109

109

and it will return a new promise, 110

110

which will then run all the promises 111

111

in the array at the same time. 112

112

So let's simply grab these three promises from here. 113

113

So one, then here, the second one, 114

114

and this is the third one, okay? 115

115

So here we, again, have these three running, 116

116

but you immediately saw the Portugal, Canada and Tanzania 117

117

already running another time, but at the same time, right? 118

118

So I only wanted to show you this later, 119

119

but now here it is already, but for now, 120

120

let's keep focusing on making this work. 121

121

So as I said, this year, we'll return a new promise, 122

122

so a promise that runs 123

123

all of these promises at the same time. 124

124

And so then we can handle that promise 125

125

in the exact same way as before. 126

126

So that's called the result data, 127

127

and then await it here 128

128

and then lock the data to the console. 129

129

So this one we also don't need anymore, 130

130

so we want to lock the data. 131

131

And so yeah, you see once again 132

132

that these three now loaded exactly at the same time. 133

133

So they are running in parallel, no longer in sequence now. 134

134

So that's all I wanted to show you, so let's go back here. 135

135

Okay, and so indeed here we get the result. 136

136

So an array, which in this case returns three arrays 137

137

and each of them is of course the object we're looking for. 138

138

And so promise.all receives an array 139

139

and it also returns an array. 140

140

And so to create the same output as before, 141

141

now, all we have to do is to loop over this data 142

142

and take out the data that we want. 143

143

So console.log then data.map, 144

144

because remember that we want to actually return an array, 145

145

but not this array, 146

146

but simply an array with all the capital cities. 147

147

So in this array of data, 148

148

each element, let's call it d, which stands for data. 149

149

So d is now this single array. 150

150

So from d we want to take element zero and then on there, 151

151

we want the capital city. 152

152

And so this should be it. 153

153

And yeah, here we get the exact same results as before. 154

154

Now, just one thing 155

155

that's also very important to mention here 156

156

is that if one of the promises rejects, 157

157

then the whole promise.all actually rejects as well. 158

158

So we say that promise.all short circuits 159

159

when one promise rejects. 160

160

So again, because one rejected promise 161

161

is enough for the entire thing to reject as well. 162

162

Great, so whenever you have a situation 163

163

in which you need to do multiple asynchronous operations 164

164

at the same time, 165

165

and operations that don't depend on one another, 166

166

then you should always, always run them in parallel, 167

167

just like we did here using promise.all. 168

168

And this is actually more common than you might think. 169

169

And so please keep this technique in mind 170

170

because your users will thank you. 171

171

And of course, 172

172

just in case you're not using a single weight, 173

173

you can, of course also take this result here 174

174

and then handle it with the then method. 175

175

So that's gonna work just exactly the same 176

176

as here with a single weight. 177

177

Okay, and that's the promise.all combinator. 178

178

So it's called a combinator function 179

179

because it allows us to combine multiple promises. 180

180

And there are actually other combinator functions, 181

181

and so let's take a look at them right in the next video.