The Promise.all() and Promise.allSettled() are two powerful methods to process multiple promises together. Many a times we might depend on not one but a set of requests/async tasks and these methods can be really handy in such cases. In this post we’ll see how they work with some examples.
Promises are my favourite feature in JavaScript and understanding how they work is essential for asynchronous programming. I’ve written an brief article to explain the concept of Promise, do read it if you are new to this concept.
Promise.all()
The Promise.all() method accepts an iterable of promises and it is fulfilled only when all the promises are fulfilled and the Promise.all() gets rejected even if one of the given promises fail/reject. On fulfillment it returns an array of results of the given promises.
const promise1 = 1;
const promise2 = Promise.resolve(22);
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 2, 'three');
});
Promise.all([promise1, promise2, promise3])
.then(result => console.log(result));
// Output: Array [1, 22, "three"]
The Promise.all() method gets rejected immediately even if one of the input promises gets rejected.
const promise1 = 1;
const promise2 = Promise.reject("Nope :-( Rejected !");
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 2, 'three');
});
Promise.all([promise1, promise2, promise3])
.then(values => console.log(values))
.catch(error => console.log(error));
// Output: "Nope :-( Rejected !"
Promise.allSettled()
The Promise.allSettled() method accepts an array of promises and returns a promise that is resolved only when all the promises are settled i.e they are either fulfilled or rejected. This feature was part of the ES2020 release
const promise1 = 1;
const promise2 = Promise.resolve(22);
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 2, 'three');
});
Promise.allSettled([promise1, promise2, promise3])
.then(values => console.log(values))
.catch(error => console.log(error));
The output of Promise.allSettled() is fascinating because it returns an array of objects along with the return value, for example below is the output for the above code.
Array[Object {
status: "fulfilled",
value: 1
}, Object {
status: "fulfilled",
value: 22
}, Object {
status: "fulfilled",
value: "three"
}]
Summary
- Both Promise.all() and Promise.allSettled() accept an iterable/array of promises
- Promise.all() returns only when all promises are successful
- Promise.all() gets rejected even if one promise gets rejected
- Promise.allSettled() returns only when all promises are settled
- Settled = either fulfilled or rejected
Conclusion
I think both the methods can be used based on the use cases, the Promise.all() sounds kind of a stricter version we are either all in or all out. Suppose we need a set of dependencies and all of them are compulsory for further execution. And, the Promise.allSettled() could be used to collectively obtain the result of a set of promises, independent of their success/rejection factor.
Which one do you see yourself using often?