WEBVTT 1 00:00:01.180 --> 00:00:03.480 So in this lecture, we're gonna fix 2 00:00:03.480 --> 00:00:06.730 the request 404 error that we saw happening 3 00:00:06.730 --> 00:00:08.093 in the last lecture. 4 00:00:09.910 --> 00:00:13.090 And so as we saw in the last video, the problem here 5 00:00:13.090 --> 00:00:17.490 is that during the fetch, there was a 404 error, 6 00:00:17.490 --> 00:00:21.080 which is because our API couldn't find any country 7 00:00:21.080 --> 00:00:23.060 with this name. 8 00:00:23.060 --> 00:00:24.770 But still, even though there 9 00:00:24.770 --> 00:00:28.320 was obviously a big problem with this request, 10 00:00:28.320 --> 00:00:32.770 the fetch function still did not reject in this case, 11 00:00:32.770 --> 00:00:34.800 and by the way, many people, 12 00:00:34.800 --> 00:00:38.200 and that includes myself think that in this case, 13 00:00:38.200 --> 00:00:41.820 the promise should actually be rejected right away, 14 00:00:41.820 --> 00:00:43.880 but again, it just doesn't, 15 00:00:43.880 --> 00:00:45.823 and so we will have to do it manually. 16 00:00:47.660 --> 00:00:52.160 So to see what happens here, let's go back 17 00:00:52.160 --> 00:00:57.160 to this first then handler here, which gets access 18 00:00:57.480 --> 00:00:59.143 to the response immediately. 19 00:01:00.010 --> 00:01:01.543 So without even the data. 20 00:01:03.020 --> 00:01:05.460 So here, I'm adding back a block, 21 00:01:05.460 --> 00:01:07.903 and let's take a look at the response here. 22 00:01:08.870 --> 00:01:11.750 And also, since we added back the block, 23 00:01:11.750 --> 00:01:14.683 we now need to return this explicitly. 24 00:01:15.640 --> 00:01:18.320 So again, for now, we are just taking a look 25 00:01:18.320 --> 00:01:20.093 at the response object here. 26 00:01:21.280 --> 00:01:23.100 And so here it is, 27 00:01:23.100 --> 00:01:25.733 and so right here, you can see 28 00:01:25.733 --> 00:01:29.110 that the Ok property is set to false. 29 00:01:29.110 --> 00:01:30.840 And so the reason for that, 30 00:01:30.840 --> 00:01:32.703 is, of course, the status code 404. 31 00:01:34.270 --> 00:01:37.310 Now, when the request goes well, 32 00:01:37.310 --> 00:01:39.910 and so that's what's gonna happen when I click here. 33 00:01:41.940 --> 00:01:46.070 So then if we take a look at the response, Ok is true, 34 00:01:46.070 --> 00:01:48.960 and that's because status is 200. 35 00:01:48.960 --> 00:01:51.883 And so 200 literally stands for Ok. 36 00:01:55.410 --> 00:01:57.140 So we can now use the fact 37 00:01:57.140 --> 00:02:01.102 that this response has the Ok property set to false 38 00:02:01.102 --> 00:02:03.330 to basically reject the promise, 39 00:02:03.330 --> 00:02:07.510 or selves manually, now, right, 40 00:02:07.510 --> 00:02:11.050 so we can do that by creating a new error. 41 00:02:11.050 --> 00:02:16.050 So we can say, if there is no response, dot Ok, 42 00:02:17.310 --> 00:02:21.130 or in other words, if response dot Ok is false, 43 00:02:21.130 --> 00:02:26.130 then we right, throw new error, 44 00:02:26.252 --> 00:02:29.653 and then here we can define an error message. 45 00:02:31.250 --> 00:02:34.230 So let's write a very logical message here, 46 00:02:34.230 --> 00:02:37.880 which is country not found. 47 00:02:37.880 --> 00:02:41.370 So this is the real error message that we want to see here, 48 00:02:41.370 --> 00:02:43.730 and of course, not this one here 49 00:02:43.730 --> 00:02:47.661 with cannot read property of undefined. 50 00:02:47.661 --> 00:02:51.700 And here, we can then also take the status code, 51 00:02:51.700 --> 00:02:53.173 and display it as well. 52 00:02:55.530 --> 00:02:59.040 So this 404, in this case, let's just wrap it here 53 00:02:59.040 --> 00:03:03.640 into parenthesis, and Ok. 54 00:03:03.640 --> 00:03:06.860 So this is something that we never did before. 55 00:03:06.860 --> 00:03:08.863 So let's analyze what happens here. 56 00:03:09.820 --> 00:03:11.516 So we create the new error 57 00:03:11.516 --> 00:03:15.890 by using again, this constructor function, basically, 58 00:03:15.890 --> 00:03:18.540 and then we pass in a message, which is gonna be 59 00:03:18.540 --> 00:03:22.550 the error message, then we use the throw keyword here, 60 00:03:22.550 --> 00:03:25.990 which will immediately terminate the current function. 61 00:03:25.990 --> 00:03:28.850 So just like return does it. 62 00:03:28.850 --> 00:03:30.670 Now the effect of creating, 63 00:03:30.670 --> 00:03:34.290 and throwing an error in any of these then methods 64 00:03:34.290 --> 00:03:37.770 is that the promise will immediately reject. 65 00:03:37.770 --> 00:03:40.310 So basically, the promise returned 66 00:03:40.310 --> 00:03:44.097 by this then handler here will be a rejected promise. 67 00:03:44.097 --> 00:03:47.026 And that rejection will then propagate all the way down 68 00:03:47.026 --> 00:03:51.417 to the catch handler, which we already have set up here. 69 00:03:51.417 --> 00:03:55.200 And so now, if we will try to reload this, 70 00:03:55.200 --> 00:03:56.600 and actually, let's do that. 71 00:03:57.830 --> 00:04:01.230 So now this error message that we created here, 72 00:04:01.230 --> 00:04:04.300 so that's country not found 404. 73 00:04:04.300 --> 00:04:07.880 So exactly this, this is exactly the rejection 74 00:04:07.880 --> 00:04:11.530 that we created here by creating this new error. 75 00:04:11.530 --> 00:04:14.950 All right, so again, any error that happens 76 00:04:14.950 --> 00:04:16.985 in any of the callback functions here, 77 00:04:16.985 --> 00:04:20.550 so in any then handler, will immediately terminate 78 00:04:20.550 --> 00:04:23.170 that then handler and will propagate down 79 00:04:23.170 --> 00:04:26.630 to the catch method here. 80 00:04:26.630 --> 00:04:28.737 And then in there, we handle that error, 81 00:04:28.737 --> 00:04:31.167 and so therefore, that's why we then see 82 00:04:31.167 --> 00:04:32.653 the error here displayed. 83 00:04:33.820 --> 00:04:37.009 So that error dot message is exactly that message 84 00:04:37.009 --> 00:04:39.708 that we pass into the error here. 85 00:04:39.708 --> 00:04:43.604 And in fact, the same is true for any other error. 86 00:04:43.604 --> 00:04:46.250 So before we had this, 87 00:04:46.250 --> 00:04:49.830 the error that we saw was this one here, 88 00:04:49.830 --> 00:04:51.340 and that's because somewhere 89 00:04:51.340 --> 00:04:54.257 in the render country function, we are trying to read 90 00:04:54.257 --> 00:04:57.295 the flag from the data that we received, 91 00:04:57.295 --> 00:05:01.710 but the data that we received did not contain this flag. 92 00:05:01.710 --> 00:05:03.589 And so therefore it created this error, 93 00:05:03.589 --> 00:05:07.748 and then that error caused the rejection of the promise, 94 00:05:07.748 --> 00:05:12.748 which was then one more time handled down here, okay. 95 00:05:12.836 --> 00:05:17.836 So again, any error will cause any promise to reject, 96 00:05:18.040 --> 00:05:20.719 but here, we are simply creating our own error 97 00:05:20.719 --> 00:05:24.140 to basically reject the promise on purpose, 98 00:05:24.140 --> 00:05:25.540 so that we can then handle 99 00:05:25.540 --> 00:05:27.742 that error down here in the chain, 100 00:05:27.742 --> 00:05:31.240 so in this catch method, all right. 101 00:05:31.240 --> 00:05:32.874 But now, you might be wondering, 102 00:05:32.874 --> 00:05:36.650 why should we even bother handle all these errors? 103 00:05:36.650 --> 00:05:40.460 Isn't that just a bunch of work and a waste of time? 104 00:05:40.460 --> 00:05:44.240 Well, first, handling these errors is the only way 105 00:05:44.240 --> 00:05:47.902 in which we can actually display an error message like this 106 00:05:47.902 --> 00:05:50.380 on the screen for the user, 107 00:05:50.380 --> 00:05:54.050 but even more important, it's just a really bad practice 108 00:05:54.050 --> 00:05:57.140 to leave these rejected promises, 109 00:05:57.140 --> 00:05:59.790 hanging around without handling them. 110 00:05:59.790 --> 00:06:03.310 So don't do that, always use catch, 111 00:06:03.310 --> 00:06:07.013 and if necessary, you can also use finally, okay. 112 00:06:08.900 --> 00:06:13.780 And now, again, what if there 113 00:06:13.780 --> 00:06:16.363 was no error here in this promise? 114 00:06:17.770 --> 00:06:20.810 So if we got no problem in this one here, 115 00:06:20.810 --> 00:06:24.186 but then we get a problem in the second fetch. 116 00:06:24.186 --> 00:06:28.520 So let's say that, we don't do this, 117 00:06:28.520 --> 00:06:30.130 and so we have a reasonable country, 118 00:06:30.130 --> 00:06:32.766 which is Portugal when we click on the button, 119 00:06:32.766 --> 00:06:35.963 but then here, let's say that the neighbor is not this one, 120 00:06:37.030 --> 00:06:42.030 but this country code, which I'm sure does not exist. 121 00:06:44.320 --> 00:06:46.470 And so now there is gonna be a rejection 122 00:06:46.470 --> 00:06:49.483 in this promise, right. 123 00:06:51.970 --> 00:06:53.800 So we get another error here. 124 00:06:53.800 --> 00:06:58.600 In this case, it's a 400 error, which means something else, 125 00:06:58.600 --> 00:07:02.350 but in any case, the error is not handled. 126 00:07:02.350 --> 00:07:03.890 So we now need to go ahead, 127 00:07:03.890 --> 00:07:08.263 and copy this code here, also into this then handler. 128 00:07:09.140 --> 00:07:10.921 Let's actually do that, even though we know 129 00:07:10.921 --> 00:07:15.423 it's a bad practice, and we need to fix this later. 130 00:07:19.420 --> 00:07:24.420 Okay, and so now we get the error message that we want. 131 00:07:26.070 --> 00:07:28.240 So again, country not found, 132 00:07:28.240 --> 00:07:30.720 and this time with the code 400. 133 00:07:30.720 --> 00:07:33.883 But now, of course, we have all this duplicate code here. 134 00:07:34.880 --> 00:07:37.530 So we shouldn't have this here. 135 00:07:37.530 --> 00:07:41.510 And in fact, even all of this is kind of repetitive. 136 00:07:41.510 --> 00:07:44.000 It's really, if you think about it 137 00:07:44.000 --> 00:07:46.281 the same code as this one. 138 00:07:46.281 --> 00:07:49.010 And so now, I think that it's a good time 139 00:07:49.010 --> 00:07:53.070 to actually create ourselves a really nice helper function. 140 00:07:53.070 --> 00:07:55.270 And this helper function will wrap up 141 00:07:55.270 --> 00:07:57.110 the fetch the error handling, 142 00:07:57.110 --> 00:07:59.891 and also the conversion to JSON, 143 00:07:59.891 --> 00:08:03.560 because in my opinion, it's really a bit cumbersome 144 00:08:03.560 --> 00:08:06.343 to having to do all these steps all the time. 145 00:08:07.450 --> 00:08:10.730 So having the fetch, and then having to convert 146 00:08:10.730 --> 00:08:12.212 that response to JSON, 147 00:08:12.212 --> 00:08:16.870 and only then being able to handle it, right. 148 00:08:16.870 --> 00:08:20.460 So instead, we will basically encapsulate all of this here 149 00:08:20.460 --> 00:08:23.706 into one nice function, so let's do that, 150 00:08:23.706 --> 00:08:26.343 and I'm gonna call it getJSON. 151 00:08:29.360 --> 00:08:31.930 So basically, because it gets data, 152 00:08:31.930 --> 00:08:35.332 and it immediately converts to JSON. 153 00:08:35.332 --> 00:08:38.123 Now, what do we need here as parameters? 154 00:08:38.980 --> 00:08:41.670 Well, for sure, we need the URL, 155 00:08:41.670 --> 00:08:44.543 and so for now, that's okay, here. 156 00:08:46.090 --> 00:08:51.053 So let's get, or actually, we can just write it. 157 00:08:52.150 --> 00:08:54.370 So what we want here is fetch, 158 00:08:54.370 --> 00:08:57.820 and then the URL that we pass into the function, 159 00:08:57.820 --> 00:09:02.220 and then on that we want to call then, 160 00:09:02.220 --> 00:09:04.453 and then basically with all of this. 161 00:09:06.370 --> 00:09:08.523 So let's grab it here. 162 00:09:12.180 --> 00:09:16.520 And that, of course, we are missing 163 00:09:18.650 --> 00:09:20.353 the callback function itself here, 164 00:09:23.640 --> 00:09:26.733 so that should end somewhere here, 165 00:09:27.950 --> 00:09:31.263 and, well, apparently, it doesn't. 166 00:09:34.610 --> 00:09:39.480 Maybe like this, and yes, that's correct. 167 00:09:39.480 --> 00:09:41.170 All right, now in order 168 00:09:41.170 --> 00:09:44.650 to actually make this function her really generic, 169 00:09:44.650 --> 00:09:47.647 we do not want to hard code the error message, 170 00:09:47.647 --> 00:09:51.120 but instead, we want to pass the message in. 171 00:09:51.120 --> 00:09:53.900 So let's say error message, 172 00:09:53.900 --> 00:09:56.033 and we can set a nice default value. 173 00:09:57.470 --> 00:10:01.320 So let's say something went wrong, 174 00:10:01.320 --> 00:10:03.580 which again is very generic, 175 00:10:03.580 --> 00:10:07.030 and so here, inside of this, we then want 176 00:10:09.560 --> 00:10:12.060 the error message that we passed in, 177 00:10:12.060 --> 00:10:16.010 and along with response dot status. 178 00:10:16.010 --> 00:10:20.941 Okay, and now all we need to do is to return all of this. 179 00:10:20.941 --> 00:10:22.430 And so like this, 180 00:10:22.430 --> 00:10:26.720 this getJSON function will actually return a promise. 181 00:10:26.720 --> 00:10:29.585 And so this is then just like any other promise 182 00:10:29.585 --> 00:10:32.460 that we can call here in our chain, 183 00:10:32.460 --> 00:10:35.233 and basically replace all of this. 184 00:10:36.740 --> 00:10:41.563 So just so we can keep this code, I'm gonna copy it. 185 00:10:42.479 --> 00:10:46.680 And so you can then keep this code here, 186 00:10:46.680 --> 00:10:50.480 basically as a reference for when you need 187 00:10:50.480 --> 00:10:53.770 to study it again, okay. 188 00:10:53.770 --> 00:10:57.300 But again, I will now go ahead and take everything 189 00:10:57.300 --> 00:11:01.247 that we just nicely encapsulated into our getJSON function, 190 00:11:01.247 --> 00:11:03.313 and simply replace this. 191 00:11:05.510 --> 00:11:10.510 So getJSON, and then the URL is this one, 192 00:11:14.260 --> 00:11:18.533 and the error message is country not found, now, right. 193 00:11:22.840 --> 00:11:25.603 And so now, we can take away all of this. 194 00:11:27.590 --> 00:11:30.080 So this is already in our get JSON function, 195 00:11:30.080 --> 00:11:32.363 and so we don't need this. 196 00:11:34.440 --> 00:11:37.940 All right, and now the same down here. 197 00:11:37.940 --> 00:11:40.800 Instead of fetch, we can get JSON, 198 00:11:40.800 --> 00:11:45.440 and then we don't need this done here. 199 00:11:45.440 --> 00:11:49.723 And again, the error message is country not found. 200 00:11:53.750 --> 00:11:57.923 Okay, and so let's get rid of this, now, right. 201 00:12:02.430 --> 00:12:04.041 So let's check here, 202 00:12:04.041 --> 00:12:07.980 and indeed, we get, again, country not found 203 00:12:07.980 --> 00:12:10.823 with code 400 because of this one. 204 00:12:13.200 --> 00:12:15.010 So that's working great, 205 00:12:15.010 --> 00:12:16.460 but there's still one more thing 206 00:12:16.460 --> 00:12:19.650 that we need to do, which is to handle the fact 207 00:12:19.650 --> 00:12:22.550 that sometimes there might be no neighbor. 208 00:12:22.550 --> 00:12:24.570 So right now, what we're doing here when there 209 00:12:24.570 --> 00:12:27.544 is no neighbor, is to simply return, 210 00:12:27.544 --> 00:12:31.460 but as I mentioned before, that doesn't really do anything. 211 00:12:31.460 --> 00:12:36.460 So let me just try here, a country that has no neighbors. 212 00:12:36.694 --> 00:12:41.260 So let's say Australia, because that is an island, 213 00:12:41.260 --> 00:12:45.465 and so here again, we get cannot read property flag 214 00:12:45.465 --> 00:12:48.515 of undefined, and so that is happening, 215 00:12:48.515 --> 00:12:52.593 because it is trying to render a country that doesn't exist. 216 00:12:55.080 --> 00:12:58.951 Okay, so again, it's because of this neighbor, 217 00:12:58.951 --> 00:13:03.390 and just to make sure, to illustrate my point here, 218 00:13:03.390 --> 00:13:06.820 you see that the neighbor is indeed undefined. 219 00:13:06.820 --> 00:13:08.400 And so what we want to do here 220 00:13:08.400 --> 00:13:11.815 is to simply just like before, throw a new error 221 00:13:11.815 --> 00:13:14.103 that will then get caught down here 222 00:13:14.103 --> 00:13:17.593 in our catch handler, right. 223 00:13:20.390 --> 00:13:25.390 So throw new error, no neighbor, found, 224 00:13:29.180 --> 00:13:31.860 and that's a lot better. 225 00:13:31.860 --> 00:13:34.680 So now, this is a real error message 226 00:13:34.680 --> 00:13:37.570 that actually makes sense to the user. 227 00:13:37.570 --> 00:13:39.976 Of course, this could be all a bit better, 228 00:13:39.976 --> 00:13:43.080 but this is just a demonstration anyway, 229 00:13:43.080 --> 00:13:43.913 but I think that 230 00:13:43.913 --> 00:13:47.660 it nicely demonstrate how we can create a real error message 231 00:13:47.660 --> 00:13:49.860 that does actually make sense. 232 00:13:49.860 --> 00:13:51.860 And again, that is super important 233 00:13:51.860 --> 00:13:54.980 for any user interface that you're building, 234 00:13:54.980 --> 00:13:58.710 because in web applications like this very small one, 235 00:13:58.710 --> 00:14:01.770 errors will happen, that is just guaranteed, 236 00:14:01.770 --> 00:14:04.200 and so your application needs to be ready, 237 00:14:04.200 --> 00:14:06.825 and needs to be prepared for that. 238 00:14:06.825 --> 00:14:10.930 All right, so let's now quickly recap here. 239 00:14:10.930 --> 00:14:13.786 And I think that the big takeaway from this lecture 240 00:14:13.786 --> 00:14:17.124 is that whenever we want to create some error 241 00:14:17.124 --> 00:14:19.430 that we want to handle down here, 242 00:14:19.430 --> 00:14:22.833 in the catch handler, all we need to do is to throw, 243 00:14:22.833 --> 00:14:26.990 and create a new error, just like we did here. 244 00:14:26.990 --> 00:14:30.260 And of course, we can do that for multiple reasons. 245 00:14:30.260 --> 00:14:32.660 So in this case, here, we did it simply 246 00:14:32.660 --> 00:14:36.520 because in the situation, no neighbor can be found. 247 00:14:36.520 --> 00:14:39.750 And so that is a good reason to display an error message 248 00:14:39.750 --> 00:14:41.097 on the user interface, 249 00:14:41.097 --> 00:14:44.983 and since we do that down here in our error handler, 250 00:14:46.230 --> 00:14:50.080 the best way of doing that is to indeed throw an error. 251 00:14:50.080 --> 00:14:51.472 And remember that this works, 252 00:14:51.472 --> 00:14:55.760 because throwing an error inside of this callback function 253 00:14:55.760 --> 00:15:00.120 of this then method will immediately reject this promise. 254 00:15:00.120 --> 00:15:03.190 And so then that rejected promise will travel down 255 00:15:03.190 --> 00:15:07.880 the chain until it is eventually caught somewhere. 256 00:15:07.880 --> 00:15:10.608 So again, in this case, it is right here 257 00:15:10.608 --> 00:15:12.980 in this catch handler. 258 00:15:12.980 --> 00:15:15.700 So when working with real applications 259 00:15:15.700 --> 00:15:17.760 in the real world, really make sure 260 00:15:17.760 --> 00:15:19.670 to keep this technique in mind, 261 00:15:19.670 --> 00:15:21.483 because it's really important.