Both methods, Promise.all()
and Promise.allSettled()
, take an iterable of promises as an input and wait for all promises to resolve. However, they differ in terms of:
Browser Compatibility
The Promise.all()
method was introduced in ES6, while the Promise.allSettled()
method was introduced in ES11. Therefore, they differ in terms of which browsers support them natively.
Difference in Handling of Rejected Promises
Promise.all()
:
Promise.all()
resolves only when all given promises resolve, and will reject immediately if any of the promises reject (or non-promises throw an error). It is useful in cases when you have interdependent tasks, where it makes sense to reject immediately upon any of them rejecting.
Promise.allSettled()
:
Promise.allSettled()
resolves when all the given promises have either fulfilled or rejected. Unlike Promise.all()
, it does not immediately reject upon any of the promises rejecting, instead it waits for all promises to complete, even if some of them fail. Therefore, it is useful in cases when you have multiple asynchronous tasks that are not interdependent, where you may want to know the result of each promise.
Difference in Return Value
Promise.all()
:
Promise.all()
returns a single Promise
that resolves to an array of the results of all given promises. For example:
const p1 = Promise.resolve(1); const p2 = new Promise((resolve, reject) => { setTimeout(resolve, 2, 'foo'); }); const p3 = 3; Promise.all([p1, p2, p3]) .then((values) => console.log(values)); // [1, 'foo', 3]
In case any of the promises fail, Promise.all()
rejects with the value of the promise that rejected (regardless of whether the other promises have resolved).
const p1 = Promise.resolve(1); const p2 = Promise.reject('foo'); const p3 = 3; Promise.all([p1, p2, p3]) .then((values) => console.log(values)) .catch((err) => console.log(err)); // 'foo'
Promise.allSettled()
:
Promise.allSettled()
returns an array of objects that describes the outcome of each promise. Depending on whether the promises were resolved or rejected, the resulting array of objects each contains a status
string. If the status
is "fulfilled
", then a value
property is present, or if the status
is "rejected
", then a reason
property is present. For example:
const p1 = Promise.resolve(1); const p2 = Promise.reject('foo'); const p3 = 3; Promise.allSettled([p1, p2, p3]) .then((values) => console.log(values)); /* [ { status: 'fulfilled', value: 1 }, { status: 'rejected', reason: 'foo' }, { status: 'fulfilled', value: 3 }, ] */
This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.