1 00:00:00,900 --> 00:00:02,040 Welcome back, ladies and gentlemen. 2 00:00:02,080 --> 00:00:06,790 Today, we're going to do promises, and this is a very interesting lecture. 3 00:00:06,840 --> 00:00:10,710 What I want you to do is to create a lecture for and just put it here. 4 00:00:10,740 --> 00:00:11,070 Right? 5 00:00:11,250 --> 00:00:12,670 Same old structure. 6 00:00:13,080 --> 00:00:15,510 Now, there are couple definitions here. 7 00:00:15,780 --> 00:00:23,310 And I have done this on purpose because I want this file at the RNC to be accessible so you can access 8 00:00:23,310 --> 00:00:24,930 this file to get the content. 9 00:00:25,140 --> 00:00:29,220 You don't need to listen to me again, for example, in future, but you can just read it. 10 00:00:29,250 --> 00:00:38,580 OK, so the ethics are very, very interesting feature in in I mean, the promise is a very interesting 11 00:00:38,580 --> 00:00:39,570 feature in year six. 12 00:00:39,870 --> 00:00:47,310 So the definition here is the promise object represents an eventual completion or failure of asynchronous 13 00:00:47,310 --> 00:00:50,210 operation and its resulting value. 14 00:00:51,330 --> 00:00:52,470 Does this tells you much? 15 00:00:52,590 --> 00:00:53,110 Not me. 16 00:00:53,490 --> 00:00:56,700 Well, I didn't I didn't get the first time. 17 00:00:56,700 --> 00:01:01,850 Now, the my definition is promise is an object that may produce a value in future. 18 00:01:02,160 --> 00:01:07,860 This will be a value that is resolved or a reason why it's rejected or not resolved. 19 00:01:08,280 --> 00:01:14,670 So promises like the promises we make to our friends, to our family members, we say, yeah, from 20 00:01:14,670 --> 00:01:18,690 tomorrow, from next week, I will stop eating junk food, I'll take care of myself. 21 00:01:18,840 --> 00:01:19,810 But that's a promise. 22 00:01:20,100 --> 00:01:23,550 It may happen in the future and it will result in something. 23 00:01:23,550 --> 00:01:25,850 Right, but it may not. 24 00:01:26,550 --> 00:01:27,840 So you might have a reason. 25 00:01:27,840 --> 00:01:30,540 You say I don't have enough time to cook healthy food. 26 00:01:30,540 --> 00:01:31,620 And that's why I stuck. 27 00:01:32,130 --> 00:01:35,610 I'm stuck with this junk food right now. 28 00:01:35,610 --> 00:01:39,560 The promise can be one of the three possible states it can be pending. 29 00:01:39,570 --> 00:01:43,370 It's called the initial state, and it's neither fulfilled or rejected. 30 00:01:43,380 --> 00:01:45,910 These are the two states that we're going to see later. 31 00:01:46,110 --> 00:01:49,480 So initial state before the promise succeeds or fails. 32 00:01:49,920 --> 00:01:52,890 Second state is fulfilled or resolved. 33 00:01:53,280 --> 00:01:53,820 Doesn't matter. 34 00:01:53,820 --> 00:01:55,500 I'm going to use resolve most of the time. 35 00:01:55,560 --> 00:02:01,110 But if you read it somewhere fulfilled main meaning the same thing as operation completed successfully 36 00:02:01,320 --> 00:02:03,180 and the last word is rejected. 37 00:02:03,540 --> 00:02:08,880 Well, we don't want failed promises right before promises we had callbacks in. 38 00:02:08,880 --> 00:02:10,920 What is the difference between callbacks and promises? 39 00:02:11,550 --> 00:02:17,280 While the main difference between callback function and promises is that we attach a callback to a promise 40 00:02:17,280 --> 00:02:18,450 rather than passing it. 41 00:02:19,650 --> 00:02:25,410 Remember from yesterday from last lecture, sorry, yesterday was for me, but for you was the last 42 00:02:25,410 --> 00:02:25,800 lecture. 43 00:02:26,040 --> 00:02:29,370 So we did the callbacks where we pass it as an argument. 44 00:02:29,670 --> 00:02:31,530 So we still use a callback function. 45 00:02:31,530 --> 00:02:33,180 We promises, but in a different way. 46 00:02:33,360 --> 00:02:34,740 It's called method training. 47 00:02:34,900 --> 00:02:37,650 Okay, now I promise this lecture will be good. 48 00:02:37,980 --> 00:02:38,930 So let's do it. 49 00:02:39,240 --> 00:02:43,980 So first promise now consed promise. 50 00:02:44,340 --> 00:02:45,360 Let me just write it. 51 00:02:46,080 --> 00:02:47,850 These guys don't worry about it. 52 00:02:48,300 --> 00:02:56,940 Now at this stage you promise we will discuss promise and here I'm going to have resolve. 53 00:02:57,950 --> 00:03:08,690 And reject, you can name this also using REST's until here or RSJ, right in your shorthand. 54 00:03:08,880 --> 00:03:21,110 So now I'm going to say if true now resolve will be this has been resolved. 55 00:03:22,130 --> 00:03:26,910 And there the condition will be totally opposite. 56 00:03:26,930 --> 00:03:31,420 You will say reject human error. 57 00:03:33,200 --> 00:03:39,750 This has been rejected, an exclamation mark right now. 58 00:03:39,770 --> 00:03:41,390 Look at what's happening with the collar here. 59 00:03:41,570 --> 00:03:45,110 I do have resolve yellow in your place, you can have a different color. 60 00:03:45,110 --> 00:03:47,450 But mine is yellow here in yellow here. 61 00:03:47,450 --> 00:03:48,920 But this is dark yellow, right? 62 00:03:49,820 --> 00:03:53,730 And this tells you that I do this on purposely. 63 00:03:53,750 --> 00:03:58,940 These eve conditions will always be true because true is always true and it will get there. 64 00:03:59,090 --> 00:04:02,270 So it will it will run this line of code no matter what. 65 00:04:02,420 --> 00:04:03,130 It never will. 66 00:04:03,200 --> 00:04:04,690 It will never go there. 67 00:04:04,880 --> 00:04:12,710 So if you see a code, something that you do in future and you see some some similar coloring like this 68 00:04:12,710 --> 00:04:15,260 means that your logic is something is not right. 69 00:04:15,560 --> 00:04:21,110 My logic is actually right here because I planned this just to show you the syntax. 70 00:04:21,320 --> 00:04:26,780 Right now I have a variable called Promis Constants. 71 00:04:26,780 --> 00:04:30,590 If you want to say so, I'm going to save the result of these promise there. 72 00:04:30,590 --> 00:04:30,910 Right. 73 00:04:31,340 --> 00:04:39,940 So the how we create new promises using the new keyword, new promise is I have two arguments that call 74 00:04:39,950 --> 00:04:40,670 resolve. 75 00:04:41,240 --> 00:04:46,580 And if I see true, then the result will be this or reject, then resolve will be this. 76 00:04:46,580 --> 00:04:48,580 We are passing a message there again. 77 00:04:49,610 --> 00:04:56,380 But how we can run a promise, how I can see what's inside this promise. 78 00:04:56,540 --> 00:04:59,690 Well, I can get the name of this constant. 79 00:04:59,900 --> 00:05:00,740 It can be anything. 80 00:05:00,740 --> 00:05:02,110 It can be my promise if you want. 81 00:05:02,540 --> 00:05:07,130 So promise that and I can use so it gives me catch word. 82 00:05:07,130 --> 00:05:09,410 Then we're going to talk about this scheduler then later. 83 00:05:09,560 --> 00:05:15,710 I mean we're going to talk about catch later, but we need to do that so I can type only then at this 84 00:05:15,710 --> 00:05:16,100 stage. 85 00:05:16,310 --> 00:05:19,600 But I can do like this that then. 86 00:05:19,940 --> 00:05:23,330 So most of the time you will see that the promises are written like this. 87 00:05:23,940 --> 00:05:25,760 OK, to be more readable. 88 00:05:25,760 --> 00:05:27,310 Now that's it. 89 00:05:27,350 --> 00:05:30,290 Nothing about the way this is going to work. 90 00:05:30,290 --> 00:05:31,180 It's going to work the same. 91 00:05:31,340 --> 00:05:36,250 So if you do it like that then or if you do it this way. 92 00:05:37,100 --> 00:05:38,180 Oh OK. 93 00:05:39,830 --> 00:05:48,430 Let me right here what I need to write, so I'm going to say that then and I'm going to pass here result, 94 00:05:48,860 --> 00:05:56,810 this is a similar thing that we saw where when we did the Ajax call, we the with the fetch function. 95 00:05:57,150 --> 00:05:57,560 Right. 96 00:05:58,700 --> 00:06:01,490 OK, I have two dots there. 97 00:06:01,700 --> 00:06:02,900 That's why it's giving me an error. 98 00:06:02,910 --> 00:06:03,410 Save it. 99 00:06:03,890 --> 00:06:05,410 Let's go back to our here. 100 00:06:05,840 --> 00:06:06,970 This has been resolved. 101 00:06:07,670 --> 00:06:08,130 Beautiful. 102 00:06:08,570 --> 00:06:10,310 Now let's go back here. 103 00:06:10,460 --> 00:06:12,200 Let's make this one more readable. 104 00:06:14,320 --> 00:06:18,750 OK, so let's talk about this part. 105 00:06:18,940 --> 00:06:22,450 OK, now we use that then. 106 00:06:23,620 --> 00:06:30,430 Not when there is an error, so you need to understand only day, so we use promise that then once the 107 00:06:30,430 --> 00:06:36,640 promises resolve, so that then is used when the promise is resolved or fulfilled. 108 00:06:36,670 --> 00:06:40,020 Remember, these two key words are up here, right? 109 00:06:41,430 --> 00:06:47,860 We can't use on rejected promise or rejected promise, we need to use that catch and we will get there. 110 00:06:47,880 --> 00:06:48,340 Don't worry. 111 00:06:49,080 --> 00:06:53,100 So if the promise gets resolved, we can use that then. 112 00:06:53,250 --> 00:06:57,050 So that then method, this method here, you can see the curly brackets, right? 113 00:06:57,180 --> 00:07:03,900 I mean, the bracket is called after the promise is resolved, then we can decide what we can do with 114 00:07:03,900 --> 00:07:08,410 this resolved promise in our example is just to lock it down. 115 00:07:09,450 --> 00:07:14,030 Now, I will do again the fetch method from yesterday, from last lecture. 116 00:07:14,040 --> 00:07:16,230 Sorry again, I'm seeing from yesterday. 117 00:07:16,470 --> 00:07:22,360 And you will see we have done a little bit different there, but we will get there. 118 00:07:22,380 --> 00:07:23,130 Don't worry about it. 119 00:07:24,090 --> 00:07:25,510 So that is pretty much it. 120 00:07:26,490 --> 00:07:27,090 So. 121 00:07:28,640 --> 00:07:33,000 Let's copy this comment and let's change it a little bit. 122 00:07:33,290 --> 00:07:35,140 So I wanted to show you something. 123 00:07:35,630 --> 00:07:42,040 So instead of consoling like this, resolved what I'm going to do, I'm just going to say resolved. 124 00:07:42,050 --> 00:07:46,970 Plus, we're going to concatenate with semicolon in why I can do this. 125 00:07:47,270 --> 00:07:50,540 I can do this because this is giving me a string back, right. 126 00:07:50,870 --> 00:07:52,400 So I can get another string. 127 00:07:52,790 --> 00:07:54,710 Actually, this is considered as a string. 128 00:07:55,040 --> 00:07:59,720 So I'm attaching to string or I'm concatenating two strings with this plus sine. 129 00:07:59,810 --> 00:08:01,550 OK, now. 130 00:08:03,420 --> 00:08:10,080 If you do this, let me just show you real quick, so I'm just going to refresh this part here, just 131 00:08:10,080 --> 00:08:10,980 going to delete this. 132 00:08:13,130 --> 00:08:13,790 And. 133 00:08:17,440 --> 00:08:23,800 Might give me an error and if I promise, has been already declared, OK, let me just copy this one 134 00:08:24,790 --> 00:08:25,460 refresh. 135 00:08:25,600 --> 00:08:26,680 I want to show you something. 136 00:08:27,040 --> 00:08:30,100 And why is giving me this again now? 137 00:08:30,100 --> 00:08:30,500 It's cool. 138 00:08:31,390 --> 00:08:31,930 OK. 139 00:08:32,850 --> 00:08:39,470 So if you go with error up arrow key on your keyboard, you will see the last thing that you have done. 140 00:08:39,690 --> 00:08:40,520 So don't worry about this. 141 00:08:40,530 --> 00:08:41,400 This just to show you. 142 00:08:41,850 --> 00:08:43,040 So promise. 143 00:08:43,890 --> 00:08:45,710 This is the promise that we just built. 144 00:08:46,080 --> 00:08:50,810 And then I have promised that then, OK, now look at what will happen here. 145 00:08:51,780 --> 00:08:54,330 So it will give us promise back. 146 00:08:55,650 --> 00:09:01,080 Now, it didn't give us this has been resolved, but it did give us promise. 147 00:09:01,110 --> 00:09:02,370 Back now. 148 00:09:03,450 --> 00:09:06,250 There is a promise result in the state also. 149 00:09:07,500 --> 00:09:09,840 So now I know. 150 00:09:10,950 --> 00:09:20,490 This is confusing, but because the first then when we use the first, then we it will return a new 151 00:09:20,490 --> 00:09:25,880 promise and now we want to get the result. 152 00:09:26,280 --> 00:09:30,770 So from this promise to get the result, we need to use another day. 153 00:09:31,110 --> 00:09:36,750 OK, that's why we need to use another name, because we don't see the result there. 154 00:09:36,760 --> 00:09:38,050 We just get another promise. 155 00:09:38,280 --> 00:09:43,610 So how we are resolving a promise again with another then method. 156 00:09:44,070 --> 00:09:47,580 So inside here I'm going to say data. 157 00:09:48,180 --> 00:09:50,820 You can name it or you can just result again, data. 158 00:09:50,820 --> 00:09:53,610 And I'm just going to say Konza lock the data back. 159 00:09:54,300 --> 00:09:54,650 Right. 160 00:09:54,930 --> 00:09:56,850 And I'm just going to uncommon this part. 161 00:09:57,450 --> 00:10:00,840 Just going to delete this and save it here. 162 00:10:01,200 --> 00:10:02,520 Then you go, dear. 163 00:10:02,880 --> 00:10:07,170 This has been resolved in semicolon is always there. 164 00:10:07,560 --> 00:10:08,070 Excellent. 165 00:10:08,880 --> 00:10:09,300 Now. 166 00:10:11,040 --> 00:10:16,800 So now I just want to tell you that this when we have using multiple dents, then this is called method 167 00:10:16,800 --> 00:10:17,880 chaining, right? 168 00:10:18,800 --> 00:10:24,320 Because either the result will be resolved or rejected, in our case, its success, it's always going 169 00:10:24,320 --> 00:10:29,300 to be that's why we use another then method and that is called Method Cheney. 170 00:10:30,080 --> 00:10:30,620 Excellent. 171 00:10:30,950 --> 00:10:32,320 Now, you know a couple of things. 172 00:10:32,330 --> 00:10:33,290 What is promise? 173 00:10:33,500 --> 00:10:38,030 How we can create a promise, how we can get results when it's resolved. 174 00:10:38,030 --> 00:10:43,580 Using that, then how we can change multiple then methods to get the result what we want. 175 00:10:44,030 --> 00:10:49,430 Because if we just leave it like this, you saw it gives us another promise. 176 00:10:49,430 --> 00:10:49,670 Right. 177 00:10:49,910 --> 00:10:52,820 And we are resolving a promise using that then. 178 00:10:53,570 --> 00:10:54,830 So let's move on. 179 00:10:56,480 --> 00:11:03,790 That is pretty much awesome, ladies and gentlemen, and I am going to start with something more interesting. 180 00:11:04,520 --> 00:11:09,020 So let's see if there is an error somewhere in this here. 181 00:11:09,500 --> 00:11:13,250 In this case, there can be an error, but we need to make our own error. 182 00:11:13,550 --> 00:11:19,100 So we need to throw an error somewhere here just to show you how we can catch that error. 183 00:11:19,370 --> 00:11:22,700 So now the problem is will get rejected when we throw an error. 184 00:11:22,880 --> 00:11:24,480 OK, so how are we going to throw in there? 185 00:11:24,680 --> 00:11:27,020 Let's let's use it here. 186 00:11:27,020 --> 00:11:33,890 So we have multiple lines and we have when we have an error, an error function, not error. 187 00:11:34,190 --> 00:11:39,170 When I have an error function, we need to use this curly brackets because we're going to have multiple 188 00:11:39,170 --> 00:11:39,650 lines. 189 00:11:39,920 --> 00:11:40,640 Remember this. 190 00:11:41,810 --> 00:11:48,110 And semicolon there, but before we counseling log the data, I can just throw in there. 191 00:11:49,080 --> 00:11:58,650 OK, so this will work for us now, save it and there's a uncute in Promis error and this is what we 192 00:11:58,650 --> 00:11:59,030 got. 193 00:11:59,580 --> 00:12:02,790 But how we are going to get we're going to catch this error. 194 00:12:02,920 --> 00:12:04,210 So why are we catching errors? 195 00:12:04,440 --> 00:12:07,220 Well, we're catching errors just to get information. 196 00:12:07,230 --> 00:12:07,740 What happened? 197 00:12:07,740 --> 00:12:11,820 Because we know we predicted something bad can happen, for example. 198 00:12:12,220 --> 00:12:14,320 Yeah, there can be an error somewhere. 199 00:12:14,560 --> 00:12:15,720 That's why we need to catch it. 200 00:12:15,720 --> 00:12:20,260 And we need to we can write whatever we think that is relevant about the error. 201 00:12:20,320 --> 00:12:24,930 OK, now that catch method we are using. 202 00:12:25,880 --> 00:12:32,440 And we are using when there is a narrow streets opposite of then, right, so that catch and inside 203 00:12:32,450 --> 00:12:37,450 I'm just going to create another function, aero function, not error. 204 00:12:38,060 --> 00:12:43,490 I'm just my language is like that, so I can't pronounce it pretty much clearly. 205 00:12:43,970 --> 00:12:44,670 There you go. 206 00:12:44,960 --> 00:12:51,290 Now, before this, it was uncovered uncut, uncut air. 207 00:12:51,340 --> 00:12:54,670 Now, we just caught that error and we just see error. 208 00:12:54,920 --> 00:12:55,910 Something happened. 209 00:12:59,500 --> 00:13:08,310 Right, good, so that catch is used and is opposed to that then because we want to catch the error 210 00:13:08,310 --> 00:13:10,750 when promise fails, getting any errors. 211 00:13:11,190 --> 00:13:11,610 So. 212 00:13:13,190 --> 00:13:19,610 They start then and catch are mostly used and you're going to see them everywhere, so make sure that 213 00:13:19,610 --> 00:13:21,620 you catch the error that happened. 214 00:13:21,930 --> 00:13:26,870 Now, one more thing that I want to show you here so actually you can use. 215 00:13:28,010 --> 00:13:33,970 In reality, you can use that catch even here after the first then, so you can use it here, right? 216 00:13:34,490 --> 00:13:38,640 But what is that is not a best case scenario. 217 00:13:39,350 --> 00:13:39,800 Why? 218 00:13:40,130 --> 00:13:46,370 Well, if an there it's not happening here and it happens on this one and you have the catch meant that 219 00:13:46,370 --> 00:13:52,190 somewhere in the middle, then the error that happens below that catch method will not be caught. 220 00:13:52,640 --> 00:14:00,260 So the rule is to put this catch at the end, always put this catch at the end. 221 00:14:00,490 --> 00:14:03,710 OK, that is pretty much good. 222 00:14:04,430 --> 00:14:07,540 Now, let's see one more interesting example. 223 00:14:08,210 --> 00:14:14,090 The promises are fundamental part of asynchronous JavaScript, remember, because they don't block the 224 00:14:14,090 --> 00:14:16,350 execution of the rest of the code. 225 00:14:17,090 --> 00:14:24,230 So while the promised spending worries in this stage right here, initial state needs are fulfilled 226 00:14:24,230 --> 00:14:28,970 or rejected before the promise succeeds or fails. 227 00:14:29,360 --> 00:14:29,750 So. 228 00:14:30,990 --> 00:14:32,250 Let me just go back to you. 229 00:14:32,760 --> 00:14:39,810 So while the promise spending or getting resolved or reject it, we can continue executing the rest 230 00:14:39,810 --> 00:14:40,350 of the code. 231 00:14:41,040 --> 00:14:48,180 So, for example, maybe there is an API we are requesting that takes more time than usual or our bandwidth 232 00:14:48,180 --> 00:14:50,460 is playing some role here. 233 00:14:50,640 --> 00:14:51,020 Right. 234 00:14:51,720 --> 00:14:54,840 But we don't want because of that everything else to stop. 235 00:14:55,870 --> 00:15:01,510 Now, we're going to create a couple of promises here, and I'm going to tell you the difference. 236 00:15:01,720 --> 00:15:04,770 OK, so I'm just going to make sure that this is bigger now. 237 00:15:06,100 --> 00:15:08,250 So did this do this together with me? 238 00:15:08,260 --> 00:15:11,410 So can you promise you can call it whatever you want. 239 00:15:12,400 --> 00:15:15,360 And I'm going to say I want equal new promise. 240 00:15:15,820 --> 00:15:20,160 So I'm going to create a couple of promise is that I'm going to have resolve or reject it. 241 00:15:20,170 --> 00:15:23,200 I'm not going to put the full name as I did it here. 242 00:15:23,200 --> 00:15:24,640 So you can use a short version. 243 00:15:26,930 --> 00:15:32,550 OK, now we are going to set time out. 244 00:15:32,870 --> 00:15:39,620 Remember, we used said time out with the callback function, so I'm going to use here result. 245 00:15:40,220 --> 00:15:43,910 I'm going to pass two thousand milliseconds or that is two seconds. 246 00:15:44,240 --> 00:15:48,610 But last time, what I didn't show you is that we can put the message straight to here. 247 00:15:48,830 --> 00:15:56,120 So I'm going to see number one resolve in two seconds. 248 00:15:56,690 --> 00:15:57,080 Good. 249 00:15:57,830 --> 00:15:59,780 So we can pass the message to. 250 00:16:00,910 --> 00:16:09,490 Resolve like this, OK, semicolon there, copy this one one more time. 251 00:16:10,190 --> 00:16:12,370 Actually, we're going to make three four. 252 00:16:12,370 --> 00:16:12,730 Sorry. 253 00:16:13,060 --> 00:16:13,860 So that's due. 254 00:16:14,320 --> 00:16:18,000 This is three and this is number four. 255 00:16:18,400 --> 00:16:20,380 What we're going to change in number to. 256 00:16:21,450 --> 00:16:27,370 We're going to change this to four thousand milliseconds or that is equal to four seconds, right? 257 00:16:27,690 --> 00:16:29,220 This will be how much? 258 00:16:29,490 --> 00:16:30,210 Three thousand. 259 00:16:30,480 --> 00:16:31,410 Something in the middle. 260 00:16:31,710 --> 00:16:33,300 And this should be two as well. 261 00:16:34,230 --> 00:16:35,860 Two, three. 262 00:16:36,330 --> 00:16:37,920 And this will be three. 263 00:16:38,250 --> 00:16:41,490 And the last one will be five thousand milliseconds. 264 00:16:41,640 --> 00:16:43,650 Longest five seconds. 265 00:16:44,010 --> 00:16:46,260 Make sure that you change this to four. 266 00:16:47,250 --> 00:16:49,110 OK, now. 267 00:16:50,370 --> 00:16:57,120 This will show that everything is working asynchronously with promises, so without blocking any code, 268 00:16:57,120 --> 00:17:04,190 because they're waiting to get resolved, rejected, whatever, because we have four in all of them, 269 00:17:04,440 --> 00:17:07,200 they will get resolved in a different time frame. 270 00:17:07,500 --> 00:17:11,020 See, here I have two seconds, four, three, five seconds. 271 00:17:11,430 --> 00:17:14,310 The quickest is to the longest is five seconds. 272 00:17:14,460 --> 00:17:14,830 Right. 273 00:17:15,150 --> 00:17:16,380 So we have a different zoom. 274 00:17:17,490 --> 00:17:23,550 So someone above you now is saying, oh, my God, we need to you need to create so many dents now. 275 00:17:23,550 --> 00:17:25,320 And it's going to be boring now. 276 00:17:26,270 --> 00:17:31,190 I'm just going to call it here, async example, right? 277 00:17:32,300 --> 00:17:36,550 OK, now I'm going to use something else. 278 00:17:36,890 --> 00:17:43,970 I'm going to use something called promise, not all and promise that all is taking an array of multiple 279 00:17:43,970 --> 00:17:44,510 promises. 280 00:17:44,900 --> 00:17:46,760 Let's do this promise. 281 00:17:47,810 --> 00:17:57,480 Let's save this into a variable call or promise that all and this is taking an array of promises. 282 00:17:57,500 --> 00:17:59,650 This is promise that all is iterable. 283 00:17:59,660 --> 00:18:03,870 It is very useful for multiple requests from a different source. 284 00:18:03,950 --> 00:18:08,750 So I'm going to say here, promise, I'm going to put even the first promise. 285 00:18:08,870 --> 00:18:10,180 Why not new. 286 00:18:11,730 --> 00:18:12,530 You promise. 287 00:18:13,100 --> 00:18:14,270 New promise to. 288 00:18:16,210 --> 00:18:21,670 And you promised three new promise for now. 289 00:18:23,250 --> 00:18:26,100 What I can do here, let me just show it to you. 290 00:18:27,440 --> 00:18:29,030 I can comment on this one. 291 00:18:30,070 --> 00:18:31,990 Because that will produce on. 292 00:18:33,350 --> 00:18:35,780 Actually, we can just get rid of this problem, is there? 293 00:18:36,870 --> 00:18:41,310 Right, so you can have this one as well now. 294 00:18:42,680 --> 00:18:51,570 We are not stopping there, so so here promise that all it takes an array of multiple promises, but 295 00:18:51,570 --> 00:18:53,760 now we need to use that then method. 296 00:18:55,690 --> 00:19:02,950 And these that then method will run the results, so here are the results that will be returning it 297 00:19:03,070 --> 00:19:04,570 again as a moderate. 298 00:19:04,810 --> 00:19:08,440 Right, in which is going to console lock the output. 299 00:19:10,880 --> 00:19:13,320 Results very good. 300 00:19:14,750 --> 00:19:17,240 Save it, let's go back here. 301 00:19:18,500 --> 00:19:20,030 Let's wait for a couple of seconds. 302 00:19:21,140 --> 00:19:22,060 And there you go. 303 00:19:23,020 --> 00:19:25,360 So how many seconds think we waited? 304 00:19:26,200 --> 00:19:28,090 OK, let's make this smaller. 305 00:19:29,970 --> 00:19:36,960 Let's save it one more time, one, two, three, four, five. 306 00:19:38,050 --> 00:19:38,710 There you go. 307 00:19:38,740 --> 00:19:40,690 We waited five seconds, why? 308 00:19:40,700 --> 00:19:44,920 Because the longest was five longest promise. 309 00:19:45,640 --> 00:19:48,400 It took five seconds to be resolved. 310 00:19:48,970 --> 00:19:52,930 And that's why all of these were waiting. 311 00:19:53,940 --> 00:19:55,830 Before this promise finished. 312 00:19:55,980 --> 00:20:02,430 OK, so again, you don't see this is non blocking the rest of the code. 313 00:20:02,730 --> 00:20:06,020 Well, I'm just going to show you that that's the case. 314 00:20:06,030 --> 00:20:19,200 I'm going to say a look here, template literals, if this line of code is printed before the four promises. 315 00:20:22,490 --> 00:20:29,300 Then this is async, non blocking. 316 00:20:30,530 --> 00:20:30,790 Coat. 317 00:20:31,700 --> 00:20:37,150 OK, save it there, so I'm going to save it in case there you go. 318 00:20:37,160 --> 00:20:42,860 If this line of code is printed before the four promises, then you have the promises. 319 00:20:43,490 --> 00:20:47,480 Now you see the power of asynchronous programming. 320 00:20:47,600 --> 00:20:52,520 The asynchronous programming allow us to continue with our lives, to continue with the rest of the 321 00:20:52,520 --> 00:20:55,400 code while something else is waiting there. 322 00:20:56,150 --> 00:20:56,780 Nice. 323 00:20:57,870 --> 00:21:04,980 So why it took five seconds while because one of the promises we'll need, we said that time out to 324 00:21:04,980 --> 00:21:06,070 be five seconds, right? 325 00:21:06,210 --> 00:21:10,270 So you don't said more than five seconds or because you don't want to wait. 326 00:21:10,420 --> 00:21:13,110 No, that's pretty much it. 327 00:21:13,410 --> 00:21:16,430 So now you know what asynchronous is in reality. 328 00:21:17,100 --> 00:21:20,240 So I hope this clears all your doubts. 329 00:21:20,850 --> 00:21:26,340 Now we need to do another real usage of promise. 330 00:21:27,450 --> 00:21:33,570 Before that, let's talk about that request, some of you probably have questions about a previous Thach 331 00:21:33,570 --> 00:21:36,230 Ajax call we did in the previous lecture. 332 00:21:36,240 --> 00:21:41,430 So let's repeat that and hopefully this will make sense because we haven't covered promises back then. 333 00:21:41,460 --> 00:21:43,180 OK, nice. 334 00:21:44,370 --> 00:21:45,300 So fetch. 335 00:21:47,150 --> 00:21:50,930 Now, let me just open here, Jason, please. 336 00:21:52,280 --> 00:21:56,510 Jason Placeholder, here it is on yeah. 337 00:21:56,630 --> 00:21:57,320 The users. 338 00:21:57,410 --> 00:21:58,730 I'm going to grab the users again. 339 00:21:58,880 --> 00:22:00,340 So I need this URL, by the way. 340 00:22:00,350 --> 00:22:00,670 Right. 341 00:22:00,830 --> 00:22:02,450 But if you have it, don't worry about it. 342 00:22:03,140 --> 00:22:09,350 Now, fetch you are let me just write the entire thing down and I'm going to say that then. 343 00:22:10,490 --> 00:22:11,660 So why are we using them? 344 00:22:11,690 --> 00:22:15,820 Well, because this return a promise and now we know how to consumer promise. 345 00:22:16,000 --> 00:22:17,140 Oh, that's another word. 346 00:22:17,330 --> 00:22:19,010 So you need to consume the promise. 347 00:22:19,010 --> 00:22:19,290 Right. 348 00:22:19,850 --> 00:22:20,990 So response. 349 00:22:24,840 --> 00:22:36,710 Response that Jason, now a lot of you guys probably didn't understand what that that Jason does mean 350 00:22:36,720 --> 00:22:41,850 to the first time I saw it, it took me a time to think about. 351 00:22:43,740 --> 00:22:44,940 OK, let's save it. 352 00:22:46,080 --> 00:22:46,810 And there you go. 353 00:22:46,980 --> 00:22:55,950 Everything is working because I do have the 10 users from Jason Placeholder placeholder type code. 354 00:22:55,950 --> 00:22:56,250 Right. 355 00:22:57,140 --> 00:23:03,960 OK, now here we are fetching a Jason file across the network. 356 00:23:03,970 --> 00:23:05,640 Why and how do I know? 357 00:23:05,850 --> 00:23:08,670 Well, if I just copied the entire URL. 358 00:23:10,420 --> 00:23:11,320 Basted their. 359 00:23:12,620 --> 00:23:20,650 There I have this, Jason, so we have Jason file across the network and bringing in the council, right. 360 00:23:20,660 --> 00:23:22,710 These two parts are very easy for you. 361 00:23:22,710 --> 00:23:24,640 You understand him, right? 362 00:23:25,750 --> 00:23:31,060 So this this is the simplest used of the fetch, it takes one argument, this is one argument. 363 00:23:31,300 --> 00:23:35,520 The fetch can takes other arguments as well, but don't need to worry about that. 364 00:23:35,710 --> 00:23:42,010 So it takes one argument and that is the you are out to where this file is located, right to somewhere 365 00:23:42,010 --> 00:23:42,660 in the server. 366 00:23:43,120 --> 00:23:49,450 So it gives us the path to that resource we want to fetch and returns a promise now. 367 00:23:51,830 --> 00:23:56,330 If you do inspect it here, if you do go console, put it there. 368 00:23:57,410 --> 00:23:58,070 There you go. 369 00:23:58,160 --> 00:23:59,440 The promise is spending. 370 00:23:59,750 --> 00:24:00,870 That's the status. 371 00:24:01,730 --> 00:24:05,960 OK, now this returns a promised back to us. 372 00:24:06,830 --> 00:24:09,350 So the fetch method returns a promise. 373 00:24:09,710 --> 00:24:13,610 And this is, by the way, a response object. 374 00:24:14,550 --> 00:24:14,940 All right. 375 00:24:15,980 --> 00:24:24,530 So this is a response object and why we use that then and then we use. 376 00:24:26,130 --> 00:24:27,210 Responds that Jason. 377 00:24:28,260 --> 00:24:40,440 Well, now, if we just copied these two lines here, clear it, refresh it pasted back there, now 378 00:24:40,590 --> 00:24:45,240 you will see that I have the promised result as an array of 10. 379 00:24:45,960 --> 00:24:54,330 So to extract the Jason body content from the response to this content here from this response, because 380 00:24:54,330 --> 00:24:56,700 it's still in the promised. 381 00:24:56,700 --> 00:24:57,000 Right. 382 00:24:57,300 --> 00:24:58,170 In order to. 383 00:24:59,160 --> 00:25:02,980 Extract the Jassam body content from the response. 384 00:25:03,060 --> 00:25:06,540 What you need to do is to use JSON method. 385 00:25:07,510 --> 00:25:07,900 Right. 386 00:25:08,080 --> 00:25:15,990 So that is defined by its allowing us to use that jasen method to get it, and after that I'm just concealing 387 00:25:16,000 --> 00:25:16,840 lot of the data. 388 00:25:17,020 --> 00:25:19,900 And that's why when you see the full picture now. 389 00:25:22,590 --> 00:25:23,140 There you go. 390 00:25:23,160 --> 00:25:32,640 You do have access to the data, right, because this it gives you a back, a promise in how you resolving 391 00:25:32,640 --> 00:25:37,580 another promise, another dot then and then you can have access to the data. 392 00:25:37,800 --> 00:25:48,360 But this response that Jason, because these promise returns, hopes, returns, response object and 393 00:25:48,360 --> 00:25:53,930 in that response object, we need to extract the Jason body content and from that response. 394 00:25:53,940 --> 00:25:55,520 And that's why we can use the Jason. 395 00:25:55,540 --> 00:25:56,450 That's OK. 396 00:25:56,790 --> 00:25:58,470 Now you understand. 397 00:25:59,480 --> 00:26:01,520 The whole thing, right? 398 00:26:02,740 --> 00:26:03,320 Very good. 399 00:26:04,120 --> 00:26:07,150 So that is the. 400 00:26:09,620 --> 00:26:13,280 That mattered to. 401 00:26:15,220 --> 00:26:16,280 You are all right. 402 00:26:16,540 --> 00:26:23,650 So we use this in future, this Jason Placeholder is not working, I'm not sure, but it should work 403 00:26:23,650 --> 00:26:24,970 because it's four years there. 404 00:26:24,970 --> 00:26:26,230 And I hope I'm not that 405 00:26:28,930 --> 00:26:31,430 I hope that it will stay like this forever. 406 00:26:31,450 --> 00:26:35,340 I mean, just because I don't want to change the whole lecture because it's not going to work this year. 407 00:26:35,760 --> 00:26:37,510 OK, that's pretty much it. 408 00:26:37,630 --> 00:26:41,490 But if it's not, you can still watch it and see what I'm doing in there. 409 00:26:41,650 --> 00:26:45,430 Pretty much restful APIs, free restful apps out there. 410 00:26:45,430 --> 00:26:48,040 And you can use them now. 411 00:26:49,320 --> 00:26:55,590 Let's create something more even interesting, though, I want you to go back to this Jason Placeholder 412 00:26:55,890 --> 00:27:04,950 here and just scroll to where so Jason plays all that that dot dotcom and we're going to grab the photos, 413 00:27:04,950 --> 00:27:06,520 users and albums. 414 00:27:06,540 --> 00:27:11,560 OK, now I'm going to comment at this point because I don't want to see that apple. 415 00:27:11,590 --> 00:27:17,280 So what I'm going to do, I'm going to create Const. Jason list. 416 00:27:17,460 --> 00:27:25,380 So I'm going to create a list of your URLs and I'm going to grab this URL and we are going to grab the 417 00:27:25,380 --> 00:27:26,460 users first. 418 00:27:27,090 --> 00:27:28,680 Then we're going to grab the. 419 00:27:29,960 --> 00:27:30,370 Oops. 420 00:27:31,480 --> 00:27:36,610 Boasts an album, Suwat. 421 00:27:41,980 --> 00:27:42,610 Very good. 422 00:27:42,950 --> 00:27:45,230 Now, we don't need this part anymore. 423 00:27:45,250 --> 00:27:46,510 I'm just going to zoom in here. 424 00:27:47,750 --> 00:27:52,220 So because we have a list here of you or else we can use Promesa all. 425 00:27:53,370 --> 00:27:58,500 Instead of creating three different promises, I'm going to use promises that, oh, right, and the 426 00:27:58,500 --> 00:28:06,270 promises are all now because I have this list, I can use something like Map Method so I can loop through 427 00:28:06,270 --> 00:28:12,120 this or iterate through these links here and then use them. 428 00:28:12,150 --> 00:28:13,320 So how are we going to do this? 429 00:28:13,440 --> 00:28:18,690 So promise that all and Jason lists that map method. 430 00:28:18,720 --> 00:28:22,770 So let me just type in real quick, so I'm going to see your URL. 431 00:28:26,080 --> 00:28:26,750 Very good. 432 00:28:27,070 --> 00:28:35,890 Now inside, I'm going to return sorry, fetch, then I'm going to see you around then. 433 00:28:37,060 --> 00:28:45,040 Now responds, you already know about this part because I already explained similar to this right response. 434 00:28:45,710 --> 00:28:46,110 Oops. 435 00:28:47,880 --> 00:28:51,620 That Jason, very good, so we can use that method there. 436 00:28:52,630 --> 00:28:55,480 And that is pretty much it now outside of this. 437 00:28:55,520 --> 00:28:59,710 I want to use the den method, Siddharta. 438 00:29:02,230 --> 00:29:07,210 And now you're going to pretty much be confused here, but let me just do it like this. 439 00:29:07,210 --> 00:29:08,310 So date of zero. 440 00:29:08,710 --> 00:29:11,770 So while I'm using date of zero. 441 00:29:12,280 --> 00:29:13,840 Data of one. 442 00:29:14,230 --> 00:29:15,120 Date of three. 443 00:29:15,160 --> 00:29:15,640 Right. 444 00:29:15,670 --> 00:29:16,810 So actually off to. 445 00:29:19,310 --> 00:29:20,330 At the end. 446 00:29:21,630 --> 00:29:29,220 I'm just going to put the catch and I'm going to see here, OK, if I do have some error, I want to 447 00:29:29,220 --> 00:29:30,150 be catched. 448 00:29:30,420 --> 00:29:36,340 So cancel cancel that log and I'm going to say the error there. 449 00:29:36,420 --> 00:29:39,640 OK, now what is happening here? 450 00:29:40,560 --> 00:29:41,460 So we have. 451 00:29:43,090 --> 00:29:48,790 And or with three different links, so I can use promise that, oh, instead of creating three separate 452 00:29:48,790 --> 00:29:56,570 promises right now inside, we can use the map method because we want to loop through each individual 453 00:29:56,620 --> 00:30:05,670 in here from our Jason list right now instead of u r l just type in something else. 454 00:30:05,680 --> 00:30:06,390 It's not going to work. 455 00:30:06,610 --> 00:30:07,930 It was not going to work like that. 456 00:30:08,000 --> 00:30:11,740 OK, so I put a here URL because. 457 00:30:12,680 --> 00:30:20,630 In each direction I'm accessing this, a single URL, the first time that I do through the map method 458 00:30:20,630 --> 00:30:23,510 that iterate through getting this first element. 459 00:30:23,720 --> 00:30:26,060 So remember, we use element or a current element. 460 00:30:26,060 --> 00:30:27,260 You can do that as well. 461 00:30:27,560 --> 00:30:32,450 It's not going to change, but it's more logical because we are extracting in every iteration we are 462 00:30:32,540 --> 00:30:34,810 having access to the current euro. 463 00:30:34,910 --> 00:30:35,250 Right. 464 00:30:35,390 --> 00:30:36,620 So you can see current euro. 465 00:30:36,650 --> 00:30:37,380 Now, that's good. 466 00:30:37,940 --> 00:30:39,710 So then we use FEG. 467 00:30:40,800 --> 00:30:44,900 And in the fetch, there was a requirement to specify the euro, right? 468 00:30:46,330 --> 00:30:51,400 So that's why we've just putting the euro that it's in the current Loopt. 469 00:30:52,920 --> 00:30:56,880 And so we can able to patch that data with this aging skull. 470 00:30:56,910 --> 00:31:00,570 Now this will return a promise for every Leupp we make. 471 00:31:00,840 --> 00:31:02,630 So let me show it to you now. 472 00:31:02,640 --> 00:31:03,530 Copy this one. 473 00:31:04,710 --> 00:31:05,520 Go back here. 474 00:31:05,670 --> 00:31:08,360 You can just you don't need to go there. 475 00:31:09,330 --> 00:31:09,820 Here. 476 00:31:09,940 --> 00:31:10,400 Oops. 477 00:31:10,410 --> 00:31:11,490 Something happened, right? 478 00:31:12,240 --> 00:31:12,560 Good. 479 00:31:12,570 --> 00:31:16,750 But you can just expect to hear it will work anywhere. 480 00:31:17,340 --> 00:31:18,840 So hit enter. 481 00:31:19,140 --> 00:31:23,340 And yet Jason Ellis is not defined great because. 482 00:31:23,970 --> 00:31:25,770 So make sure that you refresh this one. 483 00:31:26,610 --> 00:31:29,310 It now you're going to have a promise. 484 00:31:29,550 --> 00:31:34,020 And inside the promise, the result is three arrays, so zero one in two. 485 00:31:34,530 --> 00:31:41,130 And that's why outside this I can access this each promise by using that. 486 00:31:41,130 --> 00:31:45,690 Then in the data I'm just constantly the date of zero one and two. 487 00:31:46,350 --> 00:31:53,790 So that's why we use that then outside, because we this will return three promises to us and we want 488 00:31:53,940 --> 00:31:56,470 that data for each array. 489 00:31:56,970 --> 00:32:03,020 Right now, this is a perfect example of using promises in async JavaScript. 490 00:32:03,480 --> 00:32:04,080 Save it. 491 00:32:04,980 --> 00:32:07,200 Go back here and there you go. 492 00:32:07,230 --> 00:32:07,890 This is the result. 493 00:32:07,900 --> 00:32:09,920 This is the for the users. 494 00:32:10,170 --> 00:32:11,930 This is the result from the post. 495 00:32:12,780 --> 00:32:17,890 We have 100 too much and then we have albums, 100 albums. 496 00:32:18,600 --> 00:32:19,780 There you go. 497 00:32:20,130 --> 00:32:26,460 So I hope you see the power of promises in JavaScript and. 498 00:32:26,700 --> 00:32:27,810 Yeah, that's it. 499 00:32:28,320 --> 00:32:37,380 So there is also a couple of things new about promises in the next ECMAScript, but we're going to talk 500 00:32:37,380 --> 00:32:38,300 about them later. 501 00:32:38,700 --> 00:32:44,610 And now you understand how powerful these couple of lectures are about the Jason, about the Ajax's. 502 00:32:45,210 --> 00:32:47,250 So we can fetch this right. 503 00:32:47,700 --> 00:32:49,170 About these promises. 504 00:32:49,710 --> 00:32:52,870 And also we did a callback, so you need to understand. 505 00:32:53,130 --> 00:32:55,310 So that's why the callbacks were important. 506 00:32:55,470 --> 00:32:59,030 The promises are very easy to do compared to the callbacks. 507 00:32:59,040 --> 00:32:59,280 Right. 508 00:33:00,600 --> 00:33:02,940 So in future, we will do a async. 509 00:33:02,940 --> 00:33:05,790 Oh, wait, don't worry about it, but that will be even more interesting. 510 00:33:05,820 --> 00:33:06,540 So stay with me. 511 00:33:06,780 --> 00:33:09,150 Make sure that you do the exercise for this lecture. 512 00:33:09,690 --> 00:33:14,880 They are very interesting and there is no exercise for probably there is no exercise for the other lectures. 513 00:33:14,880 --> 00:33:17,510 But this one should be interesting for you. 514 00:33:17,800 --> 00:33:18,050 Right. 515 00:33:19,140 --> 00:33:20,310 Thank you very much. 516 00:33:20,310 --> 00:33:22,800 And I will see you in the next one.