1 00:00:01,440 --> 00:00:02,010 Welcome back. 2 00:00:02,520 --> 00:00:08,110 Today, I will discuss two new S9 features, they are not new at this stage. 3 00:00:08,460 --> 00:00:10,470 They were new when they were released. 4 00:00:10,470 --> 00:00:10,730 Right. 5 00:00:11,000 --> 00:00:12,510 So I'm now in 2020. 6 00:00:12,780 --> 00:00:16,320 So it's not Estyn, but they they're new for you guys because you don't know that. 7 00:00:16,530 --> 00:00:18,440 Now, the first feature is called Finally. 8 00:00:18,450 --> 00:00:21,760 And the second feature is called for a wait. 9 00:00:22,040 --> 00:00:26,940 Now you're going to get these two lectures, the first lecture from the previous class, from the class 10 00:00:26,940 --> 00:00:28,700 before in this lecture as well. 11 00:00:29,010 --> 00:00:35,220 So you can go grab this one, sit back, relax, listen to me what I'm doing, or you can start coding 12 00:00:35,220 --> 00:00:36,820 together with me now. 13 00:00:38,670 --> 00:00:39,930 Now, first things first. 14 00:00:39,930 --> 00:00:42,270 I want to see that we need to write something. 15 00:00:43,230 --> 00:00:47,730 We need to call our logic for fetching and dealing with different promises. 16 00:00:47,730 --> 00:00:50,460 And then I will introduce this finally here. 17 00:00:50,640 --> 00:00:54,570 OK, now I'm going to use the different apps. 18 00:00:54,580 --> 00:00:55,470 The first Swaby. 19 00:00:55,740 --> 00:00:57,620 The second is Jason Placeholder. 20 00:00:57,630 --> 00:01:01,080 We already have done this now the Starwars API. 21 00:01:01,080 --> 00:01:06,960 I'm not sure if I told you, but is doing a data about people, starship's and planets. 22 00:01:07,630 --> 00:01:12,510 OK, so copy this one or go straight to swapping out there and it will go here. 23 00:01:12,960 --> 00:01:20,430 Right now I can grab a different starship name model, whatever it is there by changing the number here. 24 00:01:20,430 --> 00:01:21,840 But not every number is working. 25 00:01:22,020 --> 00:01:28,740 So if I type one I will get for four or four not found right now. 26 00:01:28,740 --> 00:01:30,030 The promise was fulfilled. 27 00:01:30,480 --> 00:01:31,640 Well, it didn't file. 28 00:01:31,680 --> 00:01:33,000 It didn't return anything. 29 00:01:33,000 --> 00:01:37,740 You know, I've just tested out and I'm going to start doing this. 30 00:01:38,520 --> 00:01:39,330 First things first. 31 00:01:39,420 --> 00:01:46,500 Let's create a U are l actually let's create multiple URLs and store them in honor of NAREIT. 32 00:01:46,680 --> 00:01:50,820 So let's create that array in called star ships. 33 00:01:51,870 --> 00:01:54,060 You are else, right. 34 00:01:54,270 --> 00:01:56,100 So it's going to be array here. 35 00:01:56,250 --> 00:02:04,440 Here we are going to store multiple what you URLs so we can fetch data about it. 36 00:02:05,100 --> 00:02:12,450 Now I'm going to put here a six and one, two, three, four, five. 37 00:02:14,070 --> 00:02:16,140 And I forgot the comma between them 38 00:02:18,780 --> 00:02:19,860 actually on the last one. 39 00:02:19,860 --> 00:02:20,700 I don't need it now. 40 00:02:20,700 --> 00:02:22,230 Here, I'm going to change the only the number. 41 00:02:22,410 --> 00:02:25,890 So three is working, five is working, nine is working. 42 00:02:25,890 --> 00:02:31,980 So in future, if this is change, please go to this side and test is out now. 43 00:02:32,580 --> 00:02:36,330 Ten, twelve in 15. 44 00:02:36,550 --> 00:02:41,610 OK, now we have the new or else that what we need to work on. 45 00:02:42,810 --> 00:02:47,540 The next thing we need to do is create a promise in here we go. 46 00:02:47,550 --> 00:02:52,920 I'm going to use promise that oh for the first time so I looking I can loop through all these starship 47 00:02:52,920 --> 00:02:54,690 you URL's using the map function. 48 00:02:55,110 --> 00:02:57,440 Now remember the map function what it does. 49 00:02:57,660 --> 00:03:00,240 We have used it a hundred times so far. 50 00:03:00,390 --> 00:03:05,110 Right now I'm going to write it down and after that I'm going to explain it to you. 51 00:03:05,400 --> 00:03:10,290 So promise that all in inside I'm going to pass the starship. 52 00:03:10,290 --> 00:03:11,700 You or else I define it here. 53 00:03:12,840 --> 00:03:13,190 Cool. 54 00:03:13,230 --> 00:03:20,160 I'm going to loop through this with the map function and I'm going to pass the you are out here. 55 00:03:21,090 --> 00:03:26,700 Actually, the euro will be the element that I'm I'm going to get at the current element so you can 56 00:03:26,700 --> 00:03:28,230 put here whatever name you want. 57 00:03:28,230 --> 00:03:32,040 But that is what we are going through a single URL. 58 00:03:32,040 --> 00:03:36,600 So that's why I put URL here, right in inside here. 59 00:03:36,600 --> 00:03:39,700 What we have return fetch. 60 00:03:40,410 --> 00:03:41,610 So we're going to return that. 61 00:03:41,610 --> 00:03:52,650 That's your URL and then ships because we're going to get ships on the right ships that Jason and this 62 00:03:52,650 --> 00:03:53,220 is a method. 63 00:03:53,640 --> 00:03:55,160 OK, what's next. 64 00:03:56,370 --> 00:03:58,910 So I'm, I'm using almost all the fitting. 65 00:03:58,920 --> 00:04:01,290 Right, using too many dents. 66 00:04:01,290 --> 00:04:03,210 But it's OK, don't worry about it. 67 00:04:03,210 --> 00:04:06,180 We're going to do something more modern a little bit later. 68 00:04:07,170 --> 00:04:12,570 So here I'm going to access the array and I'm going to cancel up the information. 69 00:04:12,690 --> 00:04:15,450 Now, don't get confused. 70 00:04:15,930 --> 00:04:16,290 Why? 71 00:04:16,290 --> 00:04:20,070 Because the arrays are starting for position. 72 00:04:20,070 --> 00:04:23,460 What zero right now. 73 00:04:23,460 --> 00:04:25,920 I'm going to copy this five more times. 74 00:04:29,040 --> 00:04:30,080 Maybe I've got a bit more. 75 00:04:30,090 --> 00:04:39,540 So this will be two, three, four, five and six in here. 76 00:04:39,870 --> 00:04:44,190 We need to start from zero because that's how they already are working. 77 00:04:44,190 --> 00:04:46,530 They're indexed in the next hour. 78 00:04:46,530 --> 00:04:48,420 It's always from zero 79 00:04:51,390 --> 00:04:51,810 five. 80 00:04:51,930 --> 00:04:56,850 OK, we will see if this is going to work just in a couple of minutes. 81 00:04:57,240 --> 00:04:59,880 Then I'm going to do one more. 82 00:05:00,140 --> 00:05:02,460 Here, I'm going to catch you if there is an error. 83 00:05:02,960 --> 00:05:09,530 Now, I'm going to parse the error here, but I'm going to cancel it and I'm going to write something. 84 00:05:10,740 --> 00:05:17,360 Uh, there was some kind of error. 85 00:05:18,980 --> 00:05:21,830 What it could be. 86 00:05:22,130 --> 00:05:22,510 Right. 87 00:05:22,670 --> 00:05:23,380 Questionmark. 88 00:05:23,660 --> 00:05:25,480 And also what you can do. 89 00:05:26,030 --> 00:05:28,520 You can also define the error here. 90 00:05:30,610 --> 00:05:30,980 Right. 91 00:05:31,460 --> 00:05:31,800 Good. 92 00:05:33,260 --> 00:05:35,380 That's the error still we are using. 93 00:05:35,510 --> 00:05:35,880 Right. 94 00:05:36,020 --> 00:05:36,850 But you don't have to. 95 00:05:37,070 --> 00:05:37,770 Don't worry about it. 96 00:05:38,390 --> 00:05:40,310 Now, let's keep it interesting. 97 00:05:42,410 --> 00:05:48,650 Open a new tab here, inspect Kosal and let's paste this down and hit enter. 98 00:05:49,280 --> 00:05:50,060 OK, good sign. 99 00:05:50,060 --> 00:05:50,800 Promising spending. 100 00:05:50,820 --> 00:05:54,230 And here is I got six returns here. 101 00:05:54,450 --> 00:05:56,660 Six different objects, different names. 102 00:05:56,750 --> 00:05:58,910 Stardust were in this account. 103 00:05:59,270 --> 00:06:01,960 That star Millennium Falcon. 104 00:06:01,970 --> 00:06:08,390 Very good x we executer nice but we know all of this right. 105 00:06:08,390 --> 00:06:14,600 We know how to use promises, how to consume them using it then it's a little bit outdated. 106 00:06:14,630 --> 00:06:15,010 Right. 107 00:06:15,380 --> 00:06:22,760 But I'm going to use something here called Finally and what finally means you need to understand this 108 00:06:23,030 --> 00:06:23,620 only this. 109 00:06:23,870 --> 00:06:29,870 The finally named index indicates they will do something at the end when it's final, when that promise 110 00:06:29,870 --> 00:06:32,850 is back, or would that promise has returned. 111 00:06:32,930 --> 00:06:33,300 Right. 112 00:06:33,800 --> 00:06:36,070 So you need to know the final. 113 00:06:36,070 --> 00:06:41,000 You will always be called regardless of that promise, outcome, outcome. 114 00:06:41,000 --> 00:06:43,730 The promise can be fulfilled or rejected. 115 00:06:43,730 --> 00:06:44,020 Right. 116 00:06:44,150 --> 00:06:47,720 But the final will always be run. 117 00:06:48,260 --> 00:06:52,280 Now, how are we going to use this finally here right now? 118 00:06:53,200 --> 00:07:01,090 Let's work a little bit here, so I'm going to define the finally here, I don't need the semicolon 119 00:07:01,090 --> 00:07:05,020 actually anymore because I need to write to the keyboard finally here. 120 00:07:05,950 --> 00:07:06,330 Right. 121 00:07:06,670 --> 00:07:12,640 And inside the finally, I will use this as no parameters. 122 00:07:13,390 --> 00:07:16,380 And I'm just going to control the lock and I'm going to explain what's happening. 123 00:07:21,010 --> 00:07:30,860 Finally, I want what's happened here, I want to print something good. 124 00:07:31,240 --> 00:07:32,220 This is your message. 125 00:07:32,800 --> 00:07:37,810 This is finally what you want to see here, finally what your app needs to do. 126 00:07:37,810 --> 00:07:38,160 Right? 127 00:07:38,380 --> 00:07:41,000 That's going to be your logic from now on. 128 00:07:41,170 --> 00:07:47,320 Now, here, I don't pass any data, any parameters you want, because the the promise doesn't send 129 00:07:47,320 --> 00:07:50,500 any data to the family so you can print whatever you want. 130 00:07:51,020 --> 00:07:54,030 Here you have one semicolon. 131 00:07:55,570 --> 00:07:57,760 Now, let's try this again. 132 00:07:58,980 --> 00:08:00,220 I'm going to copy the entire thing. 133 00:08:00,490 --> 00:08:03,230 I'm going to delete this and refresh. 134 00:08:03,790 --> 00:08:04,240 Right. 135 00:08:04,690 --> 00:08:07,660 Because it's not going to run if I do the same thing. 136 00:08:08,350 --> 00:08:08,860 Here it is. 137 00:08:08,890 --> 00:08:11,990 Finally, I want to print something, OK? 138 00:08:12,250 --> 00:08:16,710 Now, I know that finally, even all the promises are fulfilled. 139 00:08:16,720 --> 00:08:19,840 Execute it normally as they shoot no errors there. 140 00:08:20,830 --> 00:08:27,940 They will be the final will be the finally function will do its job. 141 00:08:29,370 --> 00:08:34,060 OK, now we know that finally is working when there is no problem. 142 00:08:34,690 --> 00:08:37,240 Let's throw an error here. 143 00:08:38,300 --> 00:08:43,350 Let's for example, change the swap to swap is right. 144 00:08:43,480 --> 00:08:44,020 Save it. 145 00:08:44,590 --> 00:08:45,190 Go back. 146 00:08:45,670 --> 00:08:46,140 Refresh. 147 00:08:46,310 --> 00:08:50,560 Remember this one here and here. 148 00:08:50,560 --> 00:08:52,960 It's oh there was some kind of error rate, what it could be. 149 00:08:53,230 --> 00:08:54,580 And you tell us. 150 00:08:55,060 --> 00:08:57,070 Right swap is the reason. 151 00:08:57,400 --> 00:09:01,120 Of course request did not succeed in here it is. 152 00:09:01,570 --> 00:09:06,240 The finally function again is fulfilled again. 153 00:09:06,250 --> 00:09:06,640 Is there. 154 00:09:06,970 --> 00:09:07,450 Nice. 155 00:09:08,500 --> 00:09:10,780 But I've never shown you this before. 156 00:09:11,500 --> 00:09:16,000 What we can do, we can just force this to throw an error here. 157 00:09:16,030 --> 00:09:16,410 Right. 158 00:09:16,930 --> 00:09:19,390 So force that didn't matter to throw an error. 159 00:09:19,540 --> 00:09:20,460 So how we can do this. 160 00:09:23,020 --> 00:09:25,330 OK, let's let's use it here. 161 00:09:25,900 --> 00:09:31,600 So the keyword is throw and I will say here error. 162 00:09:32,800 --> 00:09:33,250 Nice. 163 00:09:33,790 --> 00:09:34,300 Save it. 164 00:09:35,740 --> 00:09:36,940 Copy the entire thing again. 165 00:09:38,200 --> 00:09:39,160 Refresh here. 166 00:09:39,340 --> 00:09:40,150 Base it back. 167 00:09:40,480 --> 00:09:41,170 Hit enter. 168 00:09:41,890 --> 00:09:44,290 Oh there was some kind of error. 169 00:09:44,290 --> 00:09:48,040 What it could be here is finally is working again. 170 00:09:48,520 --> 00:09:51,460 Now you know how to throw an error intentionally. 171 00:09:52,300 --> 00:09:52,630 Right. 172 00:09:52,630 --> 00:09:59,740 Without changing the APIs here or adding something that doesn't, it's not going to proceed successfully. 173 00:09:59,750 --> 00:10:07,480 OK, now that is pretty much about the finally and it is useful when we want a piece of code to be executed 174 00:10:07,600 --> 00:10:11,530 in the end, no matter what, no matter what the outcome of the promise will be. 175 00:10:11,890 --> 00:10:15,040 So this will run no matter what, regardless of the outcome. 176 00:10:15,400 --> 00:10:17,620 And it's very powerful because of this. 177 00:10:18,100 --> 00:10:22,000 For example, you want to send some some users are trying to log in somewhere. 178 00:10:22,000 --> 00:10:22,270 Right. 179 00:10:22,450 --> 00:10:25,630 Is trying to do something here and is something is wrong. 180 00:10:25,630 --> 00:10:28,900 And with the request that he's doing, he's sending. 181 00:10:29,110 --> 00:10:34,210 And so you want to use some sort of notification. 182 00:10:34,600 --> 00:10:34,990 Right. 183 00:10:35,740 --> 00:10:40,000 Or imagine that you need a notification to the user when something else is happening. 184 00:10:40,000 --> 00:10:42,830 For example, they do they call log dictate. 185 00:10:42,880 --> 00:10:46,420 They are asking for some data that will not be able to access. 186 00:10:46,660 --> 00:10:47,890 And yeah. 187 00:10:47,890 --> 00:10:54,240 So instead of catching the throwing in or you can also use the finally and do whatever you want dear. 188 00:10:54,430 --> 00:11:01,810 So the piece of code that you have in mind, it will be executed here, cuz the next big thing that 189 00:11:01,810 --> 00:11:07,480 we need to discuss is actually for a wait and this is a little bit more advanced for this. 190 00:11:07,480 --> 00:11:13,990 We will need to look through multiple promises almost if we are writing an asynchronous code. 191 00:11:15,010 --> 00:11:15,390 Right. 192 00:11:16,570 --> 00:11:24,580 So now for the for a week we we will take each item from an array of promises because we can store multiple 193 00:11:26,020 --> 00:11:29,710 array you URLs here promises inside on the rate. 194 00:11:29,960 --> 00:11:30,340 Right. 195 00:11:30,580 --> 00:11:33,490 So we're going to repeat this one, but we're not going to use the swap here. 196 00:11:33,490 --> 00:11:35,050 We're going to use the adjacent placeholder. 197 00:11:35,410 --> 00:11:40,660 And I have actually open it here outside and let's use it. 198 00:11:40,660 --> 00:11:46,720 Right, OK, go back here and type for away. 199 00:11:50,310 --> 00:11:58,740 Not so let's write Jason Placeholder, you or else that will be, again, like the adjacent placeholder, 200 00:11:58,740 --> 00:12:04,110 but you are El's and this will be Oray that will hold all of the different URLs. 201 00:12:05,160 --> 00:12:08,550 No, I'm just going to copy the entire URL from here. 202 00:12:09,480 --> 00:12:16,530 I'm going to stay here and I know that they have for the users, they have a one for post. 203 00:12:17,640 --> 00:12:20,430 They have another one, they have a couple of actually. 204 00:12:20,430 --> 00:12:22,590 But I'm going to use the albums here. 205 00:12:24,480 --> 00:12:24,810 Right. 206 00:12:25,950 --> 00:12:26,480 Nice. 207 00:12:26,700 --> 00:12:31,130 OK, so let's create an async function. 208 00:12:32,460 --> 00:12:43,320 So I'm going to call it get results const get result and here it will be async function but it will 209 00:12:43,320 --> 00:12:44,690 not take any parameters here. 210 00:12:45,150 --> 00:12:46,260 We can close it down here. 211 00:12:46,860 --> 00:12:54,660 Now the creating an array of promises of the array above that later on will be iterable. 212 00:12:54,660 --> 00:12:57,900 So we can go through this, we can loop through this array. 213 00:12:58,890 --> 00:13:09,910 Now let's write here const array of promises and that will be the adjacent placeholder URLs. 214 00:13:09,930 --> 00:13:10,260 Right. 215 00:13:10,940 --> 00:13:14,910 I'm going to use the Genda map method on it and I'm going to grab the U. 216 00:13:14,910 --> 00:13:18,060 RL and I'm going to fetch that. 217 00:13:18,060 --> 00:13:23,350 You are up to something similar that we have done here, right? 218 00:13:23,610 --> 00:13:25,090 So that's why you use the old style. 219 00:13:25,560 --> 00:13:27,780 Now I'm using the async function here. 220 00:13:28,200 --> 00:13:28,660 Nice. 221 00:13:29,250 --> 00:13:30,750 So you have a little bit of practice. 222 00:13:31,680 --> 00:13:39,050 So when our Jason Placeholder URLs, we will use the map method to loop over to you or else from the 223 00:13:39,420 --> 00:13:42,540 as a single parameter here would be passing as a single parameter. 224 00:13:42,780 --> 00:13:45,200 It's going to look through this, through this, then through this. 225 00:13:45,210 --> 00:13:45,560 Right. 226 00:13:47,010 --> 00:13:50,610 And this will return the fetched Eurorail. 227 00:13:51,090 --> 00:14:01,740 So creating an array of fetched promises now for we need to use here after this, we can use the full 228 00:14:01,740 --> 00:14:04,470 weight to loop through all of these promises here. 229 00:14:04,890 --> 00:14:05,310 Right. 230 00:14:05,310 --> 00:14:06,570 Stored in disarray. 231 00:14:06,600 --> 00:14:11,420 So all of these promises will be stored here and we can use this for a loop. 232 00:14:11,730 --> 00:14:18,120 OK, the forward syntax is like this for a like that. 233 00:14:18,600 --> 00:14:24,460 And let's request off. 234 00:14:25,070 --> 00:14:31,410 And here we need to pass the array of promises because that is actually the array of promises. 235 00:14:31,410 --> 00:14:35,830 We are fetching something and we are looking through that nice. 236 00:14:37,260 --> 00:14:42,120 So again, we are looping through all of the promises, but now we know how the question is how we can 237 00:14:42,120 --> 00:14:43,010 extract the data. 238 00:14:43,110 --> 00:14:43,470 Right. 239 00:14:43,950 --> 00:14:52,050 OK, now we can create const data here and we can use that request that Jaeson. 240 00:14:53,670 --> 00:14:58,030 But remember, the weight is used in front of every promise. 241 00:14:58,980 --> 00:14:59,300 Right. 242 00:15:00,660 --> 00:15:06,570 Because we are looping through the promises here and I use the request that Jason. 243 00:15:07,020 --> 00:15:07,520 Nice. 244 00:15:08,370 --> 00:15:12,330 So the next thing is how we can extract the data. 245 00:15:12,510 --> 00:15:13,650 Well, it's simple. 246 00:15:13,650 --> 00:15:19,730 We just going to cancel it, lock the data in. 247 00:15:19,740 --> 00:15:20,370 That's pretty much it. 248 00:15:21,150 --> 00:15:25,380 One more thing that we need to do is actually to call get results. 249 00:15:26,880 --> 00:15:29,100 So actually, we can achieve the same same thing is here. 250 00:15:30,300 --> 00:15:40,560 But I choose to use a different because different API because so sometimes these APIs can no longer 251 00:15:40,560 --> 00:15:41,310 exist, actually. 252 00:15:41,700 --> 00:15:42,110 Right. 253 00:15:42,120 --> 00:15:45,390 And I just want to give you as much more examples as I can. 254 00:15:45,450 --> 00:15:47,490 OK, copy this one. 255 00:15:49,590 --> 00:15:50,640 Refresh it here. 256 00:15:52,260 --> 00:15:56,400 Based it on there and hid under the promised spending. 257 00:15:56,410 --> 00:15:57,210 And here it is. 258 00:15:57,600 --> 00:16:00,300 I do have three different arrays. 259 00:16:00,690 --> 00:16:02,420 The first one will be the for the user. 260 00:16:03,360 --> 00:16:03,820 Right. 261 00:16:05,370 --> 00:16:07,260 The second will be for the posts. 262 00:16:07,350 --> 00:16:09,090 And I have 100 posts by the way. 263 00:16:10,260 --> 00:16:10,740 Nice. 264 00:16:10,740 --> 00:16:12,810 And third one will be 40 albums. 265 00:16:12,810 --> 00:16:16,800 And I still have a hundred albums now, ladies and gentlemen. 266 00:16:16,870 --> 00:16:24,440 Now you know how to use the parade and you can look through the promises of a different set of promises. 267 00:16:24,960 --> 00:16:30,990 And before we using a wait, before each and every promise, because I know that this will return the 268 00:16:30,990 --> 00:16:31,640 promise here. 269 00:16:31,680 --> 00:16:35,220 Right now, you know how to use the for a loop. 270 00:16:35,490 --> 00:16:38,340 And if you do this, you're True-Blue. 271 00:16:38,460 --> 00:16:38,800 Right. 272 00:16:39,450 --> 00:16:41,240 OK, see you in the next one.