Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,580 --> 00:00:03,600 Many real world applications 2 2 00:00:03,600 --> 00:00:07,410 have two special modules that are completely independent 3 3 00:00:07,410 --> 00:00:10,040 of the rest of the architecture. 4 4 00:00:10,040 --> 00:00:14,060 And these are a module for the project configuration 5 5 00:00:14,060 --> 00:00:17,900 and also a module for some general helper functions 6 6 00:00:17,900 --> 00:00:21,340 that are gonna be useful across the entire project. 7 7 00:00:21,340 --> 00:00:25,163 And so let's now implement these modules in our own project. 8 8 00:00:26,820 --> 00:00:29,833 And let's start with the configuration module. 9 9 00:00:31,400 --> 00:00:34,220 So let's maybe close this one here first. 10 10 00:00:34,220 --> 00:00:36,070 And then in our JS folder, 11 11 00:00:36,070 --> 00:00:37,480 we create a new file 12 12 00:00:38,711 --> 00:00:41,233 config.js. 13 13 00:00:42,830 --> 00:00:43,940 Okay. 14 14 00:00:43,940 --> 00:00:45,820 And so here into this file, 15 15 00:00:45,820 --> 00:00:48,260 we will basically put all the variables 16 16 00:00:48,260 --> 00:00:49,970 that should be constants 17 17 00:00:49,970 --> 00:00:52,950 and should be reused across the project. 18 18 00:00:52,950 --> 00:00:56,520 And the goal of having this file with all these variables 19 19 00:00:56,520 --> 00:00:59,070 is that it will allow us to easily configure 20 20 00:00:59,070 --> 00:01:02,320 or project by simply changing some of the data 21 21 00:01:02,320 --> 00:01:05,490 that is here in this configuration file. 22 22 00:01:05,490 --> 00:01:08,650 So therefore the name of config. 23 23 00:01:08,650 --> 00:01:11,830 So of course we will not want to put all the variables 24 24 00:01:11,830 --> 00:01:13,170 here in this file. 25 25 00:01:13,170 --> 00:01:15,640 The only variables that we do want here 26 26 00:01:15,640 --> 00:01:17,860 are the ones that are responsible 27 27 00:01:17,860 --> 00:01:20,420 for kind of defining some important data 28 28 00:01:20,420 --> 00:01:22,700 about the application itself. 29 29 00:01:22,700 --> 00:01:25,430 So one example of that is for example, 30 30 00:01:25,430 --> 00:01:27,063 the API URL. 31 31 00:01:28,310 --> 00:01:29,380 All right. 32 32 00:01:29,380 --> 00:01:33,670 So this URL here, we will actually reuse in multiple places 33 33 00:01:33,670 --> 00:01:37,860 across this project, for example, for getting search data, 34 34 00:01:37,860 --> 00:01:41,560 and also for uploading a recipe to the server. 35 35 00:01:41,560 --> 00:01:45,140 And so all of them will use this URL. 36 36 00:01:45,140 --> 00:01:49,470 But then imagine that at some point the URL needs to change. 37 37 00:01:49,470 --> 00:01:50,330 For example, 38 38 00:01:50,330 --> 00:01:54,790 because there might be a version 3 at some point. 39 39 00:01:54,790 --> 00:01:58,520 And so as always, we don't want to change that everywhere 40 40 00:01:58,520 --> 00:02:02,200 and simply have a variable which contains this 41 41 00:02:02,200 --> 00:02:03,563 which we can then reuse. 42 42 00:02:04,510 --> 00:02:05,610 So let's cut this here 43 43 00:02:06,530 --> 00:02:08,910 and you might argue that we can 44 44 00:02:08,910 --> 00:02:12,640 also simply create a variable here in the model, 45 45 00:02:12,640 --> 00:02:15,750 but then we would have all these configuration variables 46 46 00:02:15,750 --> 00:02:18,400 spread across multiple modules, 47 47 00:02:18,400 --> 00:02:21,620 but it's way easier to simply have all of those variables 48 48 00:02:21,620 --> 00:02:23,033 in one central place. 49 49 00:02:24,040 --> 00:02:26,143 And so that's what we're going to do here. 50 50 00:02:28,550 --> 00:02:32,353 So let's call this one API URL, 51 51 00:02:35,110 --> 00:02:36,743 and then paste that here. 52 52 00:02:37,960 --> 00:02:38,910 Okay. 53 53 00:02:38,910 --> 00:02:40,690 And now all we have to do 54 54 00:02:40,690 --> 00:02:43,803 is to export this constant from here. 55 55 00:02:44,760 --> 00:02:46,560 So, I'm using uppercase here, 56 56 00:02:46,560 --> 00:02:50,800 because this is basically a constant that will never change. 57 57 00:02:50,800 --> 00:02:54,240 And so using uppercase for that kind of variable 58 58 00:02:54,240 --> 00:02:56,390 is kind of a common practice 59 59 00:02:56,390 --> 00:02:58,853 especially in a configuration file like this. 60 60 00:03:00,340 --> 00:03:03,310 So, API URL is one of the variables 61 61 00:03:03,310 --> 00:03:05,390 that makes a lot of sense. 62 62 00:03:05,390 --> 00:03:08,090 And let's actually go to our documentation page 63 63 00:03:09,070 --> 00:03:12,860 because indeed, as I mentioned before, 64 64 00:03:12,860 --> 00:03:16,990 we are going to use this URL for this 65 65 00:03:16,990 --> 00:03:19,550 and also for getting recipes. 66 66 00:03:19,550 --> 00:03:22,173 So then we will simply have to add the slash ID. 67 67 00:03:23,350 --> 00:03:27,530 Another great candidate for being a configuration variable 68 68 00:03:27,530 --> 00:03:29,880 is going to be this API key 69 69 00:03:29,880 --> 00:03:32,390 that we will generate a bit later. 70 70 00:03:32,390 --> 00:03:34,270 So let's leave that for now 71 71 00:03:34,270 --> 00:03:37,640 and go back here to this API URL. 72 72 00:03:37,640 --> 00:03:40,723 And now actually import that here into the model. 73 73 00:03:42,360 --> 00:03:45,740 So import, and now remember that here 74 74 00:03:45,740 --> 00:03:48,200 we have a named import, 75 75 00:03:48,200 --> 00:03:52,113 and later we will actually also have more named imports. 76 76 00:03:53,240 --> 00:03:54,200 Okay. 77 77 00:03:54,200 --> 00:03:55,790 And so here I could go ahead 78 78 00:03:55,790 --> 00:03:58,760 and import all of them basically at the same time 79 79 00:03:58,760 --> 00:04:00,263 and then as config, 80 80 00:04:01,470 --> 00:04:04,770 but actually I prefer to import them one by one, 81 81 00:04:04,770 --> 00:04:06,963 basically with their actual name. 82 82 00:04:08,040 --> 00:04:12,210 And so remember we do that by using curly braces 83 83 00:04:12,210 --> 00:04:13,090 and then the name 84 84 00:04:16,021 --> 00:04:18,430 of the variable like this, 85 85 00:04:21,074 --> 00:04:23,807 and then config is in the same folder. 86 86 00:04:26,205 --> 00:04:28,030 And so that should work, 87 87 00:04:28,030 --> 00:04:30,950 and here, all we have to do now is to replace, 88 88 00:04:30,950 --> 00:04:35,660 or to actually put that API URL 89 89 00:04:35,660 --> 00:04:36,493 right here. 90 90 00:04:37,450 --> 00:04:40,403 So, if we save this now, then our application, 91 91 00:04:43,420 --> 00:04:45,010 well, let's see. 92 92 00:04:45,010 --> 00:04:47,293 And yeah, it is back to working. 93 93 00:04:48,270 --> 00:04:49,103 Right? 94 94 00:04:49,103 --> 00:04:52,810 And so we successfully basically export it, 95 95 00:04:52,810 --> 00:04:55,700 this configuration value that we had here 96 96 00:04:55,700 --> 00:04:58,390 into this config file. 97 97 00:04:58,390 --> 00:04:59,223 Okay. 98 98 00:04:59,223 --> 00:05:03,853 Next up, let's create a new file for some helper functions. 99 99 00:05:05,740 --> 00:05:09,460 So this one is usually called helpers.js. 100 100 00:05:09,460 --> 00:05:12,420 And the goal of this file or of this module 101 101 00:05:12,420 --> 00:05:14,840 is to contain a couple of functions 102 102 00:05:14,840 --> 00:05:18,050 that we reuse over and over in our project. 103 103 00:05:18,050 --> 00:05:19,460 And so here in this module 104 104 00:05:19,460 --> 00:05:24,160 we then have a central place for all of them basically. 105 105 00:05:24,160 --> 00:05:27,080 And to start one great candidate, 106 106 00:05:27,080 --> 00:05:32,080 is to actually create a function which will get JSON. 107 107 00:05:32,350 --> 00:05:36,400 So basically a function which encapsulates all of this, 108 108 00:05:36,400 --> 00:05:38,723 and also some of the error handling. 109 109 00:05:40,060 --> 00:05:43,170 Alright, so let's actually get all of this code 110 110 00:05:44,720 --> 00:05:46,593 and go here into the helpers. 111 111 00:05:48,430 --> 00:05:49,900 And so here let's create a function 112 112 00:05:49,900 --> 00:05:52,343 and export it, called getJSON. 113 113 00:05:53,560 --> 00:05:56,220 And so this function is going to be very similar 114 114 00:05:56,220 --> 00:05:59,653 to what we did in the async JavaScript section. 115 115 00:06:00,990 --> 00:06:03,600 So it's gonna be an async function 116 116 00:06:03,600 --> 00:06:05,720 which will basically do the fetching 117 117 00:06:05,720 --> 00:06:09,480 and also converting to JSON all in one step. 118 118 00:06:09,480 --> 00:06:10,313 And so with this, 119 119 00:06:10,313 --> 00:06:14,110 we abstract all this functionality into one nice function 120 120 00:06:14,110 --> 00:06:17,300 that we can then use all over our project. 121 121 00:06:17,300 --> 00:06:21,160 And probably, we will just use this actually in our model 122 122 00:06:21,160 --> 00:06:24,810 in this case, but it's still good to have this function 123 123 00:06:24,810 --> 00:06:27,343 in this kind of central place. 124 124 00:06:29,181 --> 00:06:30,590 Okay. 125 125 00:06:30,590 --> 00:06:35,150 So anyway, this getJSON function, we'll take a URL, 126 126 00:06:35,150 --> 00:06:38,363 and so of course, this is then what we fetch here. 127 127 00:06:40,850 --> 00:06:41,683 Right. 128 128 00:06:41,683 --> 00:06:45,000 And so with this, we can then reuse this function here 129 129 00:06:45,000 --> 00:06:47,930 for all kinds of your URLs. 130 130 00:06:47,930 --> 00:06:51,520 Now this here actually already makes sense. 131 131 00:06:51,520 --> 00:06:53,710 And this one here as well. 132 132 00:06:53,710 --> 00:06:58,653 So let's now put all of this into a try block, 133 133 00:07:01,870 --> 00:07:03,653 and then catch the error here. 134 134 00:07:04,870 --> 00:07:08,053 Now, what are we going to do with the error here? 135 135 00:07:08,930 --> 00:07:10,510 Of course we could log it 136 136 00:07:10,510 --> 00:07:14,040 or alert it as always to the console 137 137 00:07:14,040 --> 00:07:17,480 but let's say we actually want to handle that error here 138 138 00:07:17,480 --> 00:07:19,250 in this function. 139 139 00:07:19,250 --> 00:07:23,483 So right here where we will actually use the getJSON method. 140 140 00:07:25,660 --> 00:07:27,560 And actually let's do that right away. 141 141 00:07:28,780 --> 00:07:31,673 So, import that first of course, 142 142 00:07:33,670 --> 00:07:37,770 so import, and again, we are using named imports 143 143 00:07:37,770 --> 00:07:42,508 and I simply want to import the exact variable name. 144 144 00:07:42,508 --> 00:07:44,037 So that's getJSON 145 145 00:07:46,260 --> 00:07:47,093 from 146 146 00:07:49,900 --> 00:07:52,810 helpers and it's not appearing here. 147 147 00:07:52,810 --> 00:07:54,160 And I just noticed 148 148 00:07:54,160 --> 00:07:57,470 that helpers is actually in the wrong folder. 149 149 00:07:57,470 --> 00:07:59,320 So I put it in a views folder, 150 150 00:07:59,320 --> 00:08:02,653 but it's supposed to be in the JS folder. 151 151 00:08:04,010 --> 00:08:05,130 Okay. 152 152 00:08:05,130 --> 00:08:08,020 And so let's now actually use getJSON here, 153 153 00:08:08,020 --> 00:08:10,130 and then think about the error handling 154 154 00:08:10,130 --> 00:08:12,910 that we were just talking about previously. 155 155 00:08:12,910 --> 00:08:15,920 So here let's say constant data 156 156 00:08:17,010 --> 00:08:18,460 will be a white 157 157 00:08:21,000 --> 00:08:24,833 getJSON and then with this same URL here. 158 158 00:08:27,420 --> 00:08:28,520 Okay. 159 159 00:08:28,520 --> 00:08:31,650 And so again, this is exactly what we had done before. 160 160 00:08:31,650 --> 00:08:34,733 There is just one thing missing here. 161 161 00:08:35,820 --> 00:08:38,480 Now we get these errors, which is really annoying 162 162 00:08:39,350 --> 00:08:43,440 but anyway, there's actually still something missing here, 163 163 00:08:43,440 --> 00:08:46,370 which is to then actually return the data 164 164 00:08:46,370 --> 00:08:47,870 from this function. 165 165 00:08:47,870 --> 00:08:48,860 Right? 166 166 00:08:48,860 --> 00:08:50,343 So we didn't do that yet. 167 167 00:08:51,460 --> 00:08:54,850 And so of course we want to return the data. 168 168 00:08:54,850 --> 00:08:57,720 And now just as we did also in the last video, 169 169 00:08:57,720 --> 00:09:00,670 we have one async function here. 170 170 00:09:00,670 --> 00:09:04,830 So the load recipe function calling another async function 171 171 00:09:04,830 --> 00:09:06,943 which is this, getJSON function. 172 172 00:09:07,790 --> 00:09:11,010 Now this function returns this data variable. 173 173 00:09:11,010 --> 00:09:14,860 And so therefore this data is going to be the resolved value 174 174 00:09:14,860 --> 00:09:19,240 of the promise that the getJSON function returns. 175 175 00:09:19,240 --> 00:09:21,980 And if that's still sounds super confusing, 176 176 00:09:21,980 --> 00:09:24,530 then you might just revisit that lecture 177 177 00:09:24,530 --> 00:09:27,110 in the asynchronous JavaScript section. 178 178 00:09:27,110 --> 00:09:31,830 But, anyway what you need to keep in mind is that here 179 179 00:09:31,830 --> 00:09:36,720 this data will become the resolved value of this promise. 180 180 00:09:36,720 --> 00:09:39,990 And so here, that's why we then await that promise 181 181 00:09:39,990 --> 00:09:44,240 and store that resolved value into the data variable. 182 182 00:09:44,240 --> 00:09:48,070 And so then the rest here is going to work in the same way. 183 183 00:09:48,070 --> 00:09:50,570 But now back to error handling, 184 184 00:09:50,570 --> 00:09:54,210 and let's say here we want to actually not alert, 185 185 00:09:54,210 --> 00:09:56,723 but to log that error to the console, 186 186 00:09:58,990 --> 00:10:01,323 let's say console.error. 187 187 00:10:04,510 --> 00:10:07,500 And then here the error, and let's say, we want to do it 188 188 00:10:07,500 --> 00:10:12,423 in a special way, just so we see which errors are our own. 189 189 00:10:13,780 --> 00:10:17,733 So using some emoji here should make it really visible. 190 190 00:10:20,290 --> 00:10:25,290 So this this the CLO temporary error handling 191 191 00:10:25,350 --> 00:10:27,260 which we will improve dramatically 192 192 00:10:27,260 --> 00:10:29,330 in one of the next lectures. 193 193 00:10:29,330 --> 00:10:32,250 But anyway, the point that I'm trying to make 194 194 00:10:32,250 --> 00:10:36,620 is that the error is actually occurring here, right? 195 195 00:10:36,620 --> 00:10:41,620 It is going to occur in the getJSON function and not here. 196 196 00:10:41,680 --> 00:10:43,170 Remember that. 197 197 00:10:43,170 --> 00:10:46,730 So, when there's going to be an error here in this function, 198 198 00:10:46,730 --> 00:10:50,180 then the promise that the getJSON function returns 199 199 00:10:50,180 --> 00:10:52,890 is actually still being fulfilled. 200 200 00:10:52,890 --> 00:10:55,860 So it's still basically a successful promise 201 201 00:10:55,860 --> 00:10:58,440 even if there happened an error here. 202 202 00:10:58,440 --> 00:11:00,440 And so let me show that to you actually. 203 203 00:11:02,600 --> 00:11:04,750 So, now everything works just fine 204 204 00:11:05,820 --> 00:11:09,343 but let's now use some invalid URL here. 205 205 00:11:10,240 --> 00:11:12,250 line:15% Then we get some error here 206 206 00:11:12,250 --> 00:11:14,450 line:15% but that's not the one we are interested in. 207 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 208 00:11:21,260 --> 00:11:25,570 line:15% from helpers.js at line five, 209 209 00:11:25,570 --> 00:11:26,833 line:15% or actually line 11. 210 210 00:11:27,850 --> 00:11:31,223 line:15% So this is the error that we're logging right here. 211 211 00:11:32,540 --> 00:11:34,333 So this one here, right? 212 212 00:11:35,200 --> 00:11:37,440 So we're logging it to the console here, 213 213 00:11:37,440 --> 00:11:39,133 right in the helpers function. 214 214 00:11:40,800 --> 00:11:42,690 line:15% However, this is actually not 215 215 00:11:42,690 --> 00:11:44,910 line:15% where we want to handle that error. 216 216 00:11:44,910 --> 00:11:47,170 line:15% We really would like to handle it 217 217 00:11:47,170 --> 00:11:49,283 line:15% right here in model.js. 218 218 00:11:50,430 --> 00:11:53,700 line:15% So basically instead of this error message here, 219 219 00:11:53,700 --> 00:11:56,730 line:15% which is simply a consequence of this first error, 220 220 00:11:56,730 --> 00:12:01,270 line:15% we would like to get this error message inside of the model. 221 221 00:12:01,270 --> 00:12:02,660 line:15% Right? 222 222 00:12:02,660 --> 00:12:04,923 So do you remember how we do that? 223 223 00:12:05,770 --> 00:12:09,200 Well, we have to re-throw the error. 224 224 00:12:09,200 --> 00:12:11,560 So we have to again use throw, 225 225 00:12:11,560 --> 00:12:14,310 and then simply take the error object 226 226 00:12:14,310 --> 00:12:18,440 that we already have and simply throw this new error. 227 227 00:12:18,440 --> 00:12:21,850 And so now with this, the promise that's being returned 228 228 00:12:21,850 --> 00:12:24,943 from getJSON will actually reject. 229 229 00:12:26,430 --> 00:12:27,263 Okay. 230 230 00:12:27,263 --> 00:12:29,260 And so then we will be able 231 231 00:12:29,260 --> 00:12:31,653 to actually handle the error right here. 232 232 00:12:35,180 --> 00:12:37,280 So let's try that again. 233 233 00:12:37,280 --> 00:12:40,200 And indeed now we get that same error message 234 234 00:12:40,200 --> 00:12:44,363 that we had before right here in the model as we want it. 235 235 00:12:45,280 --> 00:12:46,510 Okay. 236 236 00:12:46,510 --> 00:12:49,140 So we basically propagated the error down 237 237 00:12:50,080 --> 00:12:52,630 from one async function to the other 238 238 00:12:52,630 --> 00:12:57,160 by re-throwing the error here in this catch block. 239 239 00:12:57,160 --> 00:12:59,020 And that's really important to do. 240 240 00:12:59,020 --> 00:13:00,870 And we will actually come back to this 241 241 00:13:00,870 --> 00:13:02,943 in one of the future lectures. 242 242 00:13:03,940 --> 00:13:04,820 Okay. 243 243 00:13:04,820 --> 00:13:06,360 And now to finish, 244 244 00:13:06,360 --> 00:13:09,710 let's make this function here a little bit more robust 245 245 00:13:09,710 --> 00:13:13,670 and more real world by adding some time out. 246 246 00:13:13,670 --> 00:13:15,610 So basically setting a time 247 247 00:13:15,610 --> 00:13:18,360 after which we make the request fail. 248 248 00:13:18,360 --> 00:13:21,180 And so this is important in order to prevent 249 249 00:13:21,180 --> 00:13:23,770 for really bad internet connections 250 250 00:13:23,770 --> 00:13:27,123 where then this fetch here could be running forever. 251 251 00:13:28,009 --> 00:13:30,650 And we actually already did that previously 252 252 00:13:30,650 --> 00:13:33,710 in the async JavaScript section. 253 253 00:13:33,710 --> 00:13:37,630 And so here in the controller, stagger code, 254 254 00:13:37,630 --> 00:13:40,530 I had already this timeout function. 255 255 00:13:40,530 --> 00:13:43,563 So we don't have to code it all over again. 256 256 00:13:44,950 --> 00:13:46,453 And so let's put that here. 257 257 00:13:49,380 --> 00:13:52,020 And so basically what this function does, 258 258 00:13:52,020 --> 00:13:55,070 is that it will return a new promise. 259 259 00:13:55,070 --> 00:13:56,630 So this promise here, 260 260 00:13:56,630 --> 00:14:00,730 which will reject after a certain number of seconds. 261 261 00:14:00,730 --> 00:14:04,150 And so in order to now use this function here, 262 262 00:14:04,150 --> 00:14:07,820 we will have a race between this time out promise 263 263 00:14:07,820 --> 00:14:11,410 which will take whatever seconds we pass into it, 264 264 00:14:11,410 --> 00:14:13,640 and this fetch function here, 265 265 00:14:13,640 --> 00:14:16,700 which is the one responsible for getting the data. 266 266 00:14:16,700 --> 00:14:19,943 And then whatever occurs first will win the race. 267 267 00:14:20,810 --> 00:14:23,950 So let me just put that in code actually. 268 268 00:14:23,950 --> 00:14:28,863 So, remember that works by using Promise.race, 269 269 00:14:29,750 --> 00:14:31,603 and this takes in two promises. 270 270 00:14:32,530 --> 00:14:34,543 So the first promise is this one, 271 271 00:14:35,669 --> 00:14:39,300 and then the second promise will be time out 272 272 00:14:40,290 --> 00:14:42,620 with a certain number of seconds. 273 273 00:14:42,620 --> 00:14:45,493 And here for now, let's just say 10 seconds, 274 274 00:14:46,630 --> 00:14:47,980 or actually let's just say, 275 275 00:14:49,640 --> 00:14:51,210 0.5 seconds 276 276 00:14:51,210 --> 00:14:53,263 so that we can actually test this. 277 277 00:14:56,270 --> 00:14:59,210 So here we're still getting some errors from somewhere 278 278 00:14:59,210 --> 00:15:02,293 in our code because of this error, 279 279 00:15:04,010 --> 00:15:05,053 but nevermind. 280 280 00:15:06,120 --> 00:15:11,120 Oh, and now Google Chrome crashed and here we are back. 281 281 00:15:13,120 --> 00:15:15,453 So let's just again, click somewhere here. 282 282 00:15:16,913 --> 00:15:18,713 Now we still got this weird error. 283 283 00:15:21,530 --> 00:15:23,740 So let's actually check out what's happening here 284 284 00:15:23,740 --> 00:15:27,343 with cannot read property json of undefined. 285 285 00:15:29,450 --> 00:15:32,163 While maybe it's already because of this timeout here. 286 286 00:15:33,600 --> 00:15:37,083 So let's try to put it to like five seconds. 287 287 00:15:42,600 --> 00:15:43,823 Let's try it again, 288 288 00:15:46,820 --> 00:15:48,910 but it's gotta be something else. 289 289 00:15:48,910 --> 00:15:52,733 So it seems like there's some problem somewhere here. 290 290 00:15:54,640 --> 00:15:58,020 So here, for some reason it's this parenthesis 291 291 00:15:58,020 --> 00:15:59,663 which doesn't make any sense, 292 292 00:16:03,030 --> 00:16:05,150 but it is via code, 293 293 00:16:05,150 --> 00:16:07,733 which for some reason puts it there for us. 294 294 00:16:08,670 --> 00:16:10,550 But this parenthesis doesn't make any sense 295 295 00:16:10,550 --> 00:16:14,873 because now this looks like just one element of this array. 296 296 00:16:16,890 --> 00:16:20,523 So lets just create this promise outside. 297 297 00:16:22,430 --> 00:16:26,133 So fetch promise is going to be this. 298 298 00:16:35,360 --> 00:16:39,180 And so hopefully that will fix it. 299 299 00:16:39,180 --> 00:16:40,933 Well, it doesn't. 300 300 00:16:41,810 --> 00:16:44,300 Oh, but I see what's the problem. 301 301 00:16:44,300 --> 00:16:47,453 I'm actually not even calling promise.race. 302 302 00:16:48,400 --> 00:16:51,283 I only put the records there. 303 303 00:16:53,340 --> 00:16:55,830 So that was probably the reason. 304 304 00:16:55,830 --> 00:16:57,923 And so now it should work indeed. 305 305 00:17:00,060 --> 00:17:04,020 And So if we reload this, then yeah, it works. 306 306 00:17:04,020 --> 00:17:06,010 So now we can actually test 307 307 00:17:06,010 --> 00:17:08,313 what's happening here with the time. 308 308 00:17:09,180 --> 00:17:11,153 line:15% So sending it to over a second. 309 309 00:17:12,630 --> 00:17:14,543 line:15% And so that still works. 310 310 00:17:16,110 --> 00:17:20,060 line:15% And so that's make our network a little bit slower. 311 311 00:17:20,060 --> 00:17:24,953 line:15% So I slow 3G and this should then take some time. 312 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 313 00:17:32,090 --> 00:17:33,483 line:15% So let's wait for it. 314 314 00:17:36,580 --> 00:17:37,850 And indeed, 315 315 00:17:37,850 --> 00:17:42,453 now the request took too long time out after half a second. 316 316 00:17:43,390 --> 00:17:44,490 Okay. 317 317 00:17:44,490 --> 00:17:46,803 So let's analyze what happened here. 318 318 00:17:47,770 --> 00:17:50,110 So we passed in half a second here. 319 319 00:17:50,110 --> 00:17:52,660 And so after that time has passed, 320 320 00:17:52,660 --> 00:17:56,830 this promise simply rejected with this error message. 321 321 00:17:56,830 --> 00:17:59,690 And so as soon as any of these promises here 322 322 00:17:59,690 --> 00:18:03,650 in the race rejects or fulfills, 323 323 00:18:03,650 --> 00:18:06,450 then that promise will become the winner. 324 324 00:18:06,450 --> 00:18:09,680 And so therefore we now have a rejected promise here, 325 325 00:18:09,680 --> 00:18:13,290 which will then trigger the catch block here. 326 326 00:18:13,290 --> 00:18:16,470 And so that error will then be thrown again here. 327 327 00:18:16,470 --> 00:18:18,980 And then it will make its way here 328 328 00:18:18,980 --> 00:18:21,000 into the load recipe function 329 329 00:18:21,000 --> 00:18:24,070 and eventually will be handled down here. 330 330 00:18:24,070 --> 00:18:26,180 And so that's why we get these four 331 331 00:18:26,180 --> 00:18:29,680 explosions down here in the error message. 332 332 00:18:29,680 --> 00:18:31,200 All right. 333 333 00:18:31,200 --> 00:18:32,033 Now of course, 334 334 00:18:32,033 --> 00:18:34,550 then in the real world, we will want to do something 335 335 00:18:34,550 --> 00:18:36,750 with that error, but again, 336 336 00:18:36,750 --> 00:18:39,600 a bit more on actual error handling 337 337 00:18:39,600 --> 00:18:41,253 a bit later in the section. 338 338 00:18:42,210 --> 00:18:46,160 For now, let's set a more realistic value here. 339 339 00:18:46,160 --> 00:18:48,440 So of course we don't want to timeout 340 340 00:18:48,440 --> 00:18:50,610 after just half a second. 341 341 00:18:50,610 --> 00:18:52,853 Let's say like 10 seconds. 342 342 00:18:53,710 --> 00:18:56,600 Now, in fact, this is one of these 343 343 00:18:56,600 --> 00:19:00,490 so called magic numbers or magic values, 344 344 00:19:00,490 --> 00:19:04,920 which is like a value that seems to appear out of nowhere. 345 345 00:19:04,920 --> 00:19:09,300 So if someone reads this code, they will find this number 10 346 346 00:19:09,300 --> 00:19:12,080 and not really understand what it's doing. 347 347 00:19:12,080 --> 00:19:13,700 And so one more time, 348 348 00:19:13,700 --> 00:19:17,653 this is a perfect candidate for a configuration value. 349 349 00:19:18,830 --> 00:19:20,290 So this is really something 350 350 00:19:20,290 --> 00:19:23,130 that we might want to change about our application. 351 351 00:19:23,130 --> 00:19:25,280 And so then, if we want to do that, 352 352 00:19:25,280 --> 00:19:28,240 all we have to do is to come to our config file 353 353 00:19:28,240 --> 00:19:29,290 and change that here. 354 354 00:19:32,430 --> 00:19:37,080 So lets call this one time out seconds 355 355 00:19:38,050 --> 00:19:39,960 and set it to 10. 356 356 00:19:39,960 --> 00:19:41,110 Okay. 357 357 00:19:41,110 --> 00:19:43,003 Then here we can import that. 358 358 00:19:47,760 --> 00:19:49,770 So again is a named import. 359 359 00:19:49,770 --> 00:19:52,393 And so here we use the curly braces. 360 360 00:19:55,490 --> 00:19:58,000 So a timeout seconds from 361 361 00:19:59,620 --> 00:20:02,200 helpers.js. 362 362 00:20:02,200 --> 00:20:05,390 And this import that is already here 363 363 00:20:05,390 --> 00:20:07,970 was probably put here by a parcel. 364 364 00:20:07,970 --> 00:20:10,920 So I don't remember doing this here. 365 365 00:20:10,920 --> 00:20:13,820 And so it must have been parcel who put us here 366 366 00:20:13,820 --> 00:20:15,433 in order to make the code work. 367 367 00:20:16,480 --> 00:20:17,400 Okay. 368 368 00:20:17,400 --> 00:20:21,680 And so now here we can use the time out second constant. 369 369 00:20:21,680 --> 00:20:24,660 And so now, whoever is going to read this code 370 370 00:20:24,660 --> 00:20:28,620 will see that this is one of the configuration values. 371 371 00:20:28,620 --> 00:20:31,780 So, first because it is in this upper case. 372 372 00:20:31,780 --> 00:20:34,740 And so that helps already with understanding the code. 373 373 00:20:34,740 --> 00:20:37,840 And then also because now it is a variable. 374 374 00:20:37,840 --> 00:20:40,880 And so it's no longer like a magic number 375 375 00:20:40,880 --> 00:20:44,013 that we don't really understand where it's coming from. 376 376 00:20:45,580 --> 00:20:46,413 Okay. 377 377 00:20:46,413 --> 00:20:47,440 And so that's exactly 378 378 00:20:47,440 --> 00:20:50,603 what this configuration file here is all about. 379 379 00:20:51,690 --> 00:20:54,040 So, these are two important files 380 380 00:20:54,040 --> 00:20:58,350 that are used in many applications in the real world. 381 381 00:20:58,350 --> 00:21:00,970 And so make sure to also include them 382 382 00:21:00,970 --> 00:21:04,153 in some way in your own applications, in the future. 383 383 00:21:05,010 --> 00:21:05,843 Okay. 384 384 00:21:06,860 --> 00:21:08,200 And now in the next video, 385 385 00:21:08,200 --> 00:21:10,780 we will kind of finish this architecture 386 386 00:21:10,780 --> 00:21:13,840 and to really implement a missing part here 387 387 00:21:13,840 --> 00:21:18,840 which is kind of handling the events in a better way. 388 388 00:21:18,940 --> 00:21:21,193 And so let's go do that right now. 33374