1 00:00:01,140 --> 00:00:02,740 ‫So let's now talk about the problems 2 00:00:02,740 --> 00:00:06,790 ‫that can arise when we use too many call back functions. 3 00:00:06,790 --> 00:00:07,650 ‫And to do that, 4 00:00:07,650 --> 00:00:09,760 ‫we're gonna do a small example 5 00:00:09,760 --> 00:00:11,440 ‫to illustrate this effect. 6 00:00:11,440 --> 00:00:14,620 ‫Now remember that if you're already familiar with 7 00:00:14,620 --> 00:00:17,130 ‫Promises and Async/Await and in general, 8 00:00:17,130 --> 00:00:18,590 ‫Asynchronous Java Script, 9 00:00:18,590 --> 00:00:21,180 ‫please feel free to just skip this section 10 00:00:21,180 --> 00:00:23,860 ‫and mark all the videos as completed 11 00:00:23,860 --> 00:00:26,500 ‫so that you can still get to 100 percent completion 12 00:00:26,500 --> 00:00:27,730 ‫of the course. 13 00:00:27,730 --> 00:00:28,910 ‫But if you want to learn all about 14 00:00:28,910 --> 00:00:30,350 ‫Asynchronous Java Script 15 00:00:30,350 --> 00:00:33,283 ‫and how to use it in OJS then let's move on. 16 00:00:35,020 --> 00:00:35,853 ‫So go ahead 17 00:00:35,853 --> 00:00:38,670 ‫and get the starter files for this project 18 00:00:38,670 --> 00:00:39,940 ‫from the course files. 19 00:00:39,940 --> 00:00:41,510 ‫I already have it here on my desktop, 20 00:00:41,510 --> 00:00:42,940 ‫so this folder here. 21 00:00:42,940 --> 00:00:44,850 ‫And it's only this file in there, 22 00:00:44,850 --> 00:00:47,950 ‫so that's all we're gonna need to get started. 23 00:00:47,950 --> 00:00:50,410 ‫And I have it here in VS Code already opened 24 00:00:50,410 --> 00:00:51,680 ‫and what we're gonna do to start 25 00:00:51,680 --> 00:00:54,680 ‫is to just create an NX.JS file. 26 00:00:54,680 --> 00:00:56,220 ‫Just like before. 27 00:00:56,220 --> 00:00:58,130 ‫Now what we're gonna do is this, 28 00:00:58,130 --> 00:00:59,920 ‫we're going to use this, 29 00:00:59,920 --> 00:01:02,320 ‫this dog file here, this text file. 30 00:01:02,320 --> 00:01:06,040 ‫And from here we will read the dog breed. 31 00:01:06,040 --> 00:01:08,570 ‫And then we are gonna do an HTTP request 32 00:01:08,570 --> 00:01:12,020 ‫to get a random image of a dog with this breed. 33 00:01:12,020 --> 00:01:14,790 ‫And then save that random image 34 00:01:14,790 --> 00:01:16,440 ‫to another text file. 35 00:01:16,440 --> 00:01:18,410 ‫So it's a three step process 36 00:01:18,410 --> 00:01:20,860 ‫and all of this will involve call back functions. 37 00:01:20,860 --> 00:01:23,330 ‫And by the end we will see the problem that we have 38 00:01:23,330 --> 00:01:25,130 ‫when we use all these call back functions 39 00:01:25,130 --> 00:01:26,610 ‫inside of one another. 40 00:01:26,610 --> 00:01:27,443 ‫Okay? 41 00:01:27,443 --> 00:01:29,360 ‫So for that we're gonna use a 42 00:01:29,360 --> 00:01:31,140 ‫quite a popular API. 43 00:01:31,140 --> 00:01:33,670 ‫Which is more like a fun API. 44 00:01:33,670 --> 00:01:34,980 ‫But for this kind of stuff 45 00:01:34,980 --> 00:01:36,620 ‫it's a good idea to use it. 46 00:01:36,620 --> 00:01:39,800 ‫So it's the DOG.CEO, API. 47 00:01:39,800 --> 00:01:42,140 ‫So just hit Dog API here. 48 00:01:42,140 --> 00:01:43,540 ‫Then over here, 49 00:01:43,540 --> 00:01:45,360 ‫the documentation. 50 00:01:45,360 --> 00:01:48,060 ‫And what we want is to get a random dog, 51 00:01:48,060 --> 00:01:49,500 ‫or a certain breed. 52 00:01:49,500 --> 00:01:52,090 ‫So click by breed here. 53 00:01:52,090 --> 00:01:52,993 ‫And down here, 54 00:01:54,790 --> 00:01:58,620 ‫down here is the API endpoint that we're gonna hit. 55 00:01:58,620 --> 00:02:00,293 ‫So it's this URL here. 56 00:02:01,750 --> 00:02:03,530 ‫So when you click on fetch here, 57 00:02:03,530 --> 00:02:05,580 ‫each time you get a new image, okay? 58 00:02:05,580 --> 00:02:06,413 ‫And so in this section 59 00:02:06,413 --> 00:02:08,670 ‫we're actually gonna do HTTP request 60 00:02:08,670 --> 00:02:10,420 ‫just like we learned about before 61 00:02:10,420 --> 00:02:11,850 ‫in the previous section. 62 00:02:11,850 --> 00:02:12,683 ‫Okay. 63 00:02:12,683 --> 00:02:14,090 ‫So all we will have to do 64 00:02:14,090 --> 00:02:17,741 ‫is to create an HTTP request to this URL 65 00:02:17,741 --> 00:02:19,890 ‫and then it will get us back an image. 66 00:02:19,890 --> 00:02:20,780 ‫Okay? 67 00:02:20,780 --> 00:02:22,820 ‫But for now, let's actually start with a part 68 00:02:22,820 --> 00:02:25,290 ‫where we read the file and get the content 69 00:02:25,290 --> 00:02:26,143 ‫of that file. 70 00:02:27,900 --> 00:02:31,980 ‫So in our index.js, again we need the file system package 71 00:02:31,980 --> 00:02:33,440 ‫or module. 72 00:02:33,440 --> 00:02:34,273 ‫So FS 73 00:02:38,260 --> 00:02:40,743 ‫and require the FS module here. 74 00:02:41,720 --> 00:02:44,960 ‫And just like before we do fs.readfile 75 00:02:44,960 --> 00:02:47,320 ‫and we do the asynchronous version. 76 00:02:47,320 --> 00:02:48,153 ‫Okay. 77 00:02:48,153 --> 00:02:51,150 ‫Remember that in here we pass the location of the file 78 00:02:51,150 --> 00:02:52,480 ‫and then a call back function 79 00:02:52,480 --> 00:02:55,623 ‫which will be called as soon as we're done reading the file. 80 00:02:56,800 --> 00:02:58,420 ‫So we have our template string here. 81 00:02:58,420 --> 00:03:01,733 ‫And then we use a dirname just like we did before. 82 00:03:02,820 --> 00:03:04,670 ‫So the name of the current directory. 83 00:03:07,778 --> 00:03:08,963 ‫/dog.txt. 84 00:03:11,040 --> 00:03:13,260 ‫Okay and then our call back function 85 00:03:13,260 --> 00:03:16,303 ‫which the first argument as always is error. 86 00:03:19,490 --> 00:03:22,750 ‫And then the data that actually is in the file. 87 00:03:22,750 --> 00:03:23,940 ‫And just to make sure, let's log it 88 00:03:23,940 --> 00:03:25,393 ‫to the console of course. 89 00:03:27,340 --> 00:03:28,530 ‫So another template string 90 00:03:28,530 --> 00:03:31,893 ‫so that we can nicely output our data here. 91 00:03:33,200 --> 00:03:34,200 ‫Okay. 92 00:03:34,200 --> 00:03:36,040 ‫Start up the terminal here 93 00:03:36,040 --> 00:03:37,620 ‫and 94 00:03:37,620 --> 00:03:38,870 ‫bring it up a little bit. 95 00:03:40,120 --> 00:03:42,830 ‫And so I'm using nodemon just like I did before 96 00:03:42,830 --> 00:03:44,893 ‫and then index.js. 97 00:03:46,220 --> 00:03:48,400 ‫Okay so breed is retriever. 98 00:03:48,400 --> 00:03:51,270 ‫And that is exactly what we have here in this file. 99 00:03:51,270 --> 00:03:56,053 ‫Okay so retriever is the breed that we will be looking for. 100 00:03:57,390 --> 00:03:59,050 ‫Now inside this call back function, 101 00:03:59,050 --> 00:04:01,520 ‫we want to do that HTTP request 102 00:04:01,520 --> 00:04:03,340 ‫that we just talked about before. 103 00:04:03,340 --> 00:04:05,360 ‫And there's actually ways of doing it 104 00:04:05,360 --> 00:04:06,660 ‫with native 105 00:04:06,660 --> 00:04:07,980 ‫no JS modules. 106 00:04:07,980 --> 00:04:10,850 ‫But it's easier to just use an NPM package for that. 107 00:04:10,850 --> 00:04:12,100 ‫And there are many again, 108 00:04:12,100 --> 00:04:14,560 ‫but the one we're gonna use is called Super Agent. 109 00:04:14,560 --> 00:04:16,750 ‫Later on we're gonna use another one 110 00:04:16,750 --> 00:04:20,710 ‫but for now Super Agent is just fine for that, okay. 111 00:04:20,710 --> 00:04:24,140 ‫And in order to actually download this module using NPM, 112 00:04:24,140 --> 00:04:27,410 ‫we're gonna start by creating our packet Jason file. 113 00:04:27,410 --> 00:04:28,940 ‫Remember that? 114 00:04:28,940 --> 00:04:31,120 ‫So let me just finish this 115 00:04:31,120 --> 00:04:32,703 ‫and do NPM in it. 116 00:04:33,780 --> 00:04:36,423 ‫And just hit enter on all of these. 117 00:04:37,340 --> 00:04:38,460 ‫This doesn't really matter. 118 00:04:38,460 --> 00:04:39,293 ‫Okay. 119 00:04:39,293 --> 00:04:40,920 ‫We just want this package .jason file 120 00:04:40,920 --> 00:04:43,370 ‫so that it actually holds the name of the package 121 00:04:43,370 --> 00:04:44,290 ‫that we're using. 122 00:04:44,290 --> 00:04:47,130 ‫So we always do that whenever we start a new project. 123 00:04:47,130 --> 00:04:48,630 ‫And now NPM install, 124 00:04:48,630 --> 00:04:52,240 ‫or we can just use the I, which is the same and then 125 00:04:52,240 --> 00:04:53,490 ‫the name of the package. 126 00:04:53,490 --> 00:04:55,023 ‫So nothing new there right? 127 00:04:58,510 --> 00:04:59,840 ‫Now to use this package, 128 00:04:59,840 --> 00:05:01,270 ‫we create a new variable 129 00:05:01,270 --> 00:05:04,200 ‫which will then contain the Super Agent function 130 00:05:04,200 --> 00:05:06,473 ‫that this module exposes to us. 131 00:05:16,410 --> 00:05:19,350 ‫Let's now go ahead and actually use that Super Agent 132 00:05:19,350 --> 00:05:20,320 ‫function. 133 00:05:20,320 --> 00:05:22,180 ‫So for doing a get request, 134 00:05:22,180 --> 00:05:24,363 ‫we simply used to get method on it. 135 00:05:25,400 --> 00:05:28,400 ‫So get and then we need that URL. 136 00:05:28,400 --> 00:05:31,860 ‫Okay so this one that I showed you before. 137 00:05:31,860 --> 00:05:32,880 ‫So just copy it 138 00:05:33,870 --> 00:05:34,970 ‫and paste it here 139 00:05:35,980 --> 00:05:37,110 ‫into a template string. 140 00:05:37,110 --> 00:05:39,870 ‫Because now we are actually going to replace 141 00:05:39,870 --> 00:05:41,830 ‫this breed here. 142 00:05:41,830 --> 00:05:43,430 ‫Okay, so we don't want that 143 00:05:43,430 --> 00:05:45,250 ‫but instead we want to use it, 144 00:05:45,250 --> 00:05:47,840 ‫the one that we get from our file. 145 00:05:47,840 --> 00:05:49,920 ‫So in this case it's data. 146 00:05:49,920 --> 00:05:50,790 ‫Right? 147 00:05:50,790 --> 00:05:51,750 ‫And so like this, 148 00:05:51,750 --> 00:05:55,160 ‫we can actually do an HTTP get request. 149 00:05:55,160 --> 00:05:57,510 ‫Now to then get the data, 150 00:05:57,510 --> 00:06:01,970 ‫we actually will also have to use the end method on this. 151 00:06:01,970 --> 00:06:04,090 ‫And this is then where we're gonna pass in 152 00:06:04,090 --> 00:06:05,240 ‫the call back function. 153 00:06:07,210 --> 00:06:09,060 ‫So again it's an error first call back 154 00:06:09,060 --> 00:06:10,500 ‫and then 155 00:06:10,500 --> 00:06:12,000 ‫we pass in the result as well. 156 00:06:12,900 --> 00:06:14,660 ‫And so in this function, 157 00:06:14,660 --> 00:06:15,920 ‫let's first of all 158 00:06:15,920 --> 00:06:18,620 ‫log the result to the console. 159 00:06:18,620 --> 00:06:21,920 ‫So the data that we get is in the response variable. 160 00:06:21,920 --> 00:06:22,997 ‫So this one here. 161 00:06:22,997 --> 00:06:25,960 ‫And then on that is the body. 162 00:06:25,960 --> 00:06:29,430 ‫So that's where the actual response is. 163 00:06:29,430 --> 00:06:31,830 ‫Okay, now let's actually go ahead and test that. 164 00:06:32,780 --> 00:06:35,180 ‫And now with this save here it actually moved down. 165 00:06:35,180 --> 00:06:36,420 ‫So again that's because 166 00:06:36,420 --> 00:06:39,850 ‫of the previous extension that we set up earlier. 167 00:06:39,850 --> 00:06:41,170 ‫And maybe you also noticed 168 00:06:41,170 --> 00:06:44,520 ‫how it replaced the normal quotes that I had here 169 00:06:44,520 --> 00:06:45,560 ‫with these double quotes 170 00:06:45,560 --> 00:06:48,810 ‫and also it inserted the semi colon up here. 171 00:06:48,810 --> 00:06:50,610 ‫And actually in the last section, 172 00:06:50,610 --> 00:06:52,110 ‫or in one of the last sections, 173 00:06:52,110 --> 00:06:54,130 ‫we set it up so that we always have 174 00:06:54,130 --> 00:06:56,180 ‫the single quotes okay. 175 00:06:56,180 --> 00:06:58,530 ‫And so in order to keep our code consistent here, 176 00:06:58,530 --> 00:07:00,060 ‫let's actually go ahead and 177 00:07:00,060 --> 00:07:03,760 ‫very quickly create the prettier config file. 178 00:07:03,760 --> 00:07:05,293 ‫So remember that's prettierrc. 179 00:07:08,320 --> 00:07:10,343 ‫Then in there we have single quote. 180 00:07:11,670 --> 00:07:13,023 ‫Set it to true. 181 00:07:14,470 --> 00:07:17,063 ‫And also remember the print width. 182 00:07:19,140 --> 00:07:20,990 ‫And set it to 80. 183 00:07:20,990 --> 00:07:22,373 ‫Okay, give it a save. 184 00:07:23,450 --> 00:07:24,520 ‫Save this one again. 185 00:07:24,520 --> 00:07:27,800 ‫And so you see we have our single quotes now back. 186 00:07:27,800 --> 00:07:30,380 ‫So that looks a lot nicer in my opinion. 187 00:07:30,380 --> 00:07:32,630 ‫Again if you don't like it this way, 188 00:07:32,630 --> 00:07:35,000 ‫you can of course use your own settings. 189 00:07:35,000 --> 00:07:36,090 ‫All right. 190 00:07:36,090 --> 00:07:36,923 ‫Anyway, 191 00:07:36,923 --> 00:07:38,780 ‫this piece of code here should now already 192 00:07:38,780 --> 00:07:41,130 ‫be doing the HTTP request. 193 00:07:41,130 --> 00:07:41,963 ‫So let's actually just 194 00:07:41,963 --> 00:07:43,143 ‫test it out. 195 00:07:45,980 --> 00:07:46,910 ‫And indeed, 196 00:07:46,910 --> 00:07:49,530 ‫we actually have this image here. 197 00:07:49,530 --> 00:07:50,710 ‫So actually what we want 198 00:07:50,710 --> 00:07:52,660 ‫is inside of this buddy 199 00:07:52,660 --> 00:07:54,700 ‫in the message property. 200 00:07:54,700 --> 00:07:55,533 ‫So dot 201 00:07:56,460 --> 00:07:57,293 ‫message. 202 00:07:57,293 --> 00:07:58,390 ‫So just like this. 203 00:07:58,390 --> 00:08:02,390 ‫And so here we have our retriever image. 204 00:08:02,390 --> 00:08:05,190 ‫Let's go ahead and actually change the breed here. 205 00:08:05,190 --> 00:08:06,660 ‫And I'm not really good with dogs. 206 00:08:06,660 --> 00:08:09,890 ‫Let's just use this breed here that I know, 207 00:08:09,890 --> 00:08:10,860 ‫Labrador. 208 00:08:10,860 --> 00:08:12,460 ‫I don't even know how to say it. 209 00:08:15,470 --> 00:08:16,630 ‫But I think it is it, 210 00:08:16,630 --> 00:08:18,210 ‫it exists. 211 00:08:18,210 --> 00:08:20,200 ‫Let's give it a save here again. 212 00:08:20,200 --> 00:08:22,520 ‫And so now we have another image. 213 00:08:22,520 --> 00:08:24,730 ‫We can actually click this here 214 00:08:24,730 --> 00:08:26,913 ‫and it will open that image for us. 215 00:08:29,790 --> 00:08:30,623 ‫Okay. 216 00:08:30,623 --> 00:08:33,590 ‫So for doing this HTTP request here, 217 00:08:33,590 --> 00:08:35,660 ‫we needed the data that we got before. 218 00:08:35,660 --> 00:08:37,280 ‫So this piece of data. 219 00:08:37,280 --> 00:08:39,890 ‫And so we needed to do this request here 220 00:08:39,890 --> 00:08:42,250 ‫inside of this call back function 221 00:08:42,250 --> 00:08:44,150 ‫of the read file function, right? 222 00:08:44,150 --> 00:08:46,630 ‫And so you already have a call back function here. 223 00:08:46,630 --> 00:08:48,883 ‫So this one inside a call back. 224 00:08:49,810 --> 00:08:52,000 ‫But now we will actually add another one. 225 00:08:52,000 --> 00:08:54,600 ‫Because now we want to save this string here 226 00:08:54,600 --> 00:08:56,300 ‫into a new text file. 227 00:08:56,300 --> 00:08:57,870 ‫And so we will do that here. 228 00:08:57,870 --> 00:09:00,010 ‫And then that again will have yet another 229 00:09:00,010 --> 00:09:01,270 ‫call back function. 230 00:09:01,270 --> 00:09:02,243 ‫Okay, make sense? 231 00:09:03,750 --> 00:09:04,583 ‫So fs 232 00:09:05,607 --> 00:09:06,440 ‫writefile 233 00:09:07,333 --> 00:09:09,580 ‫and then the name of the file. 234 00:09:09,580 --> 00:09:12,990 ‫Let's call that one dog image.text. 235 00:09:12,990 --> 00:09:15,440 ‫Then the data we want to save to that file 236 00:09:15,440 --> 00:09:18,430 ‫which is rest.body.message. 237 00:09:18,430 --> 00:09:19,800 ‫And then the call back function. 238 00:09:19,800 --> 00:09:21,960 ‫And this one won't have any data of course, 239 00:09:21,960 --> 00:09:23,853 ‫but we have the error again. 240 00:09:28,500 --> 00:09:30,390 ‫Let's log something to the console 241 00:09:30,390 --> 00:09:32,140 ‫like random 242 00:09:32,140 --> 00:09:33,733 ‫dog image saved to file. 243 00:09:35,930 --> 00:09:38,010 ‫Give it a save, it will then rerun 244 00:09:38,860 --> 00:09:41,950 ‫and here is our image file. 245 00:09:41,950 --> 00:09:44,030 ‫And actually you can see that VS code 246 00:09:44,030 --> 00:09:46,373 ‫displays that image here for us. 247 00:09:48,060 --> 00:09:50,090 ‫Give it another save here, 248 00:09:50,090 --> 00:09:52,210 ‫it will then rerun our code 249 00:09:52,210 --> 00:09:54,420 ‫and now we have, 250 00:09:54,420 --> 00:09:56,290 ‫indeed we have a different image. 251 00:09:56,290 --> 00:09:57,230 ‫All right. 252 00:09:57,230 --> 00:10:00,000 ‫So our code is actually working. 253 00:10:00,000 --> 00:10:02,050 ‫Let's just add a small error handle here 254 00:10:02,050 --> 00:10:03,943 ‫in case something goes wrong. 255 00:10:04,830 --> 00:10:08,593 ‫For example, let's say we add some weird name in here. 256 00:10:10,050 --> 00:10:11,120 ‫Run this again. 257 00:10:11,120 --> 00:10:13,860 ‫And so right now it's not gonna be able to find an image 258 00:10:13,860 --> 00:10:14,700 ‫for that. 259 00:10:14,700 --> 00:10:17,683 ‫And that will actually result in an error here. 260 00:10:18,620 --> 00:10:19,620 ‫So, 261 00:10:19,620 --> 00:10:22,300 ‫we should always do this kind of error handling 262 00:10:22,300 --> 00:10:23,290 ‫in the beginning and say 263 00:10:23,290 --> 00:10:24,943 ‫so if there was an error, 264 00:10:27,060 --> 00:10:29,010 ‫and we can just log error 265 00:10:30,247 --> 00:10:31,830 ‫.message. 266 00:10:31,830 --> 00:10:34,670 ‫And actually we should also say that we want to return 267 00:10:34,670 --> 00:10:37,330 ‫right away from this function if there's an error. 268 00:10:37,330 --> 00:10:39,450 ‫So it will return and 269 00:10:39,450 --> 00:10:41,550 ‫log to the console, this error. 270 00:10:41,550 --> 00:10:43,840 ‫And nothing else will happen then. 271 00:10:43,840 --> 00:10:45,140 ‫Okay. 272 00:10:45,140 --> 00:10:46,920 ‫So it says again, not found here. 273 00:10:46,920 --> 00:10:49,770 ‫And it didn't save anything to the file 274 00:10:49,770 --> 00:10:52,870 ‫because we already returned from the function up here. 275 00:10:52,870 --> 00:10:53,703 ‫Okay? 276 00:10:53,703 --> 00:10:55,250 ‫And the same actually down here 277 00:10:55,250 --> 00:10:59,513 ‫in case there is an error saving the file to disk. 278 00:11:00,870 --> 00:11:02,173 ‫Let's go back here, 279 00:11:03,670 --> 00:11:04,780 ‫give it another save. 280 00:11:04,780 --> 00:11:07,923 ‫And so now it's working just fine again. 281 00:11:08,860 --> 00:11:09,693 ‫Okay. 282 00:11:09,693 --> 00:11:10,526 ‫So this is just 283 00:11:10,526 --> 00:11:13,100 ‫a small example to show you how easy it is 284 00:11:13,100 --> 00:11:15,770 ‫to end up with call backs inside of call backs 285 00:11:15,770 --> 00:11:17,100 ‫inside of call backs. 286 00:11:17,100 --> 00:11:18,390 ‫And that's of course because, 287 00:11:18,390 --> 00:11:20,400 ‫we already know that in Note JS, 288 00:11:20,400 --> 00:11:23,160 ‫we should always use asynchronous code, right? 289 00:11:23,160 --> 00:11:25,870 ‫We did end up using call backs inside of call backs 290 00:11:25,870 --> 00:11:27,090 ‫inside of call backs. 291 00:11:27,090 --> 00:11:30,170 ‫And sometimes it can go even deeper of course 292 00:11:30,170 --> 00:11:31,003 ‫than what we have here. 293 00:11:31,003 --> 00:11:33,010 ‫You could of course have like 10 levels 294 00:11:33,010 --> 00:11:34,600 ‫inside of each other. 295 00:11:34,600 --> 00:11:36,230 ‫Now all these call backs, 296 00:11:36,230 --> 00:11:38,920 ‫they make our code look a bit messy. 297 00:11:38,920 --> 00:11:40,760 ‫It makes it difficult to understand 298 00:11:40,760 --> 00:11:43,680 ‫and also in general, hard to maintain. 299 00:11:43,680 --> 00:11:45,050 ‫Again maybe not at this level 300 00:11:45,050 --> 00:11:48,200 ‫with just three call backs inside of each other. 301 00:11:48,200 --> 00:11:50,300 ‫But if we had it even deeper nested, 302 00:11:50,300 --> 00:11:53,080 ‫it could quickly become a nightmare 303 00:11:53,080 --> 00:11:54,920 ‫to maintain code like this. 304 00:11:54,920 --> 00:11:56,840 ‫And that's why this pattern has been called 305 00:11:56,840 --> 00:11:58,200 ‫call back hell. 306 00:11:58,200 --> 00:12:01,450 ‫It's easy to identify this triangular shape 307 00:12:01,450 --> 00:12:02,283 ‫in our code. 308 00:12:02,283 --> 00:12:04,050 ‫It's what we have here. 309 00:12:04,050 --> 00:12:07,170 ‫Like this sort of triangular shape. 310 00:12:07,170 --> 00:12:08,620 ‫Whenever you see this, 311 00:12:08,620 --> 00:12:10,100 ‫it's a sign that you're 312 00:12:10,100 --> 00:12:11,970 ‫basically in call back hell. 313 00:12:11,970 --> 00:12:12,803 ‫Okay? 314 00:12:12,803 --> 00:12:15,160 ‫And you will maybe see or hear this term 315 00:12:15,160 --> 00:12:17,100 ‫when you do some Note JS research 316 00:12:17,100 --> 00:12:19,000 ‫or something like this. 317 00:12:19,000 --> 00:12:21,200 ‫But right now, this is actually the only way 318 00:12:21,200 --> 00:12:22,140 ‫that we know of, 319 00:12:22,140 --> 00:12:25,350 ‫of how to write asynchronous code at this point. 320 00:12:25,350 --> 00:12:26,890 ‫But we're gonna save that throughout 321 00:12:26,890 --> 00:12:29,120 ‫the rest of this small section. 322 00:12:29,120 --> 00:12:30,810 ‫So we're gonna learn how to use 323 00:12:30,810 --> 00:12:32,550 ‫something called Promises. 324 00:12:32,550 --> 00:12:33,820 ‫And that will then in the end 325 00:12:33,820 --> 00:12:37,080 ‫solve our problem and make our code easier to read 326 00:12:37,080 --> 00:12:38,570 ‫and to maintain. 327 00:12:38,570 --> 00:12:41,203 ‫So let's go do that in the rest of the section.