1 00:00:00,660 --> 00:00:01,870 Welcome back, ladies and gentlemen. 2 00:00:01,890 --> 00:00:07,620 Today, we're going to talk about S8 Async, a feature, and this is one of the most important, important 3 00:00:07,620 --> 00:00:10,010 features and this is built on top of the promises. 4 00:00:10,200 --> 00:00:15,710 So that's why we need to learn about the promises before that, that so we can understand wasting away. 5 00:00:15,800 --> 00:00:21,900 Now, last time I talk about other estate features like this, but because there was no time to do it 6 00:00:21,900 --> 00:00:24,630 in one lecture today, we're going to continue with S8. 7 00:00:24,990 --> 00:00:28,590 So create lecture seven and link it in your index file. 8 00:00:28,650 --> 00:00:32,240 OK, make sure that this is up and running, working as you choose. 9 00:00:32,670 --> 00:00:33,050 Nice. 10 00:00:33,540 --> 00:00:36,060 So what is async await. 11 00:00:36,390 --> 00:00:39,870 Well, let's talk about an async function. 12 00:00:39,880 --> 00:00:41,480 So what is async function? 13 00:00:41,730 --> 00:00:46,730 You should remember it like this amazing function always returns a promise. 14 00:00:47,370 --> 00:00:52,680 So when a function returns a promise, then we need to deal with with that promise. 15 00:00:52,680 --> 00:00:53,010 Okay. 16 00:00:53,490 --> 00:00:58,850 Now let me first create a couple of examples and everything will be clear for you. 17 00:00:59,160 --> 00:01:02,680 So I'm going to create first a normal function the way we did before. 18 00:01:03,030 --> 00:01:05,940 So function hello one. 19 00:01:06,240 --> 00:01:10,170 And it will not take any parameters and it will only just return. 20 00:01:10,650 --> 00:01:12,680 We're not going to cancel a lot, but we're going to return. 21 00:01:12,690 --> 00:01:13,500 Hello here. 22 00:01:15,370 --> 00:01:16,840 OK, now. 23 00:01:18,140 --> 00:01:22,880 How we are going to say cancel that log and we're going to say normal function. 24 00:01:24,800 --> 00:01:31,420 And that will be hello, Juan, this is how we call it function, and now I should get the output. 25 00:01:31,430 --> 00:01:32,720 Hello, normal function. 26 00:01:32,720 --> 00:01:33,210 Hello. 27 00:01:33,260 --> 00:01:33,780 Very good. 28 00:01:34,160 --> 00:01:36,490 So this is the output so we know how to do this. 29 00:01:36,860 --> 00:01:38,810 Now let's create amazing function. 30 00:01:38,990 --> 00:01:40,710 So what is async function? 31 00:01:42,530 --> 00:01:49,200 So in order to create an async function, you need to have the key word async before before the function. 32 00:01:49,220 --> 00:01:50,320 So function again. 33 00:01:51,140 --> 00:01:56,020 And I'm just going to use the helo here because I use Hillo one. 34 00:01:57,110 --> 00:01:58,960 I want you to have the both examples. 35 00:01:58,970 --> 00:02:01,040 That's why I don't want to comment on this. 36 00:02:01,370 --> 00:02:06,470 So not take any parameters and let's say return hello again. 37 00:02:08,250 --> 00:02:17,190 OK, now you're not going to see any change in the outcome here because we need to cancel, lock the 38 00:02:17,190 --> 00:02:18,000 async function. 39 00:02:18,050 --> 00:02:18,830 So how are we going to do this? 40 00:02:19,200 --> 00:02:21,510 Let's just say async here function. 41 00:02:24,200 --> 00:02:34,160 And and let's call it hello here, just like this, so remember I told you that you should remember 42 00:02:34,160 --> 00:02:38,480 that async function always return a promise in this promise is fulfilled. 43 00:02:38,690 --> 00:02:41,480 So it can be in a couple of stages, right. 44 00:02:42,950 --> 00:02:44,000 Where we need promises. 45 00:02:44,000 --> 00:02:46,370 He wishes it can be pendent, fulfilled and rejected. 46 00:02:46,400 --> 00:02:50,900 Now, if you haven't done this lecture for just please go back and do it because you're not going to 47 00:02:50,900 --> 00:02:52,000 be able to understand. 48 00:02:52,610 --> 00:02:55,490 Now, this is what the async function does. 49 00:02:55,490 --> 00:02:57,100 It returns a promise. 50 00:02:57,320 --> 00:03:00,900 Now, sometimes we need the value and we will see how we can do it. 51 00:03:00,960 --> 00:03:04,840 That and the promise can be rejected or fulfilled. 52 00:03:04,850 --> 00:03:08,500 Right now, this is one of the features. 53 00:03:08,510 --> 00:03:14,510 So we just look at the async part, what we will do it later in async going now other ways. 54 00:03:15,260 --> 00:03:21,830 And you will probably see this in in other tutorials or the place that you started working. 55 00:03:22,040 --> 00:03:28,430 So you will see that we can just use async function on our functions like function expression. 56 00:03:28,550 --> 00:03:30,770 So let me just do this. 57 00:03:32,640 --> 00:03:33,150 Convert. 58 00:03:33,270 --> 00:03:40,880 I'm just going to say here, convert to async function expression, right? 59 00:03:41,130 --> 00:03:45,110 I just want to go through all of this so you will be understand. 60 00:03:45,180 --> 00:03:47,030 So I'm going to see you here. 61 00:03:47,070 --> 00:03:48,230 Let hello. 62 00:03:48,540 --> 00:03:52,050 And I'm going to put it to here and I'm going to say async function. 63 00:03:54,300 --> 00:03:58,800 So remember, we always need to use this async key word and this should return. 64 00:04:01,340 --> 00:04:03,080 Let's say hello to. 65 00:04:03,470 --> 00:04:09,680 OK, now this is how we are doing it in a function expression, right? 66 00:04:09,860 --> 00:04:15,130 So here we do have hello and everything that everything else is pretty much the same as this point. 67 00:04:15,310 --> 00:04:20,360 OK, but this is a function expression in console that log. 68 00:04:22,810 --> 00:04:27,740 Function expression, let's do it, async, function, expression, very good. 69 00:04:27,970 --> 00:04:29,870 And let's put it here. 70 00:04:30,600 --> 00:04:32,740 Hello, two. 71 00:04:34,900 --> 00:04:35,530 Very good. 72 00:04:35,800 --> 00:04:37,840 And I'm missing something here. 73 00:04:37,840 --> 00:04:38,680 I'm missing comma. 74 00:04:39,130 --> 00:04:41,980 Get this is async function expression. 75 00:04:41,990 --> 00:04:47,170 OK, well, we can use an arrow function as well and we can do them asynchronously. 76 00:04:47,170 --> 00:04:48,250 So let's do it here. 77 00:04:49,210 --> 00:04:49,840 Async. 78 00:04:52,090 --> 00:04:59,320 Arrow functions, so I'm just going to let Halo three, there are a lot of hello's function, but I 79 00:04:59,320 --> 00:05:02,150 just want all of them these to be accessible to you. 80 00:05:02,160 --> 00:05:03,550 I don't want to just to consulate it. 81 00:05:03,760 --> 00:05:06,580 I mean, to come in and out so you will not be able to see what's happening. 82 00:05:06,580 --> 00:05:11,490 So async the keyword will not take any parameters. 83 00:05:11,710 --> 00:05:13,610 And now we need to create Yero function. 84 00:05:13,630 --> 00:05:17,380 OK, so how are we going to do so our function then. 85 00:05:17,380 --> 00:05:18,830 We're going to do return. 86 00:05:19,720 --> 00:05:20,210 Hello. 87 00:05:20,230 --> 00:05:23,710 I don't need anything else because I'm returning the single line. 88 00:05:23,710 --> 00:05:25,920 Even without this, it will work. 89 00:05:25,960 --> 00:05:26,950 Hello three. 90 00:05:30,250 --> 00:05:43,120 Save it, so console that log async arrow function and let's do Halo three. 91 00:05:44,620 --> 00:05:49,230 There you go, it will return another promise with us, but you don't need to worry about it now. 92 00:05:50,320 --> 00:05:52,570 You know how to create now async functions. 93 00:05:52,570 --> 00:05:54,790 You know how to create a normal async function. 94 00:05:54,880 --> 00:05:56,560 You know how to create function expression. 95 00:05:56,560 --> 00:05:58,180 You know how to do it with erro functions. 96 00:05:58,390 --> 00:06:01,580 OK, but how are we going to consume the promises? 97 00:06:01,630 --> 00:06:04,590 Now, this is a new keyword for you, can't you? 98 00:06:04,690 --> 00:06:05,520 The promise. 99 00:06:06,610 --> 00:06:12,780 OK, so I'm going to talk about the these to the async, so I'm going to just say hello. 100 00:06:13,660 --> 00:06:14,520 Let's start with three. 101 00:06:15,700 --> 00:06:20,590 So this is how we are going to use because I've already stored them in a variable. 102 00:06:20,590 --> 00:06:20,910 Right. 103 00:06:21,130 --> 00:06:25,120 So let Halo three hold back the promise that this return. 104 00:06:25,360 --> 00:06:33,310 OK, so I can change that then on that variable so that then and now inside I can say here, OK, I 105 00:06:33,310 --> 00:06:36,700 will have value and I will cancel out. 106 00:06:36,700 --> 00:06:37,060 What. 107 00:06:39,770 --> 00:06:43,320 The value now, what will the value will be, OK? 108 00:06:43,340 --> 00:06:47,900 Here it is, the value of this hallowed reheats will be just below three, right? 109 00:06:48,950 --> 00:06:49,520 Save it. 110 00:06:50,330 --> 00:06:54,920 And Halo three is not a function, right? 111 00:06:55,760 --> 00:06:56,270 Why? 112 00:06:56,450 --> 00:06:59,000 Well, because we need to use this curly brackets here. 113 00:07:00,020 --> 00:07:00,670 There you go. 114 00:07:00,680 --> 00:07:04,160 Now you have the result, Halo three here that we are returning now. 115 00:07:04,160 --> 00:07:07,870 You know how to consumer promise, but this can be even shorter, right? 116 00:07:08,240 --> 00:07:10,940 So I'm going to do it on hello to. 117 00:07:14,170 --> 00:07:21,700 We can do it on Halo three, but I want that to stay with you, so then in here I can just comment about 118 00:07:21,700 --> 00:07:25,960 the value or I'm just going to say console that long and it will work. 119 00:07:26,290 --> 00:07:27,820 Hello to right. 120 00:07:28,810 --> 00:07:30,490 And why this is not space. 121 00:07:30,510 --> 00:07:31,150 God knows. 122 00:07:31,310 --> 00:07:33,060 OK, now it looks better. 123 00:07:33,070 --> 00:07:35,860 So we can also do it in one line. 124 00:07:36,010 --> 00:07:37,650 How cool is this. 125 00:07:38,140 --> 00:07:43,990 OK, shall we have done the E in keyword the first part of this async away. 126 00:07:44,350 --> 00:07:51,760 But we can also use the wait keyword and if we want to use the wait keyword and you will see the difference, 127 00:07:52,480 --> 00:07:56,920 we need the function to be async so we cannot use the wait without these async. 128 00:07:56,950 --> 00:08:00,790 OK, that you should know because you don't want to try something. 129 00:08:01,060 --> 00:08:04,170 And yeah, we will not work without the async function. 130 00:08:04,180 --> 00:08:10,270 So let's create a function called hello for in that function will return a greeting. 131 00:08:10,300 --> 00:08:13,830 OK, so async function. 132 00:08:13,840 --> 00:08:14,920 Let me just do it here. 133 00:08:18,120 --> 00:08:18,810 I'll wait. 134 00:08:21,520 --> 00:08:32,140 Await key word where we get so async just to tell the JavaScript that this is a function hello for cool. 135 00:08:32,620 --> 00:08:34,980 Now let's do it like this. 136 00:08:35,380 --> 00:08:49,270 It will return a greeting here and that greeting will be a wait promise that resolve, not reject resolve 137 00:08:49,600 --> 00:08:50,050 here. 138 00:08:50,290 --> 00:08:52,020 We will pass our wait. 139 00:08:52,210 --> 00:08:52,810 Hello. 140 00:08:55,860 --> 00:08:56,220 Good. 141 00:08:56,910 --> 00:09:01,290 Now, all we need to do is to consume this promise. 142 00:09:02,130 --> 00:09:08,700 So if I do hear if I copied this one and put it here pasted, oops and enter. 143 00:09:09,720 --> 00:09:12,330 And if I do, hello for. 144 00:09:15,810 --> 00:09:20,790 It will return a promise back to us just same as before, but now we are going to consume it and I will 145 00:09:20,790 --> 00:09:24,330 say hello for that then. 146 00:09:25,050 --> 00:09:29,540 And I'm going to say comes a lot and they should give us a way. 147 00:09:29,560 --> 00:09:29,940 Hello. 148 00:09:29,960 --> 00:09:31,020 OK, what's happening here? 149 00:09:31,620 --> 00:09:34,950 So we can use a wait before any promise here. 150 00:09:35,840 --> 00:09:42,410 That will await the decision, what will we do, it will make the function to wait until this promise 151 00:09:42,410 --> 00:09:44,480 is resolved or fulfilled. 152 00:09:44,810 --> 00:09:47,050 So that is what is happening in short. 153 00:09:47,450 --> 00:09:54,240 So when we have the await key word, the whole function will stop. 154 00:09:55,250 --> 00:09:58,470 So it will wait until this promise. 155 00:09:58,820 --> 00:10:05,210 It will wait until this promise is resolved and then the execution will return back to normal. 156 00:10:05,480 --> 00:10:08,560 OK, so that is why we need a single wait. 157 00:10:08,870 --> 00:10:17,180 And the reason why you want to implement a single word in your code is because it allows us to write 158 00:10:17,540 --> 00:10:21,740 code that looks and executed asynchronously without blocking the threat. 159 00:10:22,200 --> 00:10:30,860 OK, so let me give you one more example, probably more examples than one, but so we can practice 160 00:10:30,860 --> 00:10:33,140 more on a single week so you can see what's happening. 161 00:10:33,170 --> 00:10:38,180 So before we did a page function, let me just write this page function again. 162 00:10:39,740 --> 00:10:43,940 Let's put a comma here and say fetch function. 163 00:10:44,960 --> 00:10:49,090 So after that, we're going to rewrite this fetch function using a async awake. 164 00:10:49,760 --> 00:10:57,500 So I'm going to say fetch here and remember Jason Placeholder just type here, Jassam Placeholder. 165 00:10:57,800 --> 00:10:59,690 And we're going to grab what? 166 00:11:01,700 --> 00:11:04,250 The let's grab the users. 167 00:11:06,400 --> 00:11:15,580 Copy this one URL, so the fetch required one URL here where we can have the users right and we can 168 00:11:15,580 --> 00:11:18,730 change change that, then here responds. 169 00:11:20,270 --> 00:11:21,500 Then response. 170 00:11:22,710 --> 00:11:29,100 Jason, and we have already done this, I'm not going to explain again, so here I'm going to say data 171 00:11:29,120 --> 00:11:32,100 and I'm just going to Conjola the data. 172 00:11:32,310 --> 00:11:32,690 Right. 173 00:11:34,290 --> 00:11:37,780 This should be outside here and our Fed should work. 174 00:11:37,800 --> 00:11:39,360 Let me let's see what's happening here. 175 00:11:39,390 --> 00:11:39,900 There you go. 176 00:11:40,050 --> 00:11:43,440 I have 10 users because we have 10 users here. 177 00:11:43,590 --> 00:11:46,830 You see, the last one had the idea of 10. 178 00:11:47,890 --> 00:11:50,200 Good, very good. 179 00:11:50,230 --> 00:11:52,360 We do have the result outputted here. 180 00:11:52,580 --> 00:11:58,690 Nice, so how we can turn this one to async 08. 181 00:12:01,720 --> 00:12:07,210 OK, so how we can do this async, I'm going to create a function called Thach users. 182 00:12:11,680 --> 00:12:12,490 Users. 183 00:12:14,840 --> 00:12:21,960 And now let me just write it real quick for you, and after that we can discuss what's happening here. 184 00:12:22,310 --> 00:12:26,090 So here I'm going to say a wait fetch. 185 00:12:29,000 --> 00:12:30,780 And why I say I would fetch. 186 00:12:31,010 --> 00:12:37,970 Well, let's copy this whole thing, because this fetch, remember returns as a promise and we can await 187 00:12:37,970 --> 00:12:39,200 any promise that we want. 188 00:12:39,620 --> 00:12:42,730 Now, look at here how easier it will be for us. 189 00:12:42,920 --> 00:12:48,780 So I'm going to store this promise back to our response or just read resp. 190 00:12:48,900 --> 00:12:54,320 Look, here, doesn't matter if let's just go here. 191 00:12:55,880 --> 00:12:56,240 Right. 192 00:12:57,650 --> 00:13:00,380 So what I did is I story a week. 193 00:13:01,250 --> 00:13:01,610 Right. 194 00:13:01,610 --> 00:13:05,820 Or this promise back to Constance called response. 195 00:13:06,140 --> 00:13:11,060 Now what I can do is I can say const data equal another wait. 196 00:13:11,390 --> 00:13:11,830 Oops. 197 00:13:12,020 --> 00:13:15,530 Now this is a tricky part and you will understand real quick that Jason. 198 00:13:18,920 --> 00:13:19,620 Very good. 199 00:13:19,640 --> 00:13:22,590 And now I'm just going to console lock the data. 200 00:13:23,570 --> 00:13:27,030 Now, this is an example that you should understand. 201 00:13:27,260 --> 00:13:31,790 So last part, we need to users that users and that's it. 202 00:13:32,000 --> 00:13:35,990 We need to call it this function that we created. 203 00:13:35,990 --> 00:13:37,700 And is async function, by the way. 204 00:13:37,950 --> 00:13:39,030 OK, save it. 205 00:13:39,590 --> 00:13:41,510 Let's see if we have any problems here. 206 00:13:41,540 --> 00:13:43,170 No, we don't have any problem. 207 00:13:43,370 --> 00:13:46,160 So this was coming from console. 208 00:13:47,260 --> 00:13:50,170 What's it like this which. 209 00:13:53,090 --> 00:13:53,640 Very good. 210 00:13:53,660 --> 00:14:03,160 So we have fetch and this is the async away just to know what what what is coming from where, OK, 211 00:14:03,470 --> 00:14:05,050 now we have the same same results here. 212 00:14:05,060 --> 00:14:06,040 I'm not going to show it to you. 213 00:14:06,180 --> 00:14:07,200 You can, by the way, check them. 214 00:14:07,550 --> 00:14:09,710 So what's happening here? 215 00:14:09,740 --> 00:14:12,250 Let me just make this a little bit bigger. 216 00:14:12,620 --> 00:14:18,410 So we have a function that is a function that is the first thing that we we need to do. 217 00:14:18,950 --> 00:14:25,700 So we use the async keyword in order to tell that this function will be async, await function. 218 00:14:26,180 --> 00:14:28,670 Now, we used async. 219 00:14:28,850 --> 00:14:31,160 I'm sorry we used a wait before. 220 00:14:31,160 --> 00:14:32,850 We are fetching y. 221 00:14:32,990 --> 00:14:37,330 Well I already explained because a wait can be used before any promise. 222 00:14:37,340 --> 00:14:41,300 So this function will pass until this response. 223 00:14:42,140 --> 00:14:42,530 Right. 224 00:14:42,920 --> 00:14:45,730 Until this response from this fetch is received. 225 00:14:46,250 --> 00:14:47,050 Do you get it now. 226 00:14:47,480 --> 00:14:53,840 So we are making the function to await and we are saying, OK, hang in there until we get this response. 227 00:14:55,300 --> 00:15:02,890 So so we need to wait for this response to return and we can store it in a variable called response. 228 00:15:03,220 --> 00:15:03,700 Nice. 229 00:15:04,990 --> 00:15:07,240 But why do we need another overweighed here? 230 00:15:08,140 --> 00:15:10,000 So, well, remember that. 231 00:15:10,980 --> 00:15:13,310 We don't get the values straight away. 232 00:15:14,430 --> 00:15:21,260 From the response, we don't get the value, so what we are getting a promise back, this will return 233 00:15:21,270 --> 00:15:24,990 another promise response that Jason is returning, another promise. 234 00:15:25,320 --> 00:15:30,810 In each time that we have a promise, we can say, OK, I'll wait before that promise in. 235 00:15:32,500 --> 00:15:38,400 The function wait until you resolve this promise, so that is how it works now. 236 00:15:38,470 --> 00:15:44,310 That's why we do have to wait here, because this returns a promise and this also returns a promise. 237 00:15:45,070 --> 00:15:50,630 So and each promise, we can say, OK, I will use a wait to wait until the promise is fulfilled. 238 00:15:50,770 --> 00:15:54,000 And after that, we just can't the data and we do the same to you. 239 00:15:54,160 --> 00:16:00,250 We stored that promise, resolves, rejected, whatever it is in this data. 240 00:16:00,280 --> 00:16:03,610 So after that we can use we can just consolo the data. 241 00:16:03,760 --> 00:16:04,120 Right. 242 00:16:04,600 --> 00:16:13,540 So this is a step by step and the court looks Synchronoss now see in steps first we saying, OK, before 243 00:16:13,540 --> 00:16:20,190 doing this second step, wait until this promise is resolved, then these promises are resolved. 244 00:16:20,800 --> 00:16:21,970 Then you go on this line. 245 00:16:22,180 --> 00:16:24,370 How cool and powerful is this? 246 00:16:24,820 --> 00:16:31,740 Now, we will do one more example and remember that we did promises that old last time. 247 00:16:31,900 --> 00:16:35,820 So we use the method to loop through that array of Eurorail links. 248 00:16:36,160 --> 00:16:38,210 So the real, real, real links. 249 00:16:38,920 --> 00:16:42,160 Let's just create here, Jason, again, another one. 250 00:16:42,520 --> 00:16:44,290 So this will be another example here. 251 00:16:44,680 --> 00:16:51,670 Let's create an array in this area will have three you else and the you are alse will be just going 252 00:16:51,670 --> 00:16:52,550 to copy it here. 253 00:16:52,690 --> 00:16:54,490 So first will be the users. 254 00:16:55,810 --> 00:16:59,290 The second Eurorail will be for posts 255 00:17:01,900 --> 00:17:04,600 in the third your will be for Wab's. 256 00:17:05,140 --> 00:17:11,200 Make sure that you put it, you put it in the quotes, OK, because it's not going to work otherwise. 257 00:17:11,410 --> 00:17:19,120 So the last few URL, we will just get the albums or you can go here and you can try for anything that 258 00:17:19,120 --> 00:17:20,530 you want you can do for photos. 259 00:17:20,720 --> 00:17:22,810 It's too much post. 260 00:17:22,810 --> 00:17:25,900 So I just choose both albums and users. 261 00:17:26,050 --> 00:17:30,610 Users are having only 10, but everything else is one hundred and one hundred. 262 00:17:30,700 --> 00:17:31,080 Nice. 263 00:17:32,320 --> 00:17:40,120 So we create that this list and we use promise that OK, so how we did it, let's just write it together 264 00:17:40,420 --> 00:17:42,520 or we don't need to write it. 265 00:17:42,520 --> 00:17:43,570 We need to go. 266 00:17:44,020 --> 00:17:50,800 I think we'll for lecture four so you can go to lecture four in, copy all of it. 267 00:17:51,970 --> 00:17:52,600 Very good. 268 00:17:52,870 --> 00:17:55,110 And paste it down here so it will work. 269 00:17:55,780 --> 00:17:56,140 Yep. 270 00:17:56,140 --> 00:17:56,830 Same name. 271 00:17:57,070 --> 00:17:57,730 Save it. 272 00:17:58,990 --> 00:18:03,190 Let's go back to your hour and there you go. 273 00:18:05,390 --> 00:18:12,110 I do have all of this let me just show you so I have 10 users. 274 00:18:13,890 --> 00:18:18,120 Was it like this they don't want so here what we can see. 275 00:18:20,220 --> 00:18:24,800 Users, comma, OK. 276 00:18:25,830 --> 00:18:31,620 Because I want to know which what is the data we are just bringing out there, so this will be posts. 277 00:18:33,540 --> 00:18:40,350 And make sure that you get rid of this space and this should be albums, save it now. 278 00:18:40,350 --> 00:18:41,470 Go back in your. 279 00:18:41,910 --> 00:18:42,420 There you go. 280 00:18:42,540 --> 00:18:46,140 Now you have the albums post and the users COO. 281 00:18:48,230 --> 00:18:55,550 And now what we can do is we can rewrite these promises that all using async a way. 282 00:18:55,710 --> 00:18:57,260 OK, so how are we going to do this? 283 00:18:57,620 --> 00:19:03,770 Well, let me just first coming out this one, because I don't want to have multiple outputs, but let's 284 00:19:03,770 --> 00:19:04,070 do it. 285 00:19:04,100 --> 00:19:09,740 So promise that I was using this list here and we are mapping through each and every element of this 286 00:19:09,740 --> 00:19:10,040 list. 287 00:19:10,550 --> 00:19:14,440 And actually there are three and we we're getting three promises back. 288 00:19:14,450 --> 00:19:14,780 Right. 289 00:19:15,140 --> 00:19:21,800 And we can access those three promises using data zero, data one, data two, because we were patching 290 00:19:21,800 --> 00:19:26,120 each individual array and we are just getting response, response to Jason. 291 00:19:26,890 --> 00:19:29,810 OK, now let's compare this one. 292 00:19:30,140 --> 00:19:30,850 All right. 293 00:19:30,860 --> 00:19:35,560 Rewrite this using async. 294 00:19:37,240 --> 00:19:37,400 Oh. 295 00:19:39,950 --> 00:19:43,640 OK, so let's create a function expression here. 296 00:19:43,640 --> 00:19:46,490 Const get Jaeson data. 297 00:19:46,610 --> 00:19:51,610 Let's or just get get data that will be easier. 298 00:19:52,100 --> 00:20:00,290 So async here I'm going to say async function and there the rest is history. 299 00:20:00,690 --> 00:20:03,770 Now we need to call this function at the end. 300 00:20:03,840 --> 00:20:09,410 OK, get data, we need to invoke this function. 301 00:20:09,920 --> 00:20:12,540 That's another keyword that you should remember and get used to it. 302 00:20:13,100 --> 00:20:20,030 Now here we cannot wait for all of these promises so we can use a wait before this promise because they 303 00:20:20,970 --> 00:20:28,220 didn't do it returns us three promises because it loops three times through these URLs. 304 00:20:28,340 --> 00:20:38,420 OK, so what we can do, we can say a wait promise that all in each side here we had the Jason list 305 00:20:38,870 --> 00:20:43,610 and we were mapping through each individual individual URL. 306 00:20:44,060 --> 00:20:44,450 Right. 307 00:20:46,910 --> 00:20:50,780 Let me just do it now, are we going to see a return here, fetch? 308 00:20:54,040 --> 00:20:54,940 The URL. 309 00:20:56,730 --> 00:20:58,620 And then. 310 00:21:01,840 --> 00:21:02,710 Response. 311 00:21:04,280 --> 00:21:11,840 Or let's use the same same here response, same wording that we did here in response. 312 00:21:12,950 --> 00:21:14,690 That Jason, very good. 313 00:21:15,710 --> 00:21:23,150 Now, there you go, we have it, the complete function here, so I have some small problem. 314 00:21:24,140 --> 00:21:28,500 So, Jason Mapp, you are all very good. 315 00:21:28,520 --> 00:21:29,910 I don't need this one here. 316 00:21:31,610 --> 00:21:31,970 Yeah. 317 00:21:33,840 --> 00:21:35,040 Or I need that one. 318 00:21:35,070 --> 00:21:36,750 OK, so that your. 319 00:21:37,230 --> 00:21:39,300 So I need one more here. 320 00:21:41,910 --> 00:21:51,270 Nice, so we await all of the promises and they were look three times using this list, but we need 321 00:21:51,270 --> 00:21:52,100 to stop him. 322 00:21:52,470 --> 00:22:00,970 And here we use data where we use every tool to access this, to access the data. 323 00:22:01,080 --> 00:22:01,370 Right. 324 00:22:01,560 --> 00:22:08,430 But here we are going to use a restructuring in how this is destruction was working was really nice. 325 00:22:08,580 --> 00:22:17,820 So we can create an array, see here, cost users posts and albums. 326 00:22:19,960 --> 00:22:23,920 OK, and that should be equal to a weight problem, is that all nice? 327 00:22:24,370 --> 00:22:33,130 So what we do is we create three separate arrays called users, const users, composed and concept albums. 328 00:22:33,310 --> 00:22:35,200 But we did it with the structuring. 329 00:22:35,230 --> 00:22:35,590 Right. 330 00:22:35,980 --> 00:22:38,210 And that was the sixth feature. 331 00:22:38,260 --> 00:22:40,280 Now, how we can access them? 332 00:22:40,300 --> 00:22:42,370 Well, that's easy from here. 333 00:22:42,370 --> 00:22:49,510 We can just say cancel that log and let's put it here, users. 334 00:22:51,890 --> 00:22:56,830 Users straight away, we don't need to use any zero one three, right? 335 00:22:58,280 --> 00:23:08,120 And this will be posts so we can access the posts the entire day because the result of this promise 336 00:23:08,120 --> 00:23:10,340 will be stored here in albums. 337 00:23:14,110 --> 00:23:16,240 Albums here, OK? 338 00:23:18,640 --> 00:23:21,070 Here I do have albums. 339 00:23:23,360 --> 00:23:28,980 Now, I do have everything right, I save it now let's go back here and there you go. 340 00:23:29,480 --> 00:23:31,030 So this is a little bit different. 341 00:23:31,250 --> 00:23:36,880 I put it here semicolon because I want to be different, but I already cancelled that log. 342 00:23:36,890 --> 00:23:40,210 So these are from the new async away function. 343 00:23:40,240 --> 00:23:46,520 So, ladies and gentlemen, I know how to create these async away, how you can rewrite the actual functions 344 00:23:46,520 --> 00:23:48,830 that we did before using the easy going. 345 00:23:48,950 --> 00:23:51,800 And we can wait before any promise. 346 00:23:52,280 --> 00:23:54,860 So this is not the whole deal here. 347 00:23:54,860 --> 00:23:55,460 I'm just. 348 00:23:56,550 --> 00:23:58,560 Remember here we did catch the error. 349 00:23:59,660 --> 00:24:06,770 But here we are not catching the air, so how we are going to do that in async function, well, interesting 350 00:24:06,860 --> 00:24:07,270 function. 351 00:24:07,280 --> 00:24:10,420 We have access to something that is called try and catch. 352 00:24:10,670 --> 00:24:15,680 Now, I'm just going to cut this one from here and I'm going to say it like this. 353 00:24:15,800 --> 00:24:17,180 Then I'm going to say try. 354 00:24:19,830 --> 00:24:28,230 And so what actually we are seeing is try this piece of code here in this trial block will always get 355 00:24:28,380 --> 00:24:30,430 be executed no matter what. 356 00:24:30,450 --> 00:24:33,660 So the the compiler will get here no matter what. 357 00:24:33,690 --> 00:24:35,820 So the tribe will always be executed. 358 00:24:36,150 --> 00:24:39,690 Now, if we have any errors, then we can use catch. 359 00:24:41,380 --> 00:24:50,350 And we need error here, or you can just that the whole thing error and conjola error and we can just 360 00:24:50,350 --> 00:24:52,120 comes along the error, the complete oops. 361 00:24:54,600 --> 00:24:56,200 OK, save it. 362 00:24:56,730 --> 00:25:02,700 So there you go, now you know how to catch the errors as well as using the async function, but we 363 00:25:02,850 --> 00:25:05,260 feel that we need to use try and catch a block. 364 00:25:05,280 --> 00:25:06,210 That's how it's called. 365 00:25:06,450 --> 00:25:08,990 So d try saying, OK, try this piece of code. 366 00:25:09,180 --> 00:25:11,520 But if there is any error, then you're going to catch it here. 367 00:25:12,040 --> 00:25:14,100 Now we have the same output. 368 00:25:14,250 --> 00:25:16,860 Well let's see if this is working. 369 00:25:16,870 --> 00:25:21,030 So change or modify the user's double s. 370 00:25:23,320 --> 00:25:28,300 And there you go, we have the users will be there or. 371 00:25:32,010 --> 00:25:36,730 Yep, air, not name resolved type feel to fetch. 372 00:25:37,500 --> 00:25:44,910 OK, so we have the air there and we have the type error failed to fetch, OK, because I changed the 373 00:25:44,910 --> 00:25:45,450 URL. 374 00:25:45,450 --> 00:25:47,310 Where we accessing here? 375 00:25:48,420 --> 00:25:52,830 Same thing can happen to Jason Placeholders, for example, for the last one. 376 00:25:53,220 --> 00:25:57,300 And it will say error failed to fetch and we can change. 377 00:26:00,730 --> 00:26:03,340 Something happened. 378 00:26:05,780 --> 00:26:06,260 Fix me. 379 00:26:10,240 --> 00:26:16,510 OK, now here is error, something happened, fix me and the type of error is failed to fetch because 380 00:26:16,540 --> 00:26:20,060 this URL that we just passed here, it's not working. 381 00:26:20,410 --> 00:26:24,280 Ladies and gentlemen, I know everything about the async await function. 382 00:26:24,290 --> 00:26:27,580 So we use the two key words called async await. 383 00:26:27,940 --> 00:26:34,120 And we can do it async single on any function that we did before error functions. 384 00:26:34,120 --> 00:26:35,770 We can turn it back to async. 385 00:26:36,070 --> 00:26:39,330 Oh, wait, we can do the function expression as well. 386 00:26:40,180 --> 00:26:42,760 And yes, this is how you consume diploma's. 387 00:26:43,570 --> 00:26:44,650 This is the way the keyword. 388 00:26:44,690 --> 00:26:51,580 So again, the key word is actually we saying, OK, stop everything, make the functions to wait. 389 00:26:51,910 --> 00:26:57,460 We are saying just hang in there until we have the promise resolved in return something back to us and 390 00:26:57,460 --> 00:27:00,220 we can store that one here in the variable. 391 00:27:00,430 --> 00:27:01,510 This is a short version. 392 00:27:01,510 --> 00:27:03,100 So you can just cancel a lot here. 393 00:27:03,460 --> 00:27:07,350 Now we created to recreate the FEG function using async await. 394 00:27:08,290 --> 00:27:09,790 This is how it look, how nice it is. 395 00:27:10,030 --> 00:27:18,310 But some some times when you start working on this you will say, yeah, it doesn't look doesn't look 396 00:27:18,310 --> 00:27:19,460 simpler than this. 397 00:27:19,490 --> 00:27:22,540 Well if you get used to it, yes it does. 398 00:27:22,750 --> 00:27:29,390 So it looks step by step and it looks our kocho is very synchronous, not asynchronous. 399 00:27:29,860 --> 00:27:31,150 So fetch users here. 400 00:27:31,150 --> 00:27:37,120 We just calling this function and the last thing we did is we use from is that all example from the 401 00:27:37,120 --> 00:27:40,870 lecture for and we rewrite it using the async await. 402 00:27:40,960 --> 00:27:47,500 Now you will have some exercises, please do them because in those exercise you will learn how to take 403 00:27:47,500 --> 00:27:53,320 this into a new level because here we can use something else. 404 00:27:53,890 --> 00:28:00,940 What is this fetch is doing is actually returning on a promise so we can also do another async. 405 00:28:01,570 --> 00:28:09,700 OK, but for that thing you need to look at the exercise and we need to change a couple of things here 406 00:28:09,700 --> 00:28:10,660 in order for that to work. 407 00:28:10,660 --> 00:28:16,760 But if you don't know how to do it, then you will see it in your solutions. 408 00:28:16,810 --> 00:28:20,440 So stay stay with me and I will see you in your in the next lecture.