Original subtitles

1 1

Let's now learn how to chain promises in order 2

2

to also render the neighboring country, 3

3

of the initial country 4

4

that we give to the function. 5

5

And actually, we already have a small chain of promises 6

6

because of this JSON function. 7

7

And so here, 8

8

these two thens called and sequence 9

9

are basically already a small chain. 10

10

But anyway, in this lecture, 11

11

we will now take chaining to a new level 12

12

and actually chain together, 13

13

two sequential Ajax calls. 14

14

So just like before we first get data 15

15

about the country. 16

16

And so that's the part 17

17

that we already have here. 18

18

But then we also want to get the data 19

19

about the neighboring country. 20

20

And so again, 21

21

the second Ajax call depends on the data 22

22

from the first call. 23

23

And so they need to be done in sequence. 24

24

So let's simply modify what we already have here. 25

25

And so the second Ajax call basically needs 26

26

to happen here in 27

27

this then handler. 28

28

So as soon as we get the data, 29

29

then we need to get the neighbor country 30

30

and do the Ajax call for that one as well. 31

31

So let's get the neighbor and we already know 32

32

that it is at data zero at borders. 33

33

And then also the first one. 34

34

And just like before, let's say, 35

35

if there is no neighbor, 36

36

then return immediately. 37

37

And actually this is not going to work, 38

38

but nevermind about this for now. 39

39

So we will talk about error handling actually 40

40

in the next video. 41

41

Now here, there is some kind of problem. 42

42

Now we're missing the closing parenthesis here now. 43

43

Right? 44

44

But now there is no error. 45

45

And so let's do the second Ajax call. 46

46

And let me just get the URL 47

47

from up here. 48

48

So that's this one. 49

49

Now.Okay. 50

50

And so, we use again fetch 51

51

and then the URL. 52

52

So let's call it country two and 53

53

to your country one, all right. 54

54

Now, for now, 55

55

this is not going to do anything 56

56

because what we need to do now is 57

57

to actually return does new promise, 58

58

because then when we do that, 59

59

we will be able to chain a new then method 60

60

on the result of this then method. 61

61

All right. 62

62

So that's a bit similar to what we did here 63

63

with the JSON method, 64

64

which remember also returned to promise. 65

65

And so we return all of 66

66

that promise here, 67

67

and then we can chain a new then method on 68

68

to that as well. 69

69

Now, in the last lecture, 70

70

I actually oversimplified how things really work. 71

71

So actually the then method always returns a promise, 72

72

no matter if we actually return anything or not. 73

73

But if we do return a value, 74

74

then that value will become the fulfillment value 75

75

of the return promise. 76

76

So let me actually show that to you. 77

77

So instead of returning 78

78

this for now, 79

79

let me just return 23. 80

80

And so then when I chain a new then method here, 81

81

let's say data, 82

82

and then let's alert debt data. 83

83

Let's see. 84

84

And then indeed we get 23. 85

85

And so again, 86

86

that happens because whatever we return from 87

87

this promise here will become the fulfilled value 88

88

of the promise. 89

89

Okay? 90

90

So again, this year it returns a promise. 91

91

And so we can handle it using the then method 92

92

And to fulfill to value, 93

93

so the success value basically 94

94

of the promise will be the valued that 95

95

we return from this then method. 96

96

Right? 97

97

And so that is, this 23 here. 98

98

And so therefore in the next then method, 99

99

then the data here will be 23. 100

100

And of course this year must be 23. 101

101

Otherwise we cannot see that in effect. 102

102

But yeah, so it is 23 because this value is 23. 103

103

So again, this data that we receive here as an input 104

104

to dysfunction is the fulfilled value of the promise 105

105

that we're handling. 106

106

And so again, 107

107

that's this value 23, 108

108

that we are returning from 109

109

this then method here. 110

110

Okay. 111

111

But anyway, of course the same 112

112

is true for ah, promises. 113

113

And so by doing this, 114

114

so by returning this promise here, 115

115

then the fulfilled value 116

116

of the next then method will be fulfilled value of 117

117

this previous promise. 118

118

So of this one. 119

119

Okay. 120

120

So I know that sounds confusing, 121

121

but what you need to understand is that basically 122

122

this then method here returns in your promise until, 123

123

we can then one more time handle the success value 124

124

of that promise. 125

125

So one more time, I'm calling this 126

126

one now a response, 127

127

because here we are dealing with the fulfilled value 128

128

of a fetch promise. 129

129

And so that is a response. 130

130

And so therefore I like to call it like that. 131

131

And so here, one more time, 132

132

we need to call the JSON method and that 133

133

is pretty annoying, 134

134

but that's just how we have to do it. 135

135

And so here again, 136

136

the fulfilled value of the promise will become dart body. 137

137

So the data that is stored 138

138

in the body, 139

139

and then we can again, handle that. 140

140

So data like this 141

141

and then render country with data. 142

142

And then here again, 143

143

we pass in that CSS class for the neighbor. 144

144

Okay. 145

145

And that should already be it. 146

146

And indeed, here we go. 147

147

And if we try something else, 148

148

let's say Germany, 149

149

let's see what country we get 150

150

and it's Austria. 151

151

Okay. 152

152

But anyway, 153

153

let's just put it back to this one here and yeah, 154

154

that's actually it already. 155

155

So as you can see, 156

156

promises really 157

157

allow us to handle these complex asynchronous operations 158

158

with as many steps 159

159

as we want. 160

160

So right now we have four steps here, even, 161

161

but of course we could extend this as much 162

162

as we want. 163

163

So even if we wanted the neighbor of the neighbor 164

164

of the neighbor, 165

165

like 10 countries, 166

166

we could easily do this by chaining all these promises 167

167

one after another and all 168

168

without the callback hell. 169

169

So here, instead of the callback, 170

170

hell we have what we call a flat chain of promises. 171

171

And this one is again, 172

172

very easy to understand and to read. 173

173

So as a conclusion to this video and the previous one, 174

174

promises really, 175

175

are an incredibly powerful and elegant solution 176

176

to handle asynchronous code. 177

177

Now, just to finish, 178

178

I want to show you a pretty common mistake 179

179

that many beginners make, 180

180

which is to basically chain this then method directly 181

181

onto a new nested promise. 182

182

So as we know, 183

183

this one immediately returns a promise. 184

184

And so many beginners basically do this instead, 185

185

let me show it to you here. 186

186

So instead of returning the new promise, 187

187

they then chain theme then method right here. 188

188

So right inside of 189

189

this then method. 190

190

Now this actually does still work, 191

191

but then we are in fact back to callback hell. 192

192

Because now indeed, 193

193

we have one callback function here 194

194

defined inside of another one. 195

195

So inside of this, 196

196

in closing callback function. 197

197

Okay. 198

198

And so of course 199

199

that's exactly what we're trying to avoid. 200

200

And so don't do this. 201

201

So always return to promise 202

202

and then handle it outside by simply continuing 203

203

the chain like this. 204

204

Alright, but I hope that this 205

205

was already pretty obvious anyway, 206

206

from all the explanations that I gave you throughout 207

207

this lecture and the previous one. 208

208

But anyway, 209

209

let's now move on and actually handle errors because 210

210

that is also a pretty common scenario when we work 211

211

with promises and especially 212

212

with Ajax calls.