Original subtitles

1 1

So in the last lecture, we did a simple AJAX call 2

2

to fetch data from a country's API. 3

3

So we created a function for that. 4

4

And as we call the function multiple times, 5

5

multiple AJAX calls were made at the same time. 6

6

So they were basically running in parallel. 7

7

And we could not control which one finished first, 8

8

remember that? 9

9

However, in this lecture, 10

10

let's create a sequence of AJAX calls, 11

11

so that the second one 12

12

runs only after the first one has finished. 13

13

And here's what we're gonna do. 14

14

So in the countries data here, 15

15

there is some property of the bordering countries. 16

16

So you see, this one here has the code ESP, 17

17

which stands for Spain. 18

18

And so that's because Spain 19

19

is a bordering country of Portugal. 20

20

And so what we will do now 21

21

is after the first AJAX call is completed, 22

22

we will get this border. 23

23

And then based on this code, 24

24

we will also render the neighboring country 25

25

right here besides the original country. 26

26

And so in this case, 27

27

the second AJAX call really depends on the first one, 28

28

because the data about neighboring countries, 29

29

is of course a result of the first call. 30

30

So without the first call, 31

31

we wouldn't even know which data to fetch, 32

32

in the second call. 33

33

And so what we need to implement is a sequence of AJAX call. 34

34

So here, I already copied 35

35

the function from the last lecture, which is still up here. 36

36

And so let's call this one here now, 37

37

getCountryAndNeighbor. 38

38

So, again, we get the country as an input. 39

39

And then here, we do the first AJAX call. 40

40

And then once the load event is fired, 41

41

when the data arrives, we then handle that data. 42

42

And so everything that we have here is still the same. 43

43

Now, we will do this part here another time. 44

44

So basically, once the neighboring country arrives, 45

45

we also will want to render this one. 46

46

And so let's export this functionality 47

47

into its own function. 48

48

So that we don't have to copy it later. 49

49

And this also makes this function a little bit cleaner. 50

50

So renderCountry, that's gonna be a function, 51

51

which simply takes in some data. 52

52

And select this, we don't have to change, 53

53

the variable names in here. 54

54

And so now here, let's then actually call that function. 55

55

So renderCountry with data. 56

56

And now we get this error here, 57

57

because of course, this function no longer exists. 58

58

So getCountryAndNeighbor. 59

59

So as I save this now, this should look the same as before. 60

60

And so indeed it does. 61

61

But now here, let's actually get the neighbor country. 62

62

So let's write that, Get neighbor country. 63

63

And here actually, let's also do some comments now. 64

64

So Render country 1, let's say. 65

65

And here I will say, AJAX call country 1. 66

66

So the neighbor country will then be country 2. 67

67

So the neighbor is gonna be data.borders, I believe. 68

68

So let's just check that here again. 69

69

And so this is actually an array. 70

70

And so we will simply render the first element. 71

71

So in the case of Portugal, there is just one border. 72

72

But in other countries, like Germany, 73

73

there's like 10 borders or something. 74

74

So let's just destructor here, 75

75

basically just take the first element. 76

76

But of course, there are also countries 77

77

which have no neighbors at all. 78

78

So islands, basically. 79

79

And so for these cases, 80

80

let's simply make sure that we don't run into any mistakes. 81

81

And so in that case, we simply return immediately. 82

82

But of course, if the neighbor does exist, 83

83

then now we can do the second AJAX call. 84

84

And so let's copy all of this. 85

85

And so here AJAX call 2 86

86

and now here of course we don't want to use the country, 87

87

but he wants to use the neighbor. 88

88

But there is one particularity about that 89

89

because here the border. 90

90

So this one here, this country, 91

91

actually doesn't come with the name of the country. 92

92

But with this code. 93

93

But using our API, we can actually also search by the code. 94

94

So, right here we have that. 95

95

So right now we are using the name. 96

96

But as I said, we can also search for the code. 97

97

And so all we have to change is basically here, 98

98

from name to alpha. 99

99

So that's alpha here, and then here, the neighbor. 100

100

And so now just like before, we have to then list them 101

101

for the load event on this new request. 102

102

And let's call this request 2, 103

103

because of course, we can't do that on the same request 104

104

that we did here in the beginning. 105

105

So request 2 addEventListener. 106

106

Load, and then, or callback function. 107

107

And so you're starting to see now that the second AJAX call 108

108

now in the way we are setting it up here 109

109

is really dependent on the first one. 110

110

So that's because basically we are firing of, 111

111

the second AJAX call here, in the callback function 112

112

of the first one, right? 113

113

So basically, inside of this callback function, 114

114

we are now adding a new EventListener for the new request. 115

115

And so here, we now have 116

116

one callback inside of the other one. 117

117

And so we will talk about that 118

118

once we have this code working. 119

119

But for now, let's actually take a look at the result here. 120

120

And so that's gonna be, request 121

121

or actually just a disk keyword. 122

122

So this.responseText. 123

123

So let's see. 124

124

And, indeed, now we get data about Spain. 125

125

And no matter how many times we reload the page, 126

126

it will now always, always appear after Portugal. 127

127

Because there is no way that this AJAX call here can be made 128

128

before the one on Portugal. 129

129

Okay, and so now, well, let's just do the same 130

130

as we did here. 131

131

So we don't need this, 132

132

let's say data2 should be JSON.parse, and then this. 133

133

And of course, we need to also the destructure it then, 134

134

logging into the Console. 135

135

But now we get some error here. 136

136

So let's just take a look at the result itself 137

137

without any destructuring. 138

138

Oh, and so now it works. 139

139

And the reason for that is that the response of this API 140

140

is actually no longer an array, when we search for the code. 141

141

So here we have this alpha, remember, 142

142

and so this time, we are searching for country codes, 143

143

and not for country names. 144

144

And so the country codes are unique. 145

145

And so therefore, they can always just be one result. 146

146

And so that's the reason why no array is returned. 147

147

And probably it says here so, in the documentation. 148

148

Well, it doesn't say so. 149

149

But if we would have just simply inspected 150

150

the response here, 151

151

then we would have understood that as well. 152

152

But anyway, now it worked. 153

153

And so let's now render, this country here as well. 154

154

So data2 and now let's wait, and there it is, great. 155

155

Now Actually, I created a special class, 156

156

here for the neighboring country, 157

157

so that it appears a little bit smaller. 158

158

And so when it is the neighbor, 159

159

we want to attach some class here to the country. 160

160

And so let's pass that class in. 161

161

So let's say className. 162

162

And by default, we set it to nothing. 163

163

So here, we will just edit to the string, like this. 164

164

And now when it is a neighbor, 165

165

we can just pass in, neighbor like this. 166

166

Give it a safe, and yeah, so that looks a bit nicer. 167

167

We get information that this is a neighbor country. 168

168

And so now let's try this, for example, for the USA as well. 169

169

But now I just want to do one at a time. 170

170

So here we should probably get Mexico or Canada. 171

171

And indeed, here it is. 172

172

Here is Canada, the neighboring country of the US. 173

173

And so one more time. 174

174

This second AJAX call would not have been possible 175

175

without the first one. 176

176

Because otherwise, how would we know 177

177

that the second country here needed to be Canada? 178

178

So, again, we have one AJAX call here 179

179

that depends on another one. 180

180

And so what we have here is one callback function 181

181

inside of another one. 182

182

So you see here, we attach the first callback function. 183

183

And then inside of that, we have yet another one. 184

184

So in other words, here, we have nested callbacks. 185

185

But now imagine that we wanted 186

186

to do more requests in sequence, 187

187

like the neighbor of the neighbor of the neighbor, 188

188

and like 10 times over. 189

189

So in that case, we would end up 190

190

with callbacks inside of callbacks inside of callbacks, 191

191

like 10 times. 192

192

And actually, for that kind of structure. 193

193

And for that kind of behavior, we have a special name. 194

194

And that special name is callback hell. 195

195

So basically, callback hell 196

196

is when we have a lot of nested callbacks 197

197

in order to execute asynchronous tasks in sequence. 198

198

And in fact, this happens for all asynchronous tasks, 199

199

which are handled by callbacks. 200

200

And not just AJAX calls. 201

201

So for example, let's say we have a set timeout function. 202

202

And then here, we want to log something to the Console, 203

203

like 1 second passed, but then also, 204

204

we want to start another timeout. 205

205

Let's just set 1000 here. 206

206

So let's copy this one here. 207

207

And so as I just said, let's say, 208

208

that here we wanted to start a new timer 209

209

after the first timer has finished. 210

210

So here, we can say 2 seconds passed. 211

211

And we can even add another one. 212

212

So never mind about what just happened in the Console. 213

213

And here, why not add yet another one? 214

214

And so now they should appear like one, two, three, four. 215

215

And so here to of course, we have callback hell. 216

216

And in fact, callback hell is pretty easy to identify 217

217

by this triangular shape that is formed here, you see that. 218

218

And also the same is starting to appear here. 219

219

So if we had more callbacks in here, 220

220

then we would start to see a lot more indentation here. 221

221

And then this triangular shape, would also appear there. 222

222

Now, the problem with callback hell 223

223

is that it makes our code look very messy. 224

224

But even more important, 225

225

it makes our code harder to maintain, 226

226

and very difficult to understand, and to reason about, 227

227

and code that is hard to understand 228

228

and difficult to reason about. 229

229

Will have more bugs, and it's just worse code. 230

230

So this is a great rule 231

231

that you should always remember and keep in mind. 232

232

So again, the rule is that code that's hard to understand, 233

233

is basically bad code, because it will have more bugs, 234

234

because the harder it is to understand code 235

235

and to reason about the code, 236

236

the more difficult it will be to add new features 237

237

and to add more functionality to the application. 238

238

But anyway, given all these problems with callback hell, 239

239

we of course, need a way to solve callback hell. 240

240

And fortunately for us, since ES6, 241

241

there is actually a way of escaping callback hell 242

242

by using something called promises. 243

243

And so let's now take the next step 244

244

in our journey of asynchronous JavaScript, 245

245

which is to learn all about promises.