Hey, Gorgeous people on the internet in the previous article we discussed the Promise like why we need it comparing it with Callback. In Today's article, we will be looking into the different types of methods that promises provide. And more importantly, these methods expect us to provide promises which are iterable i.e an array of promises.
Passengers of this article here is the small announcement:
In this article, you will be seeing full filled Promise with the name GOOD CARS and Unfulfilled Promise with the name BAD Cars/ faulty cars
These are the list of methods Promise provides.
- Promise.all()
- Promise.any()
- Promise.allSettled()
- Promise.race();
Here is the link where you can test all these methods. Please try it out them after going through the article.
https://jsbin.com/noloaredabo/1/edit?js,console
So what do you think we should start with let's go with Promise.race()🏃♂️🏃♀️.
Promise.race():
- If you look at the word RACE in the general sense it doesn't matter how you participate in race it only matters who completed the race first either it could be the super good car or the super faulty car.
- In the same way when you provide a list of promises to the race method then it would give us the result of that promise which was completed first.
Here is the below code:
const p1= new Promise((resolve,reject)=>{
resolve("P1")
},1000);
const p2= new Promise((resolve,reject)=>{
resolve("P2")
},2000);
const p3= new Promise((resolve,reject)=>{
resolve("P3")
// reject("bad")
},3000);
var result= Promise.race([p1,p2,p3]).then((result)=>{
console.log(result)
}).catch((er)=>{
console.log(er)
})
Output: P1
what if you have a race winner whose car is faulty? Let's code it.
const p1= new Promise((resolve,reject)=>{
// resolve("P1")
reject("bad")
},1000);
const p2= new Promise((resolve,reject)=>{
resolve("P2")
},2000);
const p3= new Promise((resolve,reject)=>{
resolve("P3")
// reject("bad")
},3000);
var result= Promise.race([p1,p2,p3]).then((result)=>{
console.log(result)
}).catch((er)=>{
console.log(er)
})
Output: BAD
As we said it only matters who completed the race first either it could be the super good car or the super faulty car.
Quiz Time: Do you know why it was completed first? Take your time to answer the question. Ans: Becoz Delay time is LESS.
Promise.any():
- Here comes the most asked interview question difference between the RACE and ANY. It is pretty simple.
- Just now we have discussed the Race method which announces the winner without checking the good car and bad car but when it comes to .ANY method shows the difference. It only allows the GOOD CARS while ignoring the BAD CARS even if they have finished first.
Let's Code 💻:
const p1= new Promise((resolve,reject)=>{
// resolve("P1")
reject("bad")
},1000);
const p2= new Promise((resolve,reject)=>{
resolve("P2")
},2000);
const p3= new Promise((resolve,reject)=>{
resolve("P3")
// reject("bad")
},3000);
var result= Promise.any([p1,p2,p3]).then((result)=>{
console.log(result)
}).catch((er)=>{
console.log(er)
})
Output: P2
So as I told you Only GOOD CARS(full-filled promises) are allowed. But WHAT IF all cars are faulty then you would be seeing an error message
AgregateError: ALL Promises were Rejected
Promise.ALL():
- Promise .all is the race track which would wait for all the Good Cars to complete the race and then it would show up their results.
- But here comes the small catch if it finds any faulty car (un-fulfilled promise) then it would ignore all the GOOD CARS (full filled promise) and give the result of the faulty car
Let's Code:
- when ALL cars are GOOD.
const p1= new Promise((resolve,reject)=>{
resolve("P1")
// reject("bad")
},1000);
const p2= new Promise((resolve,reject)=>{
resolve("P2")
},2000);
const p3= new Promise((resolve,reject)=>{
resolve("P3")
// reject("bad")
},3000);
var result= Promise.all([p1,p2,p3]).then((result)=>{
console.log(result)
}).catch((er)=>{
console.log(er)
})
Output: [p1,p2,p3]
- when One Faulty car enters the Track:
const p1= new Promise((resolve,reject)=>{
resolve("P1")
// reject("bad")
},1000);
const p2= new Promise((resolve,reject)=>{
resolve("P2")
},2000);
const p3= new Promise((resolve,reject)=>{
// resolve("P3")
reject("bad")
},3000);
var result= Promise.all([p1,p2,p3]).then((result)=>{
console.log(result)
}).catch((er)=>{
console.log(er)
})
Output: BAD
Promise.AllSettled():
- As you noticed small disadvantage of .ALL() here comes the .AllSettled() is ready to full fill that gap.
- AllSettled() method would be giving out an object where it shows the status of the Good Car and its value, in the same way, the status of the Bad car and it is value.
- with this we as a developer get to know the reason when any promise is un fulfilled.
- And Good Cars that finished race we can make use of them unlike wasting them in .ALL() method.
Let's Code👨💻:
- when all promises are full filled.
const p1= new Promise((resolve,reject)=>{
resolve("P1")
// reject("bad")
},1000);
const p2= new Promise((resolve,reject)=>{
resolve("P2")
},2000);
const p3= new Promise((resolve,reject)=>{
resolve("P3")
// reject("bad")
},3000);
var result= Promise.allSettled([p1,p2,p3]).then((result)=>{
console.log(result)
}).catch((er)=>{
console.log(er)
})
Output:
[[object Object] {
status: "fulfilled",
value: "P1"
}, [object Object] {
status: "fulfilled",
value: "P2"
}, [object Object] {
status: "fulfilled",
value: "P3"
}]
- When one fulfilled promise is found
const p1= new Promise((resolve,reject)=>{
resolve("P1")
// reject("bad")
},1000);
const p2= new Promise((resolve,reject)=>{
resolve("P2")
},2000);
const p3= new Promise((resolve,reject)=>{
// resolve("P3")
reject("bad")
},3000);
var result= Promise.allSettled([p1,p2,p3]).then((result)=>{
console.log(result)
}).catch((er)=>{
console.log(er)
})
Output:
[[object Object] {
status: "fulfilled",
value: "P1"
}, [object Object] {
status: "fulfilled",
value: "P2"
}, [object Object] {
reason: "bad",
status: "rejected"
}]
Conclusion:
So that is how all 4 promise methods are used. Please feel free to like, comment, and share the blog.