Original subtitles

1 1

So in this lecture, we're gonna fix 2

2

the request 404 error that we saw happening 3

3

in the last lecture. 4

4

And so as we saw in the last video, the problem here 5

5

is that during the fetch, there was a 404 error, 6

6

which is because our API couldn't find any country 7

7

with this name. 8

8

But still, even though there 9

9

was obviously a big problem with this request, 10

10

the fetch function still did not reject in this case, 11

11

and by the way, many people, 12

12

and that includes myself think that in this case, 13

13

the promise should actually be rejected right away, 14

14

but again, it just doesn't, 15

15

and so we will have to do it manually. 16

16

So to see what happens here, let's go back 17

17

to this first then handler here, which gets access 18

18

to the response immediately. 19

19

So without even the data. 20

20

So here, I'm adding back a block, 21

21

and let's take a look at the response here. 22

22

And also, since we added back the block, 23

23

we now need to return this explicitly. 24

24

So again, for now, we are just taking a look 25

25

at the response object here. 26

26

And so here it is, 27

27

and so right here, you can see 28

28

that the Ok property is set to false. 29

29

And so the reason for that, 30

30

is, of course, the status code 404. 31

31

Now, when the request goes well, 32

32

and so that's what's gonna happen when I click here. 33

33

So then if we take a look at the response, Ok is true, 34

34

and that's because status is 200. 35

35

And so 200 literally stands for Ok. 36

36

So we can now use the fact 37

37

that this response has the Ok property set to false 38

38

to basically reject the promise, 39

39

or selves manually, now, right, 40

40

so we can do that by creating a new error. 41

41

So we can say, if there is no response, dot Ok, 42

42

or in other words, if response dot Ok is false, 43

43

then we right, throw new error, 44

44

and then here we can define an error message. 45

45

So let's write a very logical message here, 46

46

which is country not found. 47

47

So this is the real error message that we want to see here, 48

48

and of course, not this one here 49

49

with cannot read property of undefined. 50

50

And here, we can then also take the status code, 51

51

and display it as well. 52

52

So this 404, in this case, let's just wrap it here 53

53

into parenthesis, and Ok. 54

54

So this is something that we never did before. 55

55

So let's analyze what happens here. 56

56

So we create the new error 57

57

by using again, this constructor function, basically, 58

58

and then we pass in a message, which is gonna be 59

59

the error message, then we use the throw keyword here, 60

60

which will immediately terminate the current function. 61

61

So just like return does it. 62

62

Now the effect of creating, 63

63

and throwing an error in any of these then methods 64

64

is that the promise will immediately reject. 65

65

So basically, the promise returned 66

66

by this then handler here will be a rejected promise. 67

67

And that rejection will then propagate all the way down 68

68

to the catch handler, which we already have set up here. 69

69

And so now, if we will try to reload this, 70

70

and actually, let's do that. 71

71

So now this error message that we created here, 72

72

so that's country not found 404. 73

73

So exactly this, this is exactly the rejection 74

74

that we created here by creating this new error. 75

75

All right, so again, any error that happens 76

76

in any of the callback functions here, 77

77

so in any then handler, will immediately terminate 78

78

that then handler and will propagate down 79

79

to the catch method here. 80

80

And then in there, we handle that error, 81

81

and so therefore, that's why we then see 82

82

the error here displayed. 83

83

So that error dot message is exactly that message 84

84

that we pass into the error here. 85

85

And in fact, the same is true for any other error. 86

86

So before we had this, 87

87

the error that we saw was this one here, 88

88

and that's because somewhere 89

89

in the render country function, we are trying to read 90

90

the flag from the data that we received, 91

91

but the data that we received did not contain this flag. 92

92

And so therefore it created this error, 93

93

and then that error caused the rejection of the promise, 94

94

which was then one more time handled down here, okay. 95

95

So again, any error will cause any promise to reject, 96

96

but here, we are simply creating our own error 97

97

to basically reject the promise on purpose, 98

98

so that we can then handle 99

99

that error down here in the chain, 100

100

so in this catch method, all right. 101

101

But now, you might be wondering, 102

102

why should we even bother handle all these errors? 103

103

Isn't that just a bunch of work and a waste of time? 104

104

Well, first, handling these errors is the only way 105

105

in which we can actually display an error message like this 106

106

on the screen for the user, 107

107

but even more important, it's just a really bad practice 108

108

to leave these rejected promises, 109

109

hanging around without handling them. 110

110

So don't do that, always use catch, 111

111

and if necessary, you can also use finally, okay. 112

112

And now, again, what if there 113

113

was no error here in this promise? 114

114

So if we got no problem in this one here, 115

115

but then we get a problem in the second fetch. 116

116

So let's say that, we don't do this, 117

117

and so we have a reasonable country, 118

118

which is Portugal when we click on the button, 119

119

but then here, let's say that the neighbor is not this one, 120

120

but this country code, which I'm sure does not exist. 121

121

And so now there is gonna be a rejection 122

122

in this promise, right. 123

123

So we get another error here. 124

124

In this case, it's a 400 error, which means something else, 125

125

but in any case, the error is not handled. 126

126

So we now need to go ahead, 127

127

and copy this code here, also into this then handler. 128

128

Let's actually do that, even though we know 129

129

it's a bad practice, and we need to fix this later. 130

130

Okay, and so now we get the error message that we want. 131

131

So again, country not found, 132

132

and this time with the code 400. 133

133

But now, of course, we have all this duplicate code here. 134

134

So we shouldn't have this here. 135

135

And in fact, even all of this is kind of repetitive. 136

136

It's really, if you think about it 137

137

the same code as this one. 138

138

And so now, I think that it's a good time 139

139

to actually create ourselves a really nice helper function. 140

140

And this helper function will wrap up 141

141

the fetch the error handling, 142

142

and also the conversion to JSON, 143

143

because in my opinion, it's really a bit cumbersome 144

144

to having to do all these steps all the time. 145

145

So having the fetch, and then having to convert 146

146

that response to JSON, 147

147

and only then being able to handle it, right. 148

148

So instead, we will basically encapsulate all of this here 149

149

into one nice function, so let's do that, 150

150

and I'm gonna call it getJSON. 151

151

So basically, because it gets data, 152

152

and it immediately converts to JSON. 153

153

Now, what do we need here as parameters? 154

154

Well, for sure, we need the URL, 155

155

and so for now, that's okay, here. 156

156

So let's get, or actually, we can just write it. 157

157

So what we want here is fetch, 158

158

and then the URL that we pass into the function, 159

159

and then on that we want to call then, 160

160

and then basically with all of this. 161

161

So let's grab it here. 162

162

And that, of course, we are missing 163

163

the callback function itself here, 164

164

so that should end somewhere here, 165

165

and, well, apparently, it doesn't. 166

166

Maybe like this, and yes, that's correct. 167

167

All right, now in order 168

168

to actually make this function her really generic, 169

169

we do not want to hard code the error message, 170

170

but instead, we want to pass the message in. 171

171

So let's say error message, 172

172

and we can set a nice default value. 173

173

So let's say something went wrong, 174

174

which again is very generic, 175

175

and so here, inside of this, we then want 176

176

the error message that we passed in, 177

177

and along with response dot status. 178

178

Okay, and now all we need to do is to return all of this. 179

179

And so like this, 180

180

this getJSON function will actually return a promise. 181

181

And so this is then just like any other promise 182

182

that we can call here in our chain, 183

183

and basically replace all of this. 184

184

So just so we can keep this code, I'm gonna copy it. 185

185

And so you can then keep this code here, 186

186

basically as a reference for when you need 187

187

to study it again, okay. 188

188

But again, I will now go ahead and take everything 189

189

that we just nicely encapsulated into our getJSON function, 190

190

and simply replace this. 191

191

So getJSON, and then the URL is this one, 192

192

and the error message is country not found, now, right. 193

193

And so now, we can take away all of this. 194

194

So this is already in our get JSON function, 195

195

and so we don't need this. 196

196

All right, and now the same down here. 197

197

Instead of fetch, we can get JSON, 198

198

and then we don't need this done here. 199

199

And again, the error message is country not found. 200

200

Okay, and so let's get rid of this, now, right. 201

201

So let's check here, 202

202

and indeed, we get, again, country not found 203

203

with code 400 because of this one. 204

204

So that's working great, 205

205

but there's still one more thing 206

206

that we need to do, which is to handle the fact 207

207

that sometimes there might be no neighbor. 208

208

So right now, what we're doing here when there 209

209

is no neighbor, is to simply return, 210

210

but as I mentioned before, that doesn't really do anything. 211

211

So let me just try here, a country that has no neighbors. 212

212

So let's say Australia, because that is an island, 213

213

and so here again, we get cannot read property flag 214

214

of undefined, and so that is happening, 215

215

because it is trying to render a country that doesn't exist. 216

216

Okay, so again, it's because of this neighbor, 217

217

and just to make sure, to illustrate my point here, 218

218

you see that the neighbor is indeed undefined. 219

219

And so what we want to do here 220

220

is to simply just like before, throw a new error 221

221

that will then get caught down here 222

222

in our catch handler, right. 223

223

So throw new error, no neighbor, found, 224

224

and that's a lot better. 225

225

So now, this is a real error message 226

226

that actually makes sense to the user. 227

227

Of course, this could be all a bit better, 228

228

but this is just a demonstration anyway, 229

229

but I think that 230

230

it nicely demonstrate how we can create a real error message 231

231

that does actually make sense. 232

232

And again, that is super important 233

233

for any user interface that you're building, 234

234

because in web applications like this very small one, 235

235

errors will happen, that is just guaranteed, 236

236

and so your application needs to be ready, 237

237

and needs to be prepared for that. 238

238

All right, so let's now quickly recap here. 239

239

And I think that the big takeaway from this lecture 240

240

is that whenever we want to create some error 241

241

that we want to handle down here, 242

242

in the catch handler, all we need to do is to throw, 243

243

and create a new error, just like we did here. 244

244

And of course, we can do that for multiple reasons. 245

245

So in this case, here, we did it simply 246

246

because in the situation, no neighbor can be found. 247

247

And so that is a good reason to display an error message 248

248

on the user interface, 249

249

and since we do that down here in our error handler, 250

250

the best way of doing that is to indeed throw an error. 251

251

And remember that this works, 252

252

because throwing an error inside of this callback function 253

253

of this then method will immediately reject this promise. 254

254

And so then that rejected promise will travel down 255

255

the chain until it is eventually caught somewhere. 256

256

So again, in this case, it is right here 257

257

in this catch handler. 258

258

So when working with real applications 259

259

in the real world, really make sure 260

260

to keep this technique in mind, 261

261

because it's really important.