1 00:00:00,230 --> 00:00:02,110 Hello guys, nice to see you back. 2 00:00:02,120 --> 00:00:05,860 In the previous video, we covered a topic named promise. 3 00:00:05,870 --> 00:00:08,390 This is the second part of the same topic. 4 00:00:08,390 --> 00:00:12,020 In this video we are going to learn promise all method. 5 00:00:12,050 --> 00:00:14,420 We use promise to check a condition. 6 00:00:14,510 --> 00:00:18,530 Either our promise will be resolved or else it will be reject. 7 00:00:18,560 --> 00:00:23,720 If our function resolved for the further work we use, then function. 8 00:00:23,720 --> 00:00:29,300 And if our function is rejected, then we use catch function to show our error message. 9 00:00:29,300 --> 00:00:31,700 Suppose we have such a situation. 10 00:00:31,700 --> 00:00:38,510 We have lots of similar promises, and if we use then or catch function for all the promises, then 11 00:00:38,510 --> 00:00:40,340 our code will become very lengthy. 12 00:00:40,340 --> 00:00:47,510 And to solve this problem, a new function has been introduced in JavaScript ES6 version promise all. 13 00:00:47,660 --> 00:00:50,780 We can check every promise at once with this function. 14 00:00:50,990 --> 00:00:56,210 In our case we have three promise and also you can check thousands of promise at once. 15 00:00:56,210 --> 00:00:58,820 As you know, every promise has a result. 16 00:00:58,850 --> 00:01:01,250 May we resolve may be reject. 17 00:01:01,280 --> 00:01:05,870 If our promise is resolved, you know then we use then function. 18 00:01:05,870 --> 00:01:07,820 But you need to remember one thing. 19 00:01:07,820 --> 00:01:13,010 If all of the promise are resolved, only that time you can use then function. 20 00:01:13,220 --> 00:01:17,960 If any of the promise return reject, then it call our catch function. 21 00:01:18,080 --> 00:01:20,030 Let me explain you once again. 22 00:01:20,300 --> 00:01:26,030 If we have multiple promise, then we can check at once using Promise.all function. 23 00:01:26,030 --> 00:01:33,170 If all of our promise resolved, then it run our then function and if any of promise reject then it 24 00:01:33,170 --> 00:01:34,550 call check function. 25 00:01:34,550 --> 00:01:36,350 Let me show you the syntax. 26 00:01:36,470 --> 00:01:39,380 How can we write promise dot all function? 27 00:01:39,380 --> 00:01:41,900 Suppose we have a promise named P1. 28 00:01:42,170 --> 00:01:47,480 And inside the promise you can see I create a function, and inside the function I print a message in 29 00:01:47,480 --> 00:01:48,320 our console. 30 00:01:48,350 --> 00:01:49,460 Promise one. 31 00:01:49,760 --> 00:01:51,680 And I'm going to solve this promise. 32 00:01:51,830 --> 00:01:55,700 So I call resolve function and print a message one. 33 00:01:56,480 --> 00:01:59,480 Similarly, I create another promise named P to. 34 00:02:00,300 --> 00:02:05,610 And insert the console.log and print our messages promise to. 35 00:02:06,180 --> 00:02:10,500 And also I resolve this promise and send message to. 36 00:02:10,680 --> 00:02:13,530 And now I want to check this promise at once. 37 00:02:13,980 --> 00:02:16,800 For that we can use our promise all function. 38 00:02:17,280 --> 00:02:24,420 When we use dot all function inside the round braces, we can use array and we can pass multiple promises. 39 00:02:24,690 --> 00:02:29,100 Something like that inside the square braces p1 to p2. 40 00:02:29,610 --> 00:02:34,980 If we have 50 promises following the same method, we can check all the promises. 41 00:02:35,130 --> 00:02:37,470 Just use comma and type promise name. 42 00:02:38,100 --> 00:02:40,620 There is an advantage to using it. 43 00:02:41,040 --> 00:02:44,010 We have to call then and catch function for once. 44 00:02:44,520 --> 00:02:51,150 We don't need to use both of the function multiple times and inside the then and catch function we can 45 00:02:51,150 --> 00:02:54,990 type our different codes and I will give you the practical demonstration. 46 00:02:54,990 --> 00:02:57,750 And it's time to back to my Visual Studio Code editor. 47 00:02:58,140 --> 00:03:00,930 So finally I'm back to my visual Studio Code editor. 48 00:03:01,080 --> 00:03:07,380 You can see side by side, I open my Visual Studio Code editor, and I open my browser using Live Server 49 00:03:07,380 --> 00:03:08,160 extension. 50 00:03:08,640 --> 00:03:10,800 First I'm going to type our script tag. 51 00:03:10,920 --> 00:03:14,400 Then inside this script tag I'm going to create our first promise. 52 00:03:15,210 --> 00:03:19,080 Let P1 equal to new promise. 53 00:03:19,940 --> 00:03:22,880 Inside the round braces, I am going to create an arrow function. 54 00:03:23,420 --> 00:03:27,170 As you know, our promise always return a result. 55 00:03:27,620 --> 00:03:28,850 Either is resolve. 56 00:03:29,970 --> 00:03:32,730 Either is reserved for resolve. 57 00:03:32,730 --> 00:03:38,670 I'm going to take a variable named resolve and for reject I'm going to take variable reject. 58 00:03:38,700 --> 00:03:41,910 You can type any name inside this function. 59 00:03:41,910 --> 00:03:44,310 I'm going to use set timeout function. 60 00:03:45,170 --> 00:03:50,120 And inside the setTimeout function, I'm going to create an arrow function, and I'm going to hold our 61 00:03:50,120 --> 00:03:51,350 code for. 62 00:03:51,740 --> 00:03:55,970 We are going to use multiple promises and their timings are different. 63 00:03:56,090 --> 00:03:59,450 And I want to run our first promise after once again. 64 00:04:00,020 --> 00:04:02,780 So I type one multiply by 1000. 65 00:04:03,490 --> 00:04:07,330 So when I call this message, it prints something in our console. 66 00:04:07,690 --> 00:04:12,430 So I'm going to type console dot log inside the round braces. 67 00:04:13,440 --> 00:04:15,660 The first promise has resolved. 68 00:04:16,500 --> 00:04:18,870 And then I'm going to call our resolve function. 69 00:04:19,200 --> 00:04:22,680 I assume that our function always resolved. 70 00:04:23,040 --> 00:04:26,980 And I want to send a numeric value in our resolve function. 71 00:04:27,000 --> 00:04:28,590 So I type five. 72 00:04:28,980 --> 00:04:30,750 So this is our first promise. 73 00:04:31,320 --> 00:04:33,930 Similarly I'm going to create another promise. 74 00:04:34,440 --> 00:04:36,750 So I select the code and duplicate it. 75 00:04:37,050 --> 00:04:39,150 And our promise name is P two. 76 00:04:39,750 --> 00:04:41,970 And also I'm going to print in our console. 77 00:04:42,000 --> 00:04:48,480 The second promise has resolved and our resolve function I'm going to send ten as value. 78 00:04:49,410 --> 00:04:52,320 And I want to delay this promise for three second. 79 00:04:53,170 --> 00:04:55,810 Similarly, I'm going to create another promise. 80 00:04:56,290 --> 00:04:58,660 So I select the promise and duplicate it. 81 00:04:59,290 --> 00:05:03,130 And our promise name is P three console dot log. 82 00:05:03,130 --> 00:05:04,720 I'm going to send a message. 83 00:05:05,290 --> 00:05:07,360 The third promise has resolved. 84 00:05:08,170 --> 00:05:11,530 And in my resolve function I'm going to first. 85 00:05:12,470 --> 00:05:17,630 30 as value, and I want to delay this promise for five second. 86 00:05:18,510 --> 00:05:21,540 Now I want to check all the promises at once. 87 00:05:22,110 --> 00:05:24,930 So I'm going to use promise dot all method. 88 00:05:25,650 --> 00:05:29,820 So I'm going to type promise dot all inside the round braces. 89 00:05:29,970 --> 00:05:33,510 If you want to check multiple promises then you need to use. 90 00:05:34,370 --> 00:05:34,700 Eddie. 91 00:05:36,080 --> 00:05:43,370 So inside the square braces first I type p one comma p two comma p three. 92 00:05:44,250 --> 00:05:47,460 This method going to check all the promises one by one. 93 00:05:47,490 --> 00:05:50,820 Then I'm going to use then function for resolve. 94 00:05:51,690 --> 00:05:56,250 And also I'm going to use catch function for reject dot catch. 95 00:05:56,790 --> 00:06:04,380 If any of one of these three promise is rejected, then it run catch function automatically and remember. 96 00:06:04,380 --> 00:06:06,990 Then end catch is our callback functions. 97 00:06:07,530 --> 00:06:12,720 And inside the then function I'm going to create an error function name result. 98 00:06:13,140 --> 00:06:14,730 Inside the curly braces. 99 00:06:15,420 --> 00:06:20,670 You can see here that each function has sent one result in our result function. 100 00:06:20,940 --> 00:06:23,430 Five 1030. 101 00:06:23,760 --> 00:06:26,880 And I want to print all of three at once. 102 00:06:27,760 --> 00:06:30,760 Console dot log inside the round braces. 103 00:06:31,090 --> 00:06:36,460 I'm going to use template string method inside the backticks results. 104 00:06:37,210 --> 00:06:41,800 Colon dollar sign inside the square braces result. 105 00:06:42,190 --> 00:06:46,510 So it's print the value of result which we get from result function. 106 00:06:46,780 --> 00:06:51,730 Similarly, I'm going to create another error function inside our catch function. 107 00:06:52,680 --> 00:06:54,540 And our function name is error. 108 00:06:55,020 --> 00:06:58,650 And inside the console it going to print error message. 109 00:06:59,370 --> 00:07:02,340 So basically I create three different promises. 110 00:07:02,760 --> 00:07:05,520 And every time I print a message in our console. 111 00:07:06,120 --> 00:07:09,960 And every promise send different value in result function. 112 00:07:10,200 --> 00:07:13,020 As you can see five, ten and 30. 113 00:07:13,870 --> 00:07:15,040 Let's set the file. 114 00:07:16,140 --> 00:07:20,100 And if I show you my console, you can see first it print. 115 00:07:20,310 --> 00:07:22,110 First promise has resolved. 116 00:07:22,140 --> 00:07:27,920 Then after two second it print our second message and after five second it print our third message. 117 00:07:27,930 --> 00:07:31,230 At the end we get our result as an array from. 118 00:07:31,620 --> 00:07:35,100 And if you want to calculate our results value, yes you can. 119 00:07:35,250 --> 00:07:38,910 Inside my then function we need to use foreign loop. 120 00:07:39,270 --> 00:07:41,190 So inside the then function. 121 00:07:41,310 --> 00:07:45,420 But first we need to set a variable word total. 122 00:07:46,400 --> 00:07:49,820 Equal to zero, then insert the then function. 123 00:07:50,120 --> 00:07:54,450 For insert the round braces var I in result. 124 00:07:54,470 --> 00:07:59,390 I want to addition all the values and save the value in our total variable. 125 00:08:00,590 --> 00:08:05,030 So I type total plus equal to result. 126 00:08:05,890 --> 00:08:07,090 Our result is an array. 127 00:08:07,510 --> 00:08:09,340 So insert the square braces. 128 00:08:09,670 --> 00:08:11,890 We need to define our item. 129 00:08:12,400 --> 00:08:15,670 I also I want to show the result. 130 00:08:16,000 --> 00:08:20,020 So I duplicate this console line and inside the backticks. 131 00:08:20,920 --> 00:08:23,890 I type total and insert the curly braces. 132 00:08:24,490 --> 00:08:26,880 I am going to pass total variable value. 133 00:08:26,890 --> 00:08:28,750 And now I am going to save this file. 134 00:08:29,230 --> 00:08:35,290 And you can see it print our promise messages and at last it print our total value. 135 00:08:35,830 --> 00:08:42,340 If all the functions are running well then our promise all method call then function. 136 00:08:42,790 --> 00:08:48,820 If any of method return reject then our promise all function return catch function. 137 00:08:49,970 --> 00:08:53,480 So I'm going to reject one of the promise in our case. 138 00:08:53,480 --> 00:08:54,380 Promise three. 139 00:08:54,980 --> 00:09:01,340 I comment out the result function and I'm going to call reject function and print message. 140 00:09:02,160 --> 00:09:02,820 Reject. 141 00:09:03,480 --> 00:09:07,050 And if I save this file, you can see in my console it print. 142 00:09:07,950 --> 00:09:09,870 The first promise has resolved. 143 00:09:09,960 --> 00:09:10,980 They need print. 144 00:09:11,010 --> 00:09:12,610 The second promise has resolved. 145 00:09:12,630 --> 00:09:14,790 For our third promise, it print. 146 00:09:14,940 --> 00:09:16,890 The third promise has rejected. 147 00:09:16,980 --> 00:09:17,850 And our promise. 148 00:09:17,850 --> 00:09:18,000 All. 149 00:09:18,000 --> 00:09:18,300 Method. 150 00:09:18,300 --> 00:09:18,660 Run. 151 00:09:18,660 --> 00:09:19,050 Catch. 152 00:09:19,080 --> 00:09:19,650 Function. 153 00:09:20,280 --> 00:09:20,780 Error. 154 00:09:20,790 --> 00:09:21,780 Reject. 155 00:09:21,990 --> 00:09:24,570 Our then function did not work here. 156 00:09:24,720 --> 00:09:27,150 And I'm going to show you another example. 157 00:09:27,330 --> 00:09:31,200 You can see these three promises are very similar type of promise. 158 00:09:31,320 --> 00:09:33,060 So we can make it smaller. 159 00:09:33,360 --> 00:09:35,670 So I'm going to delete these two promises. 160 00:09:35,850 --> 00:09:37,890 And I'm going to create a new promise here. 161 00:09:39,040 --> 00:09:41,710 And I'm going to convert this promise into a function. 162 00:09:43,290 --> 00:09:44,970 First, we create a promise. 163 00:09:46,120 --> 00:09:49,090 Then insert the promise I'm going to call a common function. 164 00:09:50,120 --> 00:09:52,370 And our function name is Procol. 165 00:09:53,210 --> 00:09:57,980 And inside the function I'm going to pass two parameter for result value. 166 00:09:58,250 --> 00:10:00,590 I'm going to pass a numeric parameter. 167 00:10:00,890 --> 00:10:07,220 And for our console dot log message I'm going to pass string parameter first. 168 00:10:07,250 --> 00:10:09,050 So this is our first promise. 169 00:10:09,560 --> 00:10:12,290 Similarly I'm going to create two other promise. 170 00:10:12,800 --> 00:10:14,630 P2 and P3. 171 00:10:15,390 --> 00:10:18,870 And also change our message for resolved. 172 00:10:19,170 --> 00:10:24,420 I'm going to pass 15 and for our console message I'm going to pass second. 173 00:10:24,720 --> 00:10:29,580 Similarly for promise three, resolve value is 20. 174 00:10:31,000 --> 00:10:33,460 And our console value is third. 175 00:10:34,190 --> 00:10:37,370 But first we need to create a function name protocol. 176 00:10:38,000 --> 00:10:42,830 Now I want to make our set timeout a function, not a promise. 177 00:10:43,190 --> 00:10:51,560 So I remove the code and type let protocol equal to function and inside the function our first parameter 178 00:10:51,560 --> 00:10:54,920 is return data and our second parameter is message. 179 00:10:55,550 --> 00:11:00,290 Inside the return data we are going to pass ten 1520. 180 00:11:00,410 --> 00:11:05,990 And inside the message variable we are going to pass first second third. 181 00:11:06,620 --> 00:11:08,060 You can type any name. 182 00:11:08,300 --> 00:11:11,030 And now I'm going to use this parameter in our console. 183 00:11:11,720 --> 00:11:19,220 So console dot log inside the console dot log I'm going to make it dynamic inside the backticks the 184 00:11:19,700 --> 00:11:21,620 dollar curly braces. 185 00:11:21,920 --> 00:11:23,510 Inside the curly braces. 186 00:11:23,540 --> 00:11:24,740 Our message. 187 00:11:25,070 --> 00:11:29,960 And if our promise is resolved it sends return data as value. 188 00:11:30,380 --> 00:11:34,370 And I want to change set timeout function dynamically. 189 00:11:34,820 --> 00:11:38,900 So I'm going to send return data value into 100. 190 00:11:39,320 --> 00:11:41,540 So first time it delay for once again. 191 00:11:41,900 --> 00:11:44,570 Then it delay for one and a half second. 192 00:11:44,660 --> 00:11:47,990 And our third promise is delay for two seconds. 193 00:11:48,350 --> 00:11:55,310 We know every promise function returns something either resolve or reject, but we do not create any 194 00:11:55,310 --> 00:11:58,970 basic function which is going to return, resolve or reject. 195 00:11:59,150 --> 00:12:01,610 So I'm going to cut this set timeout function. 196 00:12:02,030 --> 00:12:04,280 And I'm going to create a basic function. 197 00:12:04,280 --> 00:12:08,570 And I'm going to send two parameter resolve and reject. 198 00:12:09,050 --> 00:12:14,180 And inside the curly braces I am going to paste our set timeout function. 199 00:12:14,720 --> 00:12:16,220 It's an anonymous function. 200 00:12:16,220 --> 00:12:18,500 It's going to return promise. 201 00:12:18,920 --> 00:12:20,390 So when we call. 202 00:12:21,230 --> 00:12:24,590 Protocol function, it return the anonymous function. 203 00:12:25,040 --> 00:12:28,160 So we need to type return keyword for this. 204 00:12:28,740 --> 00:12:32,840 It's basically a function which we call in our promise function. 205 00:12:33,020 --> 00:12:34,220 So it's a promise. 206 00:12:34,220 --> 00:12:36,800 So it's going to return resolve or reject. 207 00:12:37,310 --> 00:12:41,150 And then it show our dynamic message set timeout. 208 00:12:41,570 --> 00:12:43,640 And we don't need to change anything. 209 00:12:44,510 --> 00:12:46,130 So I'm going to save the file. 210 00:12:46,820 --> 00:12:51,530 And you can see in my console it dynamically print our messages. 211 00:12:52,040 --> 00:12:55,100 And if you want to change resolve value yes you can. 212 00:12:55,740 --> 00:12:56,940 Let's change it. 213 00:12:57,240 --> 00:13:02,250 Our first value is 20 and our second value is 40, and our third wheel is 60. 214 00:13:02,550 --> 00:13:09,090 If I save this code, our first promise is delay for two second and next one is delay for four second 215 00:13:09,450 --> 00:13:15,960 and after six second it print our third promise and then it print our total 120. 216 00:13:16,900 --> 00:13:21,670 And now I'm going to create another promise which is going to return reject value. 217 00:13:22,120 --> 00:13:23,590 So I duplicate this line. 218 00:13:24,630 --> 00:13:26,520 And change the name before. 219 00:13:27,380 --> 00:13:28,490 And insert this promise. 220 00:13:28,490 --> 00:13:34,460 I'm going to create a anonymous function and it takes two arguments resolve and reject. 221 00:13:34,970 --> 00:13:37,670 And this time I want to call reject function. 222 00:13:38,030 --> 00:13:39,680 And inside the reject function. 223 00:13:40,480 --> 00:13:42,280 I'm going to pass a message. 224 00:13:42,790 --> 00:13:45,130 The fourth promise has rejected. 225 00:13:46,030 --> 00:13:47,470 So when I save the code. 226 00:13:47,950 --> 00:13:51,100 Our promise all method going to call catch function. 227 00:13:51,520 --> 00:13:54,010 Let's save the code and see what happened. 228 00:13:54,280 --> 00:13:57,940 But before save the code, we need to call this promise. 229 00:13:58,390 --> 00:14:01,450 In our promise all function p three. 230 00:14:01,540 --> 00:14:02,920 Comma p four. 231 00:14:04,170 --> 00:14:07,680 And if I set this code, you can see in my console. 232 00:14:08,600 --> 00:14:09,920 First it print the error. 233 00:14:09,950 --> 00:14:11,990 The fourth promise has rejected. 234 00:14:12,020 --> 00:14:14,930 Then it executes our promise one by one. 235 00:14:15,780 --> 00:14:22,650 And there is no total value in our console because our promise all method return catch function. 236 00:14:23,390 --> 00:14:25,250 So I hope you understand. 237 00:14:25,250 --> 00:14:26,720 What is Promise.all method. 238 00:14:27,290 --> 00:14:31,070 And now you know why and how we use promise method. 239 00:14:31,400 --> 00:14:33,050 Thanks for watching this video. 240 00:14:33,590 --> 00:14:35,300 See you in the next tutorial.