What's the Difference Between Promise.all() and Promise.allSettled() in JavaScript?

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:

1. Browser compatibility
2. How they handle rejected promises;
3. The return value.

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 },
] */