Hello guys, nice to see you back.
In the previous video, we covered a topic named promise.
This is the second part of the same topic.
In this video we are going to learn promise all method.
We use promise to check a condition.
Either our promise will be resolved or else it will be reject.
If our function resolved for the further work we use, then function.
And if our function is rejected, then we use catch function to show our error message.
Suppose we have such a situation.
We have lots of similar promises, and if we use then or catch function for all the promises, then
our code will become very lengthy.
And to solve this problem, a new function has been introduced in JavaScript ES6 version promise all.
We can check every promise at once with this function.
In our case we have three promise and also you can check thousands of promise at once.
As you know, every promise has a result.
May we resolve may be reject.
If our promise is resolved, you know then we use then function.
But you need to remember one thing.
If all of the promise are resolved, only that time you can use then function.
If any of the promise return reject, then it call our catch function.
Let me explain you once again.
If we have multiple promise, then we can check at once using Promise.all function.
If all of our promise resolved, then it run our then function and if any of promise reject then it
call check function.
Let me show you the syntax.
How can we write promise dot all function?
Suppose we have a promise named P1.
And inside the promise you can see I create a function, and inside the function I print a message in
our console.
Promise one.
And I'm going to solve this promise.
So I call resolve function and print a message one.
Similarly, I create another promise named P to.
And insert the console.log and print our messages promise to.
And also I resolve this promise and send message to.
And now I want to check this promise at once.
For that we can use our promise all function.
When we use dot all function inside the round braces, we can use array and we can pass multiple promises.
Something like that inside the square braces p1 to p2.
If we have 50 promises following the same method, we can check all the promises.
Just use comma and type promise name.
There is an advantage to using it.
We have to call then and catch function for once.
We don't need to use both of the function multiple times and inside the then and catch function we can
type our different codes and I will give you the practical demonstration.
And it's time to back to my Visual Studio Code editor.
So finally I'm back to my visual Studio Code editor.
You can see side by side, I open my Visual Studio Code editor, and I open my browser using Live Server
extension.
First I'm going to type our script tag.
Then inside this script tag I'm going to create our first promise.
Let P1 equal to new promise.
Inside the round braces, I am going to create an arrow function.
As you know, our promise always return a result.
Either is resolve.
Either is reserved for resolve.
I'm going to take a variable named resolve and for reject I'm going to take variable reject.
You can type any name inside this function.
I'm going to use set timeout function.
And inside the setTimeout function, I'm going to create an arrow function, and I'm going to hold our
code for.
We are going to use multiple promises and their timings are different.
And I want to run our first promise after once again.
So I type one multiply by 1000.
So when I call this message, it prints something in our console.
So I'm going to type console dot log inside the round braces.
The first promise has resolved.
And then I'm going to call our resolve function.
I assume that our function always resolved.
And I want to send a numeric value in our resolve function.
So I type five.
So this is our first promise.
Similarly I'm going to create another promise.
So I select the code and duplicate it.
And our promise name is P two.
And also I'm going to print in our console.
The second promise has resolved and our resolve function I'm going to send ten as value.
And I want to delay this promise for three second.
Similarly, I'm going to create another promise.
So I select the promise and duplicate it.
And our promise name is P three console dot log.
I'm going to send a message.
The third promise has resolved.
And in my resolve function I'm going to first.
30 as value, and I want to delay this promise for five second.
Now I want to check all the promises at once.
So I'm going to use promise dot all method.
So I'm going to type promise dot all inside the round braces.
If you want to check multiple promises then you need to use.
Eddie.
So inside the square braces first I type p one comma p two comma p three.
This method going to check all the promises one by one.
Then I'm going to use then function for resolve.
And also I'm going to use catch function for reject dot catch.
If any of one of these three promise is rejected, then it run catch function automatically and remember.
Then end catch is our callback functions.
And inside the then function I'm going to create an error function name result.
Inside the curly braces.
You can see here that each function has sent one result in our result function.
Five 1030.
And I want to print all of three at once.
Console dot log inside the round braces.
I'm going to use template string method inside the backticks results.
Colon dollar sign inside the square braces result.
So it's print the value of result which we get from result function.
Similarly, I'm going to create another error function inside our catch function.
And our function name is error.
And inside the console it going to print error message.
So basically I create three different promises.
And every time I print a message in our console.
And every promise send different value in result function.
As you can see five, ten and 30.
Let's set the file.
And if I show you my console, you can see first it print.
First promise has resolved.
Then after two second it print our second message and after five second it print our third message.
At the end we get our result as an array from.
And if you want to calculate our results value, yes you can.
Inside my then function we need to use foreign loop.
So inside the then function.
But first we need to set a variable word total.
Equal to zero, then insert the then function.
For insert the round braces var I in result.
I want to addition all the values and save the value in our total variable.
So I type total plus equal to result.
Our result is an array.
So insert the square braces.
We need to define our item.
I also I want to show the result.
So I duplicate this console line and inside the backticks.
I type total and insert the curly braces.
I am going to pass total variable value.
And now I am going to save this file.
And you can see it print our promise messages and at last it print our total value.
If all the functions are running well then our promise all method call then function.
If any of method return reject then our promise all function return catch function.
So I'm going to reject one of the promise in our case.
Promise three.
I comment out the result function and I'm going to call reject function and print message.
Reject.
And if I save this file, you can see in my console it print.
The first promise has resolved.
They need print.
The second promise has resolved.
For our third promise, it print.
The third promise has rejected.
And our promise.
All.
Method.
Run.
Catch.
Function.
Error.
Reject.
Our then function did not work here.
And I'm going to show you another example.
You can see these three promises are very similar type of promise.
So we can make it smaller.
So I'm going to delete these two promises.
And I'm going to create a new promise here.
And I'm going to convert this promise into a function.
First, we create a promise.
Then insert the promise I'm going to call a common function.
And our function name is Procol.
And inside the function I'm going to pass two parameter for result value.
I'm going to pass a numeric parameter.
And for our console dot log message I'm going to pass string parameter first.
So this is our first promise.
Similarly I'm going to create two other promise.
P2 and P3.
And also change our message for resolved.
I'm going to pass 15 and for our console message I'm going to pass second.
Similarly for promise three, resolve value is 20.
And our console value is third.
But first we need to create a function name protocol.
Now I want to make our set timeout a function, not a promise.
So I remove the code and type let protocol equal to function and inside the function our first parameter
is return data and our second parameter is message.
Inside the return data we are going to pass ten 1520.
And inside the message variable we are going to pass first second third.
You can type any name.
And now I'm going to use this parameter in our console.
So console dot log inside the console dot log I'm going to make it dynamic inside the backticks the
dollar curly braces.
Inside the curly braces.
Our message.
And if our promise is resolved it sends return data as value.
And I want to change set timeout function dynamically.
So I'm going to send return data value into 100.
So first time it delay for once again.
Then it delay for one and a half second.
And our third promise is delay for two seconds.
We know every promise function returns something either resolve or reject, but we do not create any
basic function which is going to return, resolve or reject.
So I'm going to cut this set timeout function.
And I'm going to create a basic function.
And I'm going to send two parameter resolve and reject.
And inside the curly braces I am going to paste our set timeout function.
It's an anonymous function.
It's going to return promise.
So when we call.
Protocol function, it return the anonymous function.
So we need to type return keyword for this.
It's basically a function which we call in our promise function.
So it's a promise.
So it's going to return resolve or reject.
And then it show our dynamic message set timeout.
And we don't need to change anything.
So I'm going to save the file.
And you can see in my console it dynamically print our messages.
And if you want to change resolve value yes you can.
Let's change it.
Our first value is 20 and our second value is 40, and our third wheel is 60.
If I save this code, our first promise is delay for two second and next one is delay for four second
and after six second it print our third promise and then it print our total 120.
And now I'm going to create another promise which is going to return reject value.
So I duplicate this line.
And change the name before.
And insert this promise.
I'm going to create a anonymous function and it takes two arguments resolve and reject.
And this time I want to call reject function.
And inside the reject function.
I'm going to pass a message.
The fourth promise has rejected.
So when I save the code.
Our promise all method going to call catch function.
Let's save the code and see what happened.
But before save the code, we need to call this promise.
In our promise all function p three.
Comma p four.
And if I set this code, you can see in my console.
First it print the error.
The fourth promise has rejected.
Then it executes our promise one by one.
And there is no total value in our console because our promise all method return catch function.
So I hope you understand.
What is Promise.all method.
And now you know why and how we use promise method.
Thanks for watching this video.
See you in the next tutorial.