WEBVTT 1 00:00:01.580 --> 00:00:03.600 Many real world applications 2 00:00:03.600 --> 00:00:07.410 have two special modules that are completely independent 3 00:00:07.410 --> 00:00:10.040 of the rest of the architecture. 4 00:00:10.040 --> 00:00:14.060 And these are a module for the project configuration 5 00:00:14.060 --> 00:00:17.900 and also a module for some general helper functions 6 00:00:17.900 --> 00:00:21.340 that are gonna be useful across the entire project. 7 00:00:21.340 --> 00:00:25.163 And so let's now implement these modules in our own project. 8 00:00:26.820 --> 00:00:29.833 And let's start with the configuration module. 9 00:00:31.400 --> 00:00:34.220 So let's maybe close this one here first. 10 00:00:34.220 --> 00:00:36.070 And then in our JS folder, 11 00:00:36.070 --> 00:00:37.480 we create a new file 12 00:00:38.711 --> 00:00:41.233 config.js. 13 00:00:42.830 --> 00:00:43.940 Okay. 14 00:00:43.940 --> 00:00:45.820 And so here into this file, 15 00:00:45.820 --> 00:00:48.260 we will basically put all the variables 16 00:00:48.260 --> 00:00:49.970 that should be constants 17 00:00:49.970 --> 00:00:52.950 and should be reused across the project. 18 00:00:52.950 --> 00:00:56.520 And the goal of having this file with all these variables 19 00:00:56.520 --> 00:00:59.070 is that it will allow us to easily configure 20 00:00:59.070 --> 00:01:02.320 or project by simply changing some of the data 21 00:01:02.320 --> 00:01:05.490 that is here in this configuration file. 22 00:01:05.490 --> 00:01:08.650 So therefore the name of config. 23 00:01:08.650 --> 00:01:11.830 So of course we will not want to put all the variables 24 00:01:11.830 --> 00:01:13.170 here in this file. 25 00:01:13.170 --> 00:01:15.640 The only variables that we do want here 26 00:01:15.640 --> 00:01:17.860 are the ones that are responsible 27 00:01:17.860 --> 00:01:20.420 for kind of defining some important data 28 00:01:20.420 --> 00:01:22.700 about the application itself. 29 00:01:22.700 --> 00:01:25.430 So one example of that is for example, 30 00:01:25.430 --> 00:01:27.063 the API URL. 31 00:01:28.310 --> 00:01:29.380 All right. 32 00:01:29.380 --> 00:01:33.670 So this URL here, we will actually reuse in multiple places 33 00:01:33.670 --> 00:01:37.860 across this project, for example, for getting search data, 34 00:01:37.860 --> 00:01:41.560 and also for uploading a recipe to the server. 35 00:01:41.560 --> 00:01:45.140 And so all of them will use this URL. 36 00:01:45.140 --> 00:01:49.470 But then imagine that at some point the URL needs to change. 37 00:01:49.470 --> 00:01:50.330 For example, 38 00:01:50.330 --> 00:01:54.790 because there might be a version 3 at some point. 39 00:01:54.790 --> 00:01:58.520 And so as always, we don't want to change that everywhere 40 00:01:58.520 --> 00:02:02.200 and simply have a variable which contains this 41 00:02:02.200 --> 00:02:03.563 which we can then reuse. 42 00:02:04.510 --> 00:02:05.610 So let's cut this here 43 00:02:06.530 --> 00:02:08.910 and you might argue that we can 44 00:02:08.910 --> 00:02:12.640 also simply create a variable here in the model, 45 00:02:12.640 --> 00:02:15.750 but then we would have all these configuration variables 46 00:02:15.750 --> 00:02:18.400 spread across multiple modules, 47 00:02:18.400 --> 00:02:21.620 but it's way easier to simply have all of those variables 48 00:02:21.620 --> 00:02:23.033 in one central place. 49 00:02:24.040 --> 00:02:26.143 And so that's what we're going to do here. 50 00:02:28.550 --> 00:02:32.353 So let's call this one API URL, 51 00:02:35.110 --> 00:02:36.743 and then paste that here. 52 00:02:37.960 --> 00:02:38.910 Okay. 53 00:02:38.910 --> 00:02:40.690 And now all we have to do 54 00:02:40.690 --> 00:02:43.803 is to export this constant from here. 55 00:02:44.760 --> 00:02:46.560 So, I'm using uppercase here, 56 00:02:46.560 --> 00:02:50.800 because this is basically a constant that will never change. 57 00:02:50.800 --> 00:02:54.240 And so using uppercase for that kind of variable 58 00:02:54.240 --> 00:02:56.390 is kind of a common practice 59 00:02:56.390 --> 00:02:58.853 especially in a configuration file like this. 60 00:03:00.340 --> 00:03:03.310 So, API URL is one of the variables 61 00:03:03.310 --> 00:03:05.390 that makes a lot of sense. 62 00:03:05.390 --> 00:03:08.090 And let's actually go to our documentation page 63 00:03:09.070 --> 00:03:12.860 because indeed, as I mentioned before, 64 00:03:12.860 --> 00:03:16.990 we are going to use this URL for this 65 00:03:16.990 --> 00:03:19.550 and also for getting recipes. 66 00:03:19.550 --> 00:03:22.173 So then we will simply have to add the slash ID. 67 00:03:23.350 --> 00:03:27.530 Another great candidate for being a configuration variable 68 00:03:27.530 --> 00:03:29.880 is going to be this API key 69 00:03:29.880 --> 00:03:32.390 that we will generate a bit later. 70 00:03:32.390 --> 00:03:34.270 So let's leave that for now 71 00:03:34.270 --> 00:03:37.640 and go back here to this API URL. 72 00:03:37.640 --> 00:03:40.723 And now actually import that here into the model. 73 00:03:42.360 --> 00:03:45.740 So import, and now remember that here 74 00:03:45.740 --> 00:03:48.200 we have a named import, 75 00:03:48.200 --> 00:03:52.113 and later we will actually also have more named imports. 76 00:03:53.240 --> 00:03:54.200 Okay. 77 00:03:54.200 --> 00:03:55.790 And so here I could go ahead 78 00:03:55.790 --> 00:03:58.760 and import all of them basically at the same time 79 00:03:58.760 --> 00:04:00.263 and then as config, 80 00:04:01.470 --> 00:04:04.770 but actually I prefer to import them one by one, 81 00:04:04.770 --> 00:04:06.963 basically with their actual name. 82 00:04:08.040 --> 00:04:12.210 And so remember we do that by using curly braces 83 00:04:12.210 --> 00:04:13.090 and then the name 84 00:04:16.021 --> 00:04:18.430 of the variable like this, 85 00:04:21.074 --> 00:04:23.807 and then config is in the same folder. 86 00:04:26.205 --> 00:04:28.030 And so that should work, 87 00:04:28.030 --> 00:04:30.950 and here, all we have to do now is to replace, 88 00:04:30.950 --> 00:04:35.660 or to actually put that API URL 89 00:04:35.660 --> 00:04:36.493 right here. 90 00:04:37.450 --> 00:04:40.403 So, if we save this now, then our application, 91 00:04:43.420 --> 00:04:45.010 well, let's see. 92 00:04:45.010 --> 00:04:47.293 And yeah, it is back to working. 93 00:04:48.270 --> 00:04:49.103 Right? 94 00:04:49.103 --> 00:04:52.810 And so we successfully basically export it, 95 00:04:52.810 --> 00:04:55.700 this configuration value that we had here 96 00:04:55.700 --> 00:04:58.390 into this config file. 97 00:04:58.390 --> 00:04:59.223 Okay. 98 00:04:59.223 --> 00:05:03.853 Next up, let's create a new file for some helper functions. 99 00:05:05.740 --> 00:05:09.460 So this one is usually called helpers.js. 100 00:05:09.460 --> 00:05:12.420 And the goal of this file or of this module 101 00:05:12.420 --> 00:05:14.840 is to contain a couple of functions 102 00:05:14.840 --> 00:05:18.050 that we reuse over and over in our project. 103 00:05:18.050 --> 00:05:19.460 And so here in this module 104 00:05:19.460 --> 00:05:24.160 we then have a central place for all of them basically. 105 00:05:24.160 --> 00:05:27.080 And to start one great candidate, 106 00:05:27.080 --> 00:05:32.080 is to actually create a function which will get JSON. 107 00:05:32.350 --> 00:05:36.400 So basically a function which encapsulates all of this, 108 00:05:36.400 --> 00:05:38.723 and also some of the error handling. 109 00:05:40.060 --> 00:05:43.170 Alright, so let's actually get all of this code 110 00:05:44.720 --> 00:05:46.593 and go here into the helpers. 111 00:05:48.430 --> 00:05:49.900 And so here let's create a function 112 00:05:49.900 --> 00:05:52.343 and export it, called getJSON. 113 00:05:53.560 --> 00:05:56.220 And so this function is going to be very similar 114 00:05:56.220 --> 00:05:59.653 to what we did in the async JavaScript section. 115 00:06:00.990 --> 00:06:03.600 So it's gonna be an async function 116 00:06:03.600 --> 00:06:05.720 which will basically do the fetching 117 00:06:05.720 --> 00:06:09.480 and also converting to JSON all in one step. 118 00:06:09.480 --> 00:06:10.313 And so with this, 119 00:06:10.313 --> 00:06:14.110 we abstract all this functionality into one nice function 120 00:06:14.110 --> 00:06:17.300 that we can then use all over our project. 121 00:06:17.300 --> 00:06:21.160 And probably, we will just use this actually in our model 122 00:06:21.160 --> 00:06:24.810 in this case, but it's still good to have this function 123 00:06:24.810 --> 00:06:27.343 in this kind of central place. 124 00:06:29.181 --> 00:06:30.590 Okay. 125 00:06:30.590 --> 00:06:35.150 So anyway, this getJSON function, we'll take a URL, 126 00:06:35.150 --> 00:06:38.363 and so of course, this is then what we fetch here. 127 00:06:40.850 --> 00:06:41.683 Right. 128 00:06:41.683 --> 00:06:45.000 And so with this, we can then reuse this function here 129 00:06:45.000 --> 00:06:47.930 for all kinds of your URLs. 130 00:06:47.930 --> 00:06:51.520 Now this here actually already makes sense. 131 00:06:51.520 --> 00:06:53.710 And this one here as well. 132 00:06:53.710 --> 00:06:58.653 So let's now put all of this into a try block, 133 00:07:01.870 --> 00:07:03.653 and then catch the error here. 134 00:07:04.870 --> 00:07:08.053 Now, what are we going to do with the error here? 135 00:07:08.930 --> 00:07:10.510 Of course we could log it 136 00:07:10.510 --> 00:07:14.040 or alert it as always to the console 137 00:07:14.040 --> 00:07:17.480 but let's say we actually want to handle that error here 138 00:07:17.480 --> 00:07:19.250 in this function. 139 00:07:19.250 --> 00:07:23.483 So right here where we will actually use the getJSON method. 140 00:07:25.660 --> 00:07:27.560 And actually let's do that right away. 141 00:07:28.780 --> 00:07:31.673 So, import that first of course, 142 00:07:33.670 --> 00:07:37.770 so import, and again, we are using named imports 143 00:07:37.770 --> 00:07:42.508 and I simply want to import the exact variable name. 144 00:07:42.508 --> 00:07:44.037 So that's getJSON 145 00:07:46.260 --> 00:07:47.093 from 146 00:07:49.900 --> 00:07:52.810 helpers and it's not appearing here. 147 00:07:52.810 --> 00:07:54.160 And I just noticed 148 00:07:54.160 --> 00:07:57.470 that helpers is actually in the wrong folder. 149 00:07:57.470 --> 00:07:59.320 So I put it in a views folder, 150 00:07:59.320 --> 00:08:02.653 but it's supposed to be in the JS folder. 151 00:08:04.010 --> 00:08:05.130 Okay. 152 00:08:05.130 --> 00:08:08.020 And so let's now actually use getJSON here, 153 00:08:08.020 --> 00:08:10.130 and then think about the error handling 154 00:08:10.130 --> 00:08:12.910 that we were just talking about previously. 155 00:08:12.910 --> 00:08:15.920 So here let's say constant data 156 00:08:17.010 --> 00:08:18.460 will be a white 157 00:08:21.000 --> 00:08:24.833 getJSON and then with this same URL here. 158 00:08:27.420 --> 00:08:28.520 Okay. 159 00:08:28.520 --> 00:08:31.650 And so again, this is exactly what we had done before. 160 00:08:31.650 --> 00:08:34.733 There is just one thing missing here. 161 00:08:35.820 --> 00:08:38.480 Now we get these errors, which is really annoying 162 00:08:39.350 --> 00:08:43.440 but anyway, there's actually still something missing here, 163 00:08:43.440 --> 00:08:46.370 which is to then actually return the data 164 00:08:46.370 --> 00:08:47.870 from this function. 165 00:08:47.870 --> 00:08:48.860 Right? 166 00:08:48.860 --> 00:08:50.343 So we didn't do that yet. 167 00:08:51.460 --> 00:08:54.850 And so of course we want to return the data. 168 00:08:54.850 --> 00:08:57.720 And now just as we did also in the last video, 169 00:08:57.720 --> 00:09:00.670 we have one async function here. 170 00:09:00.670 --> 00:09:04.830 So the load recipe function calling another async function 171 00:09:04.830 --> 00:09:06.943 which is this, getJSON function. 172 00:09:07.790 --> 00:09:11.010 Now this function returns this data variable. 173 00:09:11.010 --> 00:09:14.860 And so therefore this data is going to be the resolved value 174 00:09:14.860 --> 00:09:19.240 of the promise that the getJSON function returns. 175 00:09:19.240 --> 00:09:21.980 And if that's still sounds super confusing, 176 00:09:21.980 --> 00:09:24.530 then you might just revisit that lecture 177 00:09:24.530 --> 00:09:27.110 in the asynchronous JavaScript section. 178 00:09:27.110 --> 00:09:31.830 But, anyway what you need to keep in mind is that here 179 00:09:31.830 --> 00:09:36.720 this data will become the resolved value of this promise. 180 00:09:36.720 --> 00:09:39.990 And so here, that's why we then await that promise 181 00:09:39.990 --> 00:09:44.240 and store that resolved value into the data variable. 182 00:09:44.240 --> 00:09:48.070 And so then the rest here is going to work in the same way. 183 00:09:48.070 --> 00:09:50.570 But now back to error handling, 184 00:09:50.570 --> 00:09:54.210 and let's say here we want to actually not alert, 185 00:09:54.210 --> 00:09:56.723 but to log that error to the console, 186 00:09:58.990 --> 00:10:01.323 let's say console.error. 187 00:10:04.510 --> 00:10:07.500 And then here the error, and let's say, we want to do it 188 00:10:07.500 --> 00:10:12.423 in a special way, just so we see which errors are our own. 189 00:10:13.780 --> 00:10:17.733 So using some emoji here should make it really visible. 190 00:10:20.290 --> 00:10:25.290 So this this the CLO temporary error handling 191 00:10:25.350 --> 00:10:27.260 which we will improve dramatically 192 00:10:27.260 --> 00:10:29.330 in one of the next lectures. 193 00:10:29.330 --> 00:10:32.250 But anyway, the point that I'm trying to make 194 00:10:32.250 --> 00:10:36.620 is that the error is actually occurring here, right? 195 00:10:36.620 --> 00:10:41.620 It is going to occur in the getJSON function and not here. 196 00:10:41.680 --> 00:10:43.170 Remember that. 197 00:10:43.170 --> 00:10:46.730 So, when there's going to be an error here in this function, 198 00:10:46.730 --> 00:10:50.180 then the promise that the getJSON function returns 199 00:10:50.180 --> 00:10:52.890 is actually still being fulfilled. 200 00:10:52.890 --> 00:10:55.860 So it's still basically a successful promise 201 00:10:55.860 --> 00:10:58.440 even if there happened an error here. 202 00:10:58.440 --> 00:11:00.440 And so let me show that to you actually. 203 00:11:02.600 --> 00:11:04.750 So, now everything works just fine 204 00:11:05.820 --> 00:11:09.343 but let's now use some invalid URL here. 205 00:11:10.240 --> 00:11:12.250 line:15% Then we get some error here 206 00:11:12.250 --> 00:11:14.450 line:15% but that's not the one we are interested in. 207 00:11:16.440 --> 00:11:21.260 line:15% So the actual error is this one here and it's coming now 208 00:11:21.260 --> 00:11:25.570 line:15% from helpers.js at line five, 209 00:11:25.570 --> 00:11:26.833 line:15% or actually line 11. 210 00:11:27.850 --> 00:11:31.223 line:15% So this is the error that we're logging right here. 211 00:11:32.540 --> 00:11:34.333 So this one here, right? 212 00:11:35.200 --> 00:11:37.440 So we're logging it to the console here, 213 00:11:37.440 --> 00:11:39.133 right in the helpers function. 214 00:11:40.800 --> 00:11:42.690 line:15% However, this is actually not 215 00:11:42.690 --> 00:11:44.910 line:15% where we want to handle that error. 216 00:11:44.910 --> 00:11:47.170 line:15% We really would like to handle it 217 00:11:47.170 --> 00:11:49.283 line:15% right here in model.js. 218 00:11:50.430 --> 00:11:53.700 line:15% So basically instead of this error message here, 219 00:11:53.700 --> 00:11:56.730 line:15% which is simply a consequence of this first error, 220 00:11:56.730 --> 00:12:01.270 line:15% we would like to get this error message inside of the model. 221 00:12:01.270 --> 00:12:02.660 line:15% Right? 222 00:12:02.660 --> 00:12:04.923 So do you remember how we do that? 223 00:12:05.770 --> 00:12:09.200 Well, we have to re-throw the error. 224 00:12:09.200 --> 00:12:11.560 So we have to again use throw, 225 00:12:11.560 --> 00:12:14.310 and then simply take the error object 226 00:12:14.310 --> 00:12:18.440 that we already have and simply throw this new error. 227 00:12:18.440 --> 00:12:21.850 And so now with this, the promise that's being returned 228 00:12:21.850 --> 00:12:24.943 from getJSON will actually reject. 229 00:12:26.430 --> 00:12:27.263 Okay. 230 00:12:27.263 --> 00:12:29.260 And so then we will be able 231 00:12:29.260 --> 00:12:31.653 to actually handle the error right here. 232 00:12:35.180 --> 00:12:37.280 So let's try that again. 233 00:12:37.280 --> 00:12:40.200 And indeed now we get that same error message 234 00:12:40.200 --> 00:12:44.363 that we had before right here in the model as we want it. 235 00:12:45.280 --> 00:12:46.510 Okay. 236 00:12:46.510 --> 00:12:49.140 So we basically propagated the error down 237 00:12:50.080 --> 00:12:52.630 from one async function to the other 238 00:12:52.630 --> 00:12:57.160 by re-throwing the error here in this catch block. 239 00:12:57.160 --> 00:12:59.020 And that's really important to do. 240 00:12:59.020 --> 00:13:00.870 And we will actually come back to this 241 00:13:00.870 --> 00:13:02.943 in one of the future lectures. 242 00:13:03.940 --> 00:13:04.820 Okay. 243 00:13:04.820 --> 00:13:06.360 And now to finish, 244 00:13:06.360 --> 00:13:09.710 let's make this function here a little bit more robust 245 00:13:09.710 --> 00:13:13.670 and more real world by adding some time out. 246 00:13:13.670 --> 00:13:15.610 So basically setting a time 247 00:13:15.610 --> 00:13:18.360 after which we make the request fail. 248 00:13:18.360 --> 00:13:21.180 And so this is important in order to prevent 249 00:13:21.180 --> 00:13:23.770 for really bad internet connections 250 00:13:23.770 --> 00:13:27.123 where then this fetch here could be running forever. 251 00:13:28.009 --> 00:13:30.650 And we actually already did that previously 252 00:13:30.650 --> 00:13:33.710 in the async JavaScript section. 253 00:13:33.710 --> 00:13:37.630 And so here in the controller, stagger code, 254 00:13:37.630 --> 00:13:40.530 I had already this timeout function. 255 00:13:40.530 --> 00:13:43.563 So we don't have to code it all over again. 256 00:13:44.950 --> 00:13:46.453 And so let's put that here. 257 00:13:49.380 --> 00:13:52.020 And so basically what this function does, 258 00:13:52.020 --> 00:13:55.070 is that it will return a new promise. 259 00:13:55.070 --> 00:13:56.630 So this promise here, 260 00:13:56.630 --> 00:14:00.730 which will reject after a certain number of seconds. 261 00:14:00.730 --> 00:14:04.150 And so in order to now use this function here, 262 00:14:04.150 --> 00:14:07.820 we will have a race between this time out promise 263 00:14:07.820 --> 00:14:11.410 which will take whatever seconds we pass into it, 264 00:14:11.410 --> 00:14:13.640 and this fetch function here, 265 00:14:13.640 --> 00:14:16.700 which is the one responsible for getting the data. 266 00:14:16.700 --> 00:14:19.943 And then whatever occurs first will win the race. 267 00:14:20.810 --> 00:14:23.950 So let me just put that in code actually. 268 00:14:23.950 --> 00:14:28.863 So, remember that works by using Promise.race, 269 00:14:29.750 --> 00:14:31.603 and this takes in two promises. 270 00:14:32.530 --> 00:14:34.543 So the first promise is this one, 271 00:14:35.669 --> 00:14:39.300 and then the second promise will be time out 272 00:14:40.290 --> 00:14:42.620 with a certain number of seconds. 273 00:14:42.620 --> 00:14:45.493 And here for now, let's just say 10 seconds, 274 00:14:46.630 --> 00:14:47.980 or actually let's just say, 275 00:14:49.640 --> 00:14:51.210 0.5 seconds 276 00:14:51.210 --> 00:14:53.263 so that we can actually test this. 277 00:14:56.270 --> 00:14:59.210 So here we're still getting some errors from somewhere 278 00:14:59.210 --> 00:15:02.293 in our code because of this error, 279 00:15:04.010 --> 00:15:05.053 but nevermind. 280 00:15:06.120 --> 00:15:11.120 Oh, and now Google Chrome crashed and here we are back. 281 00:15:13.120 --> 00:15:15.453 So let's just again, click somewhere here. 282 00:15:16.913 --> 00:15:18.713 Now we still got this weird error. 283 00:15:21.530 --> 00:15:23.740 So let's actually check out what's happening here 284 00:15:23.740 --> 00:15:27.343 with cannot read property json of undefined. 285 00:15:29.450 --> 00:15:32.163 While maybe it's already because of this timeout here. 286 00:15:33.600 --> 00:15:37.083 So let's try to put it to like five seconds. 287 00:15:42.600 --> 00:15:43.823 Let's try it again, 288 00:15:46.820 --> 00:15:48.910 but it's gotta be something else. 289 00:15:48.910 --> 00:15:52.733 So it seems like there's some problem somewhere here. 290 00:15:54.640 --> 00:15:58.020 So here, for some reason it's this parenthesis 291 00:15:58.020 --> 00:15:59.663 which doesn't make any sense, 292 00:16:03.030 --> 00:16:05.150 but it is via code, 293 00:16:05.150 --> 00:16:07.733 which for some reason puts it there for us. 294 00:16:08.670 --> 00:16:10.550 But this parenthesis doesn't make any sense 295 00:16:10.550 --> 00:16:14.873 because now this looks like just one element of this array. 296 00:16:16.890 --> 00:16:20.523 So lets just create this promise outside. 297 00:16:22.430 --> 00:16:26.133 So fetch promise is going to be this. 298 00:16:35.360 --> 00:16:39.180 And so hopefully that will fix it. 299 00:16:39.180 --> 00:16:40.933 Well, it doesn't. 300 00:16:41.810 --> 00:16:44.300 Oh, but I see what's the problem. 301 00:16:44.300 --> 00:16:47.453 I'm actually not even calling promise.race. 302 00:16:48.400 --> 00:16:51.283 I only put the records there. 303 00:16:53.340 --> 00:16:55.830 So that was probably the reason. 304 00:16:55.830 --> 00:16:57.923 And so now it should work indeed. 305 00:17:00.060 --> 00:17:04.020 And So if we reload this, then yeah, it works. 306 00:17:04.020 --> 00:17:06.010 So now we can actually test 307 00:17:06.010 --> 00:17:08.313 what's happening here with the time. 308 00:17:09.180 --> 00:17:11.153 line:15% So sending it to over a second. 309 00:17:12.630 --> 00:17:14.543 line:15% And so that still works. 310 00:17:16.110 --> 00:17:20.060 line:15% And so that's make our network a little bit slower. 311 00:17:20.060 --> 00:17:24.953 line:15% So I slow 3G and this should then take some time. 312 00:17:26.330 --> 00:17:29.303 line:15% And so let's see if we can now time out the request. 313 00:17:32.090 --> 00:17:33.483 line:15% So let's wait for it. 314 00:17:36.580 --> 00:17:37.850 And indeed, 315 00:17:37.850 --> 00:17:42.453 now the request took too long time out after half a second. 316 00:17:43.390 --> 00:17:44.490 Okay. 317 00:17:44.490 --> 00:17:46.803 So let's analyze what happened here. 318 00:17:47.770 --> 00:17:50.110 So we passed in half a second here. 319 00:17:50.110 --> 00:17:52.660 And so after that time has passed, 320 00:17:52.660 --> 00:17:56.830 this promise simply rejected with this error message. 321 00:17:56.830 --> 00:17:59.690 And so as soon as any of these promises here 322 00:17:59.690 --> 00:18:03.650 in the race rejects or fulfills, 323 00:18:03.650 --> 00:18:06.450 then that promise will become the winner. 324 00:18:06.450 --> 00:18:09.680 And so therefore we now have a rejected promise here, 325 00:18:09.680 --> 00:18:13.290 which will then trigger the catch block here. 326 00:18:13.290 --> 00:18:16.470 And so that error will then be thrown again here. 327 00:18:16.470 --> 00:18:18.980 And then it will make its way here 328 00:18:18.980 --> 00:18:21.000 into the load recipe function 329 00:18:21.000 --> 00:18:24.070 and eventually will be handled down here. 330 00:18:24.070 --> 00:18:26.180 And so that's why we get these four 331 00:18:26.180 --> 00:18:29.680 explosions down here in the error message. 332 00:18:29.680 --> 00:18:31.200 All right. 333 00:18:31.200 --> 00:18:32.033 Now of course, 334 00:18:32.033 --> 00:18:34.550 then in the real world, we will want to do something 335 00:18:34.550 --> 00:18:36.750 with that error, but again, 336 00:18:36.750 --> 00:18:39.600 a bit more on actual error handling 337 00:18:39.600 --> 00:18:41.253 a bit later in the section. 338 00:18:42.210 --> 00:18:46.160 For now, let's set a more realistic value here. 339 00:18:46.160 --> 00:18:48.440 So of course we don't want to timeout 340 00:18:48.440 --> 00:18:50.610 after just half a second. 341 00:18:50.610 --> 00:18:52.853 Let's say like 10 seconds. 342 00:18:53.710 --> 00:18:56.600 Now, in fact, this is one of these 343 00:18:56.600 --> 00:19:00.490 so called magic numbers or magic values, 344 00:19:00.490 --> 00:19:04.920 which is like a value that seems to appear out of nowhere. 345 00:19:04.920 --> 00:19:09.300 So if someone reads this code, they will find this number 10 346 00:19:09.300 --> 00:19:12.080 and not really understand what it's doing. 347 00:19:12.080 --> 00:19:13.700 And so one more time, 348 00:19:13.700 --> 00:19:17.653 this is a perfect candidate for a configuration value. 349 00:19:18.830 --> 00:19:20.290 So this is really something 350 00:19:20.290 --> 00:19:23.130 that we might want to change about our application. 351 00:19:23.130 --> 00:19:25.280 And so then, if we want to do that, 352 00:19:25.280 --> 00:19:28.240 all we have to do is to come to our config file 353 00:19:28.240 --> 00:19:29.290 and change that here. 354 00:19:32.430 --> 00:19:37.080 So lets call this one time out seconds 355 00:19:38.050 --> 00:19:39.960 and set it to 10. 356 00:19:39.960 --> 00:19:41.110 Okay. 357 00:19:41.110 --> 00:19:43.003 Then here we can import that. 358 00:19:47.760 --> 00:19:49.770 So again is a named import. 359 00:19:49.770 --> 00:19:52.393 And so here we use the curly braces. 360 00:19:55.490 --> 00:19:58.000 So a timeout seconds from 361 00:19:59.620 --> 00:20:02.200 helpers.js. 362 00:20:02.200 --> 00:20:05.390 And this import that is already here 363 00:20:05.390 --> 00:20:07.970 was probably put here by a parcel. 364 00:20:07.970 --> 00:20:10.920 So I don't remember doing this here. 365 00:20:10.920 --> 00:20:13.820 And so it must have been parcel who put us here 366 00:20:13.820 --> 00:20:15.433 in order to make the code work. 367 00:20:16.480 --> 00:20:17.400 Okay. 368 00:20:17.400 --> 00:20:21.680 And so now here we can use the time out second constant. 369 00:20:21.680 --> 00:20:24.660 And so now, whoever is going to read this code 370 00:20:24.660 --> 00:20:28.620 will see that this is one of the configuration values. 371 00:20:28.620 --> 00:20:31.780 So, first because it is in this upper case. 372 00:20:31.780 --> 00:20:34.740 And so that helps already with understanding the code. 373 00:20:34.740 --> 00:20:37.840 And then also because now it is a variable. 374 00:20:37.840 --> 00:20:40.880 And so it's no longer like a magic number 375 00:20:40.880 --> 00:20:44.013 that we don't really understand where it's coming from. 376 00:20:45.580 --> 00:20:46.413 Okay. 377 00:20:46.413 --> 00:20:47.440 And so that's exactly 378 00:20:47.440 --> 00:20:50.603 what this configuration file here is all about. 379 00:20:51.690 --> 00:20:54.040 So, these are two important files 380 00:20:54.040 --> 00:20:58.350 that are used in many applications in the real world. 381 00:20:58.350 --> 00:21:00.970 And so make sure to also include them 382 00:21:00.970 --> 00:21:04.153 in some way in your own applications, in the future. 383 00:21:05.010 --> 00:21:05.843 Okay. 384 00:21:06.860 --> 00:21:08.200 And now in the next video, 385 00:21:08.200 --> 00:21:10.780 we will kind of finish this architecture 386 00:21:10.780 --> 00:21:13.840 and to really implement a missing part here 387 00:21:13.840 --> 00:21:18.840 which is kind of handling the events in a better way. 388 00:21:18.940 --> 00:21:21.193 And so let's go do that right now.