Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,360 --> 00:00:03,570 So at this point of the section, 2 2 00:00:03,570 --> 00:00:06,340 you know all about consuming promises 3 3 00:00:06,340 --> 00:00:10,130 but we have never actually built our own promise. 4 4 00:00:10,130 --> 00:00:12,633 And so let's do that in this lecture. 5 5 00:00:14,360 --> 00:00:18,750 And let's go back to our lottery example from the slides 6 6 00:00:18,750 --> 00:00:21,290 and basically simulate a lottery 7 7 00:00:21,290 --> 00:00:23,280 using a promise here. 8 8 00:00:23,280 --> 00:00:26,000 And remember that in that example, 9 9 00:00:26,000 --> 00:00:29,370 a fulfilled promise means to win the lottery 10 10 00:00:29,370 --> 00:00:32,840 while a rejected promise means to lose. 11 11 00:00:32,840 --> 00:00:34,710 So let's get to work 12 12 00:00:34,710 --> 00:00:39,470 and we create a new promise using the promise constructor. 13 13 00:00:39,470 --> 00:00:43,460 So that's new promise like this. 14 14 00:00:43,460 --> 00:00:46,560 So just like many other built-in objects. 15 15 00:00:46,560 --> 00:00:49,560 And so what this means is that promises 16 16 00:00:49,560 --> 00:00:54,560 are essentially just a special kind of object in JavaScript. 17 17 00:00:54,780 --> 00:00:59,270 Now the promise constructor takes exactly one argument 18 18 00:00:59,270 --> 00:01:02,163 and that is the so-called executor function. 19 19 00:01:04,550 --> 00:01:07,253 So we need to pass in a function here. 20 20 00:01:08,150 --> 00:01:11,690 And so again, this one is called executor. 21 21 00:01:11,690 --> 00:01:14,980 Now, as soon as the promise constructor runs, 22 22 00:01:14,980 --> 00:01:19,180 it will automatically execute this executor function 23 23 00:01:19,180 --> 00:01:20,530 that we pass in. 24 24 00:01:20,530 --> 00:01:23,620 And as it executes this function here, 25 25 00:01:23,620 --> 00:01:27,420 it will do so by passing in two other arguments. 26 26 00:01:27,420 --> 00:01:32,420 And those arguments are the resolve and reject functions. 27 27 00:01:34,030 --> 00:01:36,903 So reject like this. 28 28 00:01:37,800 --> 00:01:40,270 So we will use them here in a second, 29 29 00:01:40,270 --> 00:01:43,963 but for now let's actually build this executor function. 30 30 00:01:45,030 --> 00:01:48,400 And also we should probably store the result. 31 31 00:01:48,400 --> 00:01:51,373 So this new promise in some variable, 32 32 00:01:52,410 --> 00:01:55,003 so lottery promise. 33 33 00:01:57,340 --> 00:01:59,850 All of this here we'll create a new promise 34 34 00:01:59,850 --> 00:02:02,720 that we're gonna store into this variable. 35 35 00:02:02,720 --> 00:02:05,590 So it's just like, for example, the fetch function, 36 36 00:02:05,590 --> 00:02:07,763 which also creates a new promise. 37 37 00:02:08,610 --> 00:02:12,340 Now this executor function that we specified here 38 38 00:02:12,340 --> 00:02:16,200 is the function which will contain the asynchronous behavior 39 39 00:02:16,200 --> 00:02:19,000 that we're trying to handle with the promise. 40 40 00:02:19,000 --> 00:02:20,760 So this executor function 41 41 00:02:20,760 --> 00:02:24,290 should eventually produce a result value. 42 42 00:02:24,290 --> 00:02:26,070 So the value that's basically 43 43 00:02:26,070 --> 00:02:29,440 gonna be the future value of the promise. 44 44 00:02:29,440 --> 00:02:31,410 And so let's do exactly that 45 45 00:02:31,410 --> 00:02:33,780 right here in the executor function 46 46 00:02:33,780 --> 00:02:36,940 and starting with a simplified version. 47 47 00:02:36,940 --> 00:02:39,200 Now, in our lottery example, 48 48 00:02:39,200 --> 00:02:43,760 let's say that we actually win in 50% of the cases 49 49 00:02:43,760 --> 00:02:46,810 and to lose in the other 50%. 50 50 00:02:46,810 --> 00:02:49,170 So a very simplified example, 51 51 00:02:49,170 --> 00:02:51,990 just to make this a bit more fun. 52 52 00:02:51,990 --> 00:02:53,020 And so what I'm gonna do 53 53 00:02:53,020 --> 00:02:55,750 is to simply generate a random number 54 54 00:02:55,750 --> 00:02:59,840 which remember is gonna be between zero and one. 55 55 00:02:59,840 --> 00:03:01,380 And so I can simply say, 56 56 00:03:01,380 --> 00:03:05,633 if this number here is greater or equal than 0.5, 57 57 00:03:07,320 --> 00:03:11,450 then I want to call the resolve function. 58 58 00:03:11,450 --> 00:03:14,820 And so now this is where this resolve function 59 59 00:03:14,820 --> 00:03:19,023 that was passed into the executor function comes into play. 60 60 00:03:22,182 --> 00:03:23,500 In this situation here, 61 61 00:03:23,500 --> 00:03:26,020 we say that we win the lottery. 62 62 00:03:26,020 --> 00:03:29,790 And so therefore that means a fulfilled promise. 63 63 00:03:29,790 --> 00:03:33,250 And in order to set the promise as fulfilled, 64 64 00:03:33,250 --> 00:03:36,000 we use the resolve function. 65 65 00:03:36,000 --> 00:03:39,010 So basically calling the resolve function like this, 66 66 00:03:39,010 --> 00:03:42,800 will Mark this promise as a fulfilled promise, 67 67 00:03:42,800 --> 00:03:45,920 which we can also say a resolved promise. 68 68 00:03:45,920 --> 00:03:48,000 And that's the reason why this method here 69 69 00:03:48,000 --> 00:03:49,970 is called resolve. 70 70 00:03:49,970 --> 00:03:52,110 Now into the resolved function here 71 71 00:03:52,110 --> 00:03:55,440 we pass the fulfilled value of the promise 72 72 00:03:55,440 --> 00:03:59,433 so that it can later be consumed with the den method. 73 73 00:04:00,872 --> 00:04:02,310 So of course we are going to handle 74 74 00:04:02,310 --> 00:04:03,980 the results of this promise 75 75 00:04:03,980 --> 00:04:08,500 just like we handled any other promise with the den method. 76 76 00:04:08,500 --> 00:04:11,260 So again, whatever value we pass 77 77 00:04:11,260 --> 00:04:13,300 into the resolve function here 78 78 00:04:13,300 --> 00:04:15,693 is gonna be the result of the promise 79 79 00:04:15,693 --> 00:04:19,360 that will be available in the den handler. 80 80 00:04:19,360 --> 00:04:24,360 And so in this case, let's simply pass in a string here 81 81 00:04:24,520 --> 00:04:29,520 and let's use some emoji again to make it a bit more fun. 82 82 00:04:30,650 --> 00:04:33,650 And so now let's handle the opposite case. 83 83 00:04:33,650 --> 00:04:38,630 So where we basically want to Mark this promise as rejected. 84 84 00:04:38,630 --> 00:04:41,040 And so, as you can imagine for that 85 85 00:04:41,040 --> 00:04:44,690 we can call the reject function. 86 86 00:04:44,690 --> 00:04:46,570 Then into the reject function, 87 87 00:04:46,570 --> 00:04:48,440 we pass in the error message 88 88 00:04:48,440 --> 00:04:52,060 that we later want to be able in the catch handler, 89 89 00:04:52,060 --> 00:04:53,423 so in the catch method. 90 90 00:04:56,550 --> 00:05:00,100 So here, let's just say you lost your money 91 91 00:05:00,980 --> 00:05:04,473 and then just some poop emoji. 92 92 00:05:07,610 --> 00:05:09,833 So give this a safe here. 93 93 00:05:11,310 --> 00:05:15,010 So just to quickly recap, before we consume this promise 94 94 00:05:15,010 --> 00:05:17,970 here, we created an executor function 95 95 00:05:17,970 --> 00:05:21,600 which is gonna be called by this promise constructor 96 96 00:05:21,600 --> 00:05:23,540 as soon as it runs, 97 97 00:05:23,540 --> 00:05:25,083 so basically immediately. 98 98 00:05:26,710 --> 00:05:29,330 Then the promise calls this function 99 99 00:05:29,330 --> 00:05:32,930 and passes in the resolve and the reject functions 100 100 00:05:32,930 --> 00:05:34,920 so that we can then use them 101 101 00:05:34,920 --> 00:05:39,810 to mark the promise as either resolved so as fulfilled 102 102 00:05:39,810 --> 00:05:42,020 or as to rejected. 103 103 00:05:42,020 --> 00:05:44,020 And so you see that this promise 104 104 00:05:44,020 --> 00:05:46,720 is eventually going to move to either 105 105 00:05:46,720 --> 00:05:50,470 the fulfilled state or the rejected state. 106 106 00:05:50,470 --> 00:05:53,560 So we always need to make sure that the promise ends up 107 107 00:05:53,560 --> 00:05:55,423 in one of these two states. 108 108 00:05:57,314 --> 00:05:59,760 And so now it's time to actually try this out 109 109 00:05:59,760 --> 00:06:02,563 by consuming this promise that we just built. 110 110 00:06:05,060 --> 00:06:06,500 So lottery promise 111 111 00:06:06,500 --> 00:06:10,040 is going to be a promise object at this point. 112 112 00:06:10,040 --> 00:06:11,530 And so then as always, 113 113 00:06:11,530 --> 00:06:14,600 we can call the den method, 114 114 00:06:14,600 --> 00:06:16,360 and then just like before 115 115 00:06:16,360 --> 00:06:19,350 the den method needs a callback function 116 116 00:06:19,350 --> 00:06:20,690 that is going to be called 117 117 00:06:20,690 --> 00:06:24,110 with the resolved value of the promise. 118 118 00:06:24,110 --> 00:06:26,020 So that's call this res here 119 119 00:06:27,490 --> 00:06:30,513 and then let's simply log it to the console. 120 120 00:06:32,120 --> 00:06:35,643 And of course, once again, this could be any name here. 121 121 00:06:38,470 --> 00:06:40,973 And now let's also catch any errors, 122 122 00:06:43,440 --> 00:06:46,060 then so here also as always, 123 123 00:06:46,060 --> 00:06:49,863 we will simply log it to the console as an error. 124 124 00:06:52,413 --> 00:06:55,360 Now, so that's actually it already. 125 125 00:06:55,360 --> 00:06:59,950 So what do you think this res value here is going to be, 126 126 00:06:59,950 --> 00:07:02,270 or this error is going to be. 127 127 00:07:02,270 --> 00:07:05,190 Well, as I just explained before 128 128 00:07:05,190 --> 00:07:07,740 the resolved value of the promise 129 129 00:07:07,740 --> 00:07:11,500 is going to be this one that we pass in here. 130 130 00:07:11,500 --> 00:07:13,990 And so therefore the value that we're gonna log 131 131 00:07:13,990 --> 00:07:16,630 in the case that the promise is successful 132 132 00:07:16,630 --> 00:07:19,290 is going to be exactly this string 133 133 00:07:19,290 --> 00:07:21,587 that we passed into the result function 134 134 00:07:21,587 --> 00:07:24,240 and the same is to with the error. 135 135 00:07:24,240 --> 00:07:28,330 So the error here is going to be simply this one 136 136 00:07:28,330 --> 00:07:30,750 because that's the string that we passed 137 137 00:07:30,750 --> 00:07:32,893 into the reject function. 138 138 00:07:34,530 --> 00:07:38,550 So let's see and indeed we get or error, 139 139 00:07:38,550 --> 00:07:40,093 so you lost your money. 140 140 00:07:41,040 --> 00:07:42,800 And so as we keep reloading, 141 141 00:07:42,800 --> 00:07:45,160 we should then see these different states 142 142 00:07:45,160 --> 00:07:48,823 according to this random number that was generated here. 143 143 00:07:50,180 --> 00:07:52,363 Great, so now we won. 144 144 00:07:53,670 --> 00:07:55,320 And so as we keep doing this, 145 145 00:07:55,320 --> 00:07:59,600 we can see the different States that the promise will take. 146 146 00:07:59,600 --> 00:08:03,750 So that's amazing but however, right now 147 147 00:08:03,750 --> 00:08:06,023 this is not really asynchronous yet. 148 148 00:08:07,350 --> 00:08:10,500 So let's actually simulate this lottery draw 149 149 00:08:10,500 --> 00:08:12,550 by adding a simple timer. 150 150 00:08:12,550 --> 00:08:15,080 And so this timer will then simulate 151 151 00:08:15,080 --> 00:08:18,810 the time data is passed between buying the lottery ticket 152 152 00:08:18,810 --> 00:08:21,510 and actually getting the result. 153 153 00:08:21,510 --> 00:08:23,963 So let's add a set time out here. 154 154 00:08:28,330 --> 00:08:30,830 So with a simple callback function 155 155 00:08:30,830 --> 00:08:33,770 and let's run it for two seconds 156 156 00:08:33,770 --> 00:08:38,343 and here we will simply take this code and put it here. 157 157 00:08:39,180 --> 00:08:42,120 And then we can also immediately lock something 158 158 00:08:42,120 --> 00:08:47,120 to the console, like a lottery draw is happening, 159 159 00:08:50,240 --> 00:08:52,803 and then let's add like a crystal ball here. 160 160 00:08:54,400 --> 00:08:57,663 So that's exactly also what we had in the slides. 161 161 00:09:00,020 --> 00:09:02,200 And now another thing that we can do 162 162 00:09:02,200 --> 00:09:05,590 is to, instead of passing just a string here, 163 163 00:09:05,590 --> 00:09:08,410 we can also create a new error object. 164 164 00:09:08,410 --> 00:09:10,533 So basically creating a real error, 165 165 00:09:11,650 --> 00:09:13,823 and so that's a little bit better. 166 166 00:09:16,580 --> 00:09:18,290 So just like this. 167 167 00:09:18,290 --> 00:09:19,150 And so with this, 168 168 00:09:19,150 --> 00:09:21,430 we made this whole promise here 169 169 00:09:21,430 --> 00:09:23,350 make a little bit more sense 170 170 00:09:23,350 --> 00:09:25,470 because now by using this timer, 171 171 00:09:25,470 --> 00:09:29,520 we did actually encapsulate some asynchronous behavior 172 172 00:09:29,520 --> 00:09:31,275 into this promise. 173 173 00:09:31,275 --> 00:09:33,190 And so that's the whole point of promises 174 174 00:09:33,190 --> 00:09:34,313 in the first place. 175 175 00:09:35,870 --> 00:09:38,820 So let's give it a safe to see what happens. 176 176 00:09:38,820 --> 00:09:41,010 So immediately we get this year 177 177 00:09:41,010 --> 00:09:45,240 and then after two seconds the promise was resolved. 178 178 00:09:45,240 --> 00:09:48,440 And so then here we handled that result 179 179 00:09:48,440 --> 00:09:50,023 and logged it to the console. 180 180 00:09:51,190 --> 00:09:52,450 Let's try again, 181 181 00:09:52,450 --> 00:09:55,400 and of course, again, this one comes immediately 182 182 00:09:56,350 --> 00:09:57,550 and we win again. 183 183 00:09:57,550 --> 00:09:59,033 Let's see if we can lose, 184 184 00:10:00,020 --> 00:10:03,490 and apparently we can only ever win. 185 185 00:10:03,490 --> 00:10:04,833 Nah, but here you go. 186 186 00:10:05,710 --> 00:10:09,840 So now we get the error message just like before 187 187 00:10:09,840 --> 00:10:12,570 but we also now see there is an error, 188 188 00:10:12,570 --> 00:10:15,820 and it also tells us where this error is coming from. 189 189 00:10:15,820 --> 00:10:17,663 So right at line two, nine two, 190 190 00:10:18,830 --> 00:10:20,780 so that's right here. 191 191 00:10:20,780 --> 00:10:25,150 And so indeed actually creating a new error object 192 192 00:10:25,150 --> 00:10:27,590 is actually a bit better. 193 193 00:10:27,590 --> 00:10:30,450 Great, so this is how we encapsulate 194 194 00:10:30,450 --> 00:10:34,030 any asynchronous behavior into a promise. 195 195 00:10:34,030 --> 00:10:38,020 So how we abstracted away in a very nice way, 196 196 00:10:38,020 --> 00:10:39,723 just like we did here. 197 197 00:10:41,580 --> 00:10:43,220 And then all we have to do 198 198 00:10:43,220 --> 00:10:46,350 is to consume that promise like this. 199 199 00:10:46,350 --> 00:10:49,900 And so this is a really nice and helpful pattern. 200 200 00:10:49,900 --> 00:10:53,530 Now, in practice, most of the time all we actually do 201 201 00:10:53,530 --> 00:10:55,820 is to consume promises. 202 202 00:10:55,820 --> 00:10:58,420 And we usually only built promises 203 203 00:10:58,420 --> 00:11:00,220 to basically wrap old 204 204 00:11:00,220 --> 00:11:03,400 callback based functions into promises. 205 205 00:11:03,400 --> 00:11:06,970 And this is a process that we call promisifying. 206 206 00:11:06,970 --> 00:11:08,920 So basically promisifying 207 207 00:11:08,920 --> 00:11:12,650 means to convert callback based asynchronous behavior 208 208 00:11:12,650 --> 00:11:14,173 to promise based. 209 209 00:11:16,850 --> 00:11:20,180 Let's see that in action a little bit. 210 210 00:11:20,180 --> 00:11:21,700 And so what we're gonna do 211 211 00:11:21,700 --> 00:11:25,440 is to actually promisify the set timeout function 212 212 00:11:25,440 --> 00:11:27,323 and create a wait function. 213 213 00:11:30,190 --> 00:11:32,610 So let's create a function called wait 214 214 00:11:34,760 --> 00:11:38,623 and this function is going to take in a number of seconds. 215 215 00:11:42,610 --> 00:11:44,730 And so now inside of this function 216 216 00:11:44,730 --> 00:11:48,150 we will actually create and return the promise. 217 217 00:11:48,150 --> 00:11:50,870 So usually that's always what we do. 218 218 00:11:50,870 --> 00:11:52,290 So creating a function 219 219 00:11:52,290 --> 00:11:54,860 and then from there returning a promise. 220 220 00:11:54,860 --> 00:11:56,570 And so this will then encapsulate 221 221 00:11:56,570 --> 00:11:59,610 the asynchronous operation even further. 222 222 00:11:59,610 --> 00:12:03,113 So essentially that's also what the fetch function does. 223 223 00:12:04,676 --> 00:12:07,320 It's a function that returns a promise, 224 224 00:12:07,320 --> 00:12:09,620 and so that is exactly what we will do 225 225 00:12:09,620 --> 00:12:11,790 here with this wait function. 226 226 00:12:11,790 --> 00:12:15,703 So in a sense this here is a more real world example. 227 227 00:12:18,176 --> 00:12:21,900 So promisifying set timeout. 228 228 00:12:24,830 --> 00:12:28,020 As I was saying, we are going to return a new promise 229 229 00:12:31,220 --> 00:12:34,430 and then or executor function as always, 230 230 00:12:34,430 --> 00:12:36,540 and then resolve. 231 231 00:12:36,540 --> 00:12:37,390 And in this case, 232 232 00:12:37,390 --> 00:12:40,840 we actually don't even need the reject function. 233 233 00:12:40,840 --> 00:12:43,540 And that's because it's actually impossible 234 234 00:12:43,540 --> 00:12:45,850 for the timer to fail. 235 235 00:12:45,850 --> 00:12:46,860 And so therefore 236 236 00:12:46,860 --> 00:12:50,410 we will never mark this promise as rejected. 237 237 00:12:50,410 --> 00:12:52,140 And so here we don't even need 238 238 00:12:52,140 --> 00:12:55,743 to specify debt reject parameter. 239 239 00:12:59,260 --> 00:13:02,260 It's just like the array methods like map 240 240 00:13:02,260 --> 00:13:04,610 which always receive three arguments 241 241 00:13:04,610 --> 00:13:08,023 but most of the time we just use one or two of them. 242 242 00:13:09,100 --> 00:13:11,240 And so this is similar, 243 243 00:13:11,240 --> 00:13:16,240 but anyway, all we have to do now is to use set timeout. 244 244 00:13:16,660 --> 00:13:18,083 And then here the callback function 245 245 00:13:18,083 --> 00:13:21,530 that we want to be called after a certain time 246 246 00:13:21,530 --> 00:13:24,410 is exactly the resolve function. 247 247 00:13:24,410 --> 00:13:25,993 So we can simply do this. 248 248 00:13:26,830 --> 00:13:29,900 And in this case, we're actually not even going to pass 249 249 00:13:29,900 --> 00:13:33,270 any resolved value into the resolve function 250 250 00:13:33,270 --> 00:13:36,450 because that's actually not mandatory. 251 251 00:13:36,450 --> 00:13:38,730 And so in the case of this timer, 252 252 00:13:38,730 --> 00:13:41,110 it's also not really necessary. 253 253 00:13:41,110 --> 00:13:43,220 And so in the case of a timer, 254 254 00:13:43,220 --> 00:13:47,403 it's also not really necessary to wait for some value. 255 255 00:13:48,750 --> 00:13:50,750 So in this case, all we want to do 256 256 00:13:50,750 --> 00:13:53,400 is to basically make our code wait. 257 257 00:13:53,400 --> 00:13:56,793 And so no resolved values are needed. 258 258 00:13:57,810 --> 00:13:59,710 Now, here, we want to run that timer 259 259 00:13:59,710 --> 00:14:02,480 for a certain amount of seconds, 260 260 00:14:02,480 --> 00:14:04,913 so we need to multiply that by 1000. 261 261 00:14:05,790 --> 00:14:07,943 And so that's actually already it. 262 262 00:14:10,460 --> 00:14:14,090 Now, we could improve this even further here 263 263 00:14:14,090 --> 00:14:18,300 or just make it smaller by using error functions. 264 264 00:14:18,300 --> 00:14:22,110 And you can do that if you want to have some fun with that, 265 265 00:14:22,110 --> 00:14:25,693 but for now I will simply now consume this promise. 266 266 00:14:26,610 --> 00:14:29,573 So let's call or wait function. 267 267 00:14:31,440 --> 00:14:33,480 And so this will now create a promise 268 268 00:14:33,480 --> 00:14:35,550 that will wait for two seconds 269 269 00:14:35,550 --> 00:14:39,390 and after these two seconds, it will resolve. 270 270 00:14:39,390 --> 00:14:41,363 And so we can then handle that. 271 271 00:14:42,690 --> 00:14:45,000 And then here in our callback function, 272 272 00:14:45,000 --> 00:14:48,493 remember we are not going to receive any resolved value. 273 273 00:14:49,360 --> 00:14:51,240 So we just leave this empty 274 274 00:14:54,870 --> 00:14:59,870 and then I will simply log, I waited for two seconds. 275 275 00:15:01,100 --> 00:15:02,910 And so here in this callback, 276 276 00:15:02,910 --> 00:15:04,750 we could now run any code 277 277 00:15:04,750 --> 00:15:07,843 that we wanted to be executed after two seconds. 278 278 00:15:09,690 --> 00:15:12,840 And then let's actually wait one more second. 279 279 00:15:12,840 --> 00:15:14,470 And so just like before 280 280 00:15:14,470 --> 00:15:16,833 we now have to return a new promise here, 281 281 00:15:17,960 --> 00:15:22,960 so return, wait, and this time just one second. 282 282 00:15:24,030 --> 00:15:26,720 And so this is exactly what we did before 283 283 00:15:26,720 --> 00:15:30,590 when we wanted to chain two sequential Ajax calls 284 284 00:15:30,590 --> 00:15:31,963 using the fetch function. 285 285 00:15:33,880 --> 00:15:35,850 So in the result of the first fetch, 286 286 00:15:35,850 --> 00:15:39,548 we would create a new fetch and return it. 287 287 00:15:39,548 --> 00:15:41,430 And so that's what we're doing here, 288 288 00:15:41,430 --> 00:15:45,800 and so then therefore all of this returns a new promise 289 289 00:15:45,800 --> 00:15:48,693 and then we can one more time handle that. 290 290 00:15:52,120 --> 00:15:53,760 And let's just say again, 291 291 00:15:53,760 --> 00:15:56,883 I waited for one second. 292 292 00:15:59,100 --> 00:16:00,353 So give it a safe. 293 293 00:16:01,670 --> 00:16:03,960 So this one waited for two seconds 294 294 00:16:03,960 --> 00:16:06,740 and this one for one second. 295 295 00:16:06,740 --> 00:16:09,010 And of course we also still get the result 296 296 00:16:09,010 --> 00:16:11,070 from the previous one, 297 297 00:16:11,070 --> 00:16:14,930 but for now, this is here what we are interested in. 298 298 00:16:14,930 --> 00:16:16,800 And so now with this, 299 299 00:16:16,800 --> 00:16:20,940 we have once again a nice chain of asynchronous behavior 300 300 00:16:20,940 --> 00:16:23,530 that happens nicely in a sequence 301 301 00:16:23,530 --> 00:16:26,070 and all without the callback hill. 302 302 00:16:26,070 --> 00:16:28,720 So before I actually showed you what happened 303 303 00:16:28,720 --> 00:16:32,550 when we had multiple timers. 304 304 00:16:32,550 --> 00:16:34,500 And so basically we could do now 305 305 00:16:34,500 --> 00:16:39,363 this same thing like this. 306 306 00:16:42,870 --> 00:16:46,353 So that's just a copy of here as a reference. 307 307 00:16:53,135 --> 00:16:56,385 And so this example here would be this. 308 308 00:17:00,264 --> 00:17:04,120 So one second past, let's just overwrite this one here. 309 309 00:17:07,140 --> 00:17:09,280 And then here we can simply duplicate 310 310 00:17:09,280 --> 00:17:10,430 this a couple of times. 311 311 00:17:12,850 --> 00:17:14,393 So two seconds past, 312 312 00:17:16,700 --> 00:17:19,150 three seconds and here 313 313 00:17:22,760 --> 00:17:24,233 four seconds past. 314 314 00:17:26,510 --> 00:17:29,400 And so that's going to be exactly the same result 315 315 00:17:29,400 --> 00:17:30,423 as we had here. 316 316 00:17:32,300 --> 00:17:34,040 Of course here it's four, 317 317 00:17:34,040 --> 00:17:36,400 but nevermind, that doesn't really matter. 318 318 00:17:36,400 --> 00:17:38,060 What matters is that now 319 319 00:17:38,060 --> 00:17:40,380 we no longer have this ugly 320 320 00:17:40,380 --> 00:17:43,060 and difficult to understand callback hill, 321 321 00:17:43,060 --> 00:17:45,350 but instead we have this nice sequence 322 322 00:17:45,350 --> 00:17:47,880 of asynchronous behavior. 323 323 00:17:47,880 --> 00:17:50,910 Now finally dare also actually a way 324 324 00:17:50,910 --> 00:17:53,820 to very easy create a fulfilled 325 325 00:17:53,820 --> 00:17:56,183 or a rejected promise immediately. 326 326 00:17:57,020 --> 00:17:59,700 And we had actually already done that 327 327 00:17:59,700 --> 00:18:01,930 in the previous lecture, 328 328 00:18:01,930 --> 00:18:04,560 but it's always good to know that we can do this 329 329 00:18:04,560 --> 00:18:06,780 so let me show it to you again. 330 330 00:18:06,780 --> 00:18:09,790 So we can use promise.resolve. 331 331 00:18:09,790 --> 00:18:12,730 And so basically this is a static method 332 332 00:18:12,730 --> 00:18:14,533 on the promise constructor. 333 333 00:18:16,469 --> 00:18:19,860 And so here we can then pass in the resolved value, 334 334 00:18:19,860 --> 00:18:24,603 so just like we would pass to resolve value right here. 335 335 00:18:27,890 --> 00:18:30,010 Again, the difference is that this one here 336 336 00:18:30,010 --> 00:18:31,893 will resolve immediately. 337 337 00:18:32,850 --> 00:18:34,850 So here, it doesn't matter. 338 338 00:18:34,850 --> 00:18:37,993 So just abc and then we can handle that. 339 339 00:18:41,760 --> 00:18:44,240 And so again, the values here don't matter 340 340 00:18:45,994 --> 00:18:49,317 and then we can also do the same with reject. 341 341 00:18:50,290 --> 00:18:52,763 Let's just duplicate this here actually, 342 342 00:18:54,570 --> 00:18:57,850 so reject and here to den is not necessary 343 343 00:18:57,850 --> 00:19:01,740 because there will be no resolved value anyway. 344 344 00:19:01,740 --> 00:19:04,443 And so we can just catch it like this. 345 345 00:19:07,120 --> 00:19:09,030 And so these two here should now appear 346 346 00:19:09,030 --> 00:19:11,133 at the very beginning. 347 347 00:19:13,190 --> 00:19:14,543 Well, actually they don't. 348 348 00:19:16,890 --> 00:19:20,170 So let's see, Oh, actually here they are. 349 349 00:19:20,170 --> 00:19:23,250 So here is abc and then abc 350 350 00:19:23,250 --> 00:19:25,423 here let's just create a new error. 351 351 00:19:32,770 --> 00:19:36,670 And so indeed here we got a lottery draws happening 352 352 00:19:36,670 --> 00:19:38,713 which comes from the previous promise. 353 353 00:19:43,550 --> 00:19:45,120 Right from here, 354 354 00:19:45,120 --> 00:19:46,440 and so that's because 355 355 00:19:46,440 --> 00:19:50,000 this is basically the first micro task ever. 356 356 00:19:50,000 --> 00:19:52,720 And so therefore this first micro task, 357 357 00:19:52,720 --> 00:19:54,563 it needs to be executed first. 358 358 00:19:56,980 --> 00:19:59,090 And then after this, we have abc 359 359 00:19:59,090 --> 00:20:02,023 and then the problem that we created here in the end. 360 360 00:20:03,550 --> 00:20:06,240 So this is how we built our own promises 361 361 00:20:06,240 --> 00:20:07,750 and how we promisify 362 362 00:20:07,750 --> 00:20:12,470 a very simple callback based asynchronous behavior function 363 363 00:20:12,470 --> 00:20:14,673 such as set timeout. 31087