

What is the Difference Between Promise.all and Promise.allSettled?
source link: https://typeofnan.dev/what-is-the-difference-between-promise-all-and-promise-allsetllted/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Nick Scialli • May 13, 2021 • 🚀 4 minute read
Promise.all
and Promise.allSettled
are two different ways to handle an array of Promises in JavaScript. Let’s compare them and talk about when it might be appropriate to use each.
How They’re Similar
The primary similarity between Promise.all
and Promise.allSettled
is that both methods take an array of Promises as an argument. You use them because you have a group of Promises that you want to handle before moving on. That’s kind of where the similarities end though. As we’ll see, the ways these methods actually handle Promises are quite different.
The Big Difference: Handling Rejection(s)
Handling rejection is the big differentiator between Promise.all
and Promise.allSettled
. If you want your group of Promise to fail immediately as soon as one of the Promises is rejected, you should use Promise.all
. However, if you want to give all Promises a shot before moving on, consider Promise.allSettled
.
Let’s take the following example of a function that returns a Promise that has a 50/50 chance of resolving or rejecting and will do so after a random amount of time.
function randomPromise(id) {
return new Promise(function (res, rej) {
setTimeout(function () {
if (Math.random() > 0.5) {
res(id);
} else {
rej(`${id} failed randomly!`);
}
}, Math.random() * 1000);
});
}
Promise.all
When handling rejection, Promise.all
is all or nothing. If one Promise rejects, Promise.all
immediately stops and calls the catch
method with the reported error.
Promise.all([randomPromise(1), randomPromise(2), randomPromise(3)])
.then(function (data) {
console.log(data);
})
.catch(function (err) {
console.error(err);
});
If all three Promises successfully resolve, you’ll see [1, 2, 3]
logged to the console. More likely, however, is that one of the Promises fails. As soon as it does you will see the error for that Promise printed to the console:
2 failed randomly!
Note a couple things:
- Even though the first and third Promise might have resolved successfully, we never make it to the
then
method, we just went straight tocatch
. - You will never see two errors in the console because
Promise.all
fails immediately when one of the Promises rejects.
Promise.allSettled
Promise.allSettled
will go ahead and let all Promise resolve or reject (i.e., settle) before giving you the results. Promise.allSettled
doesn’t reject and it gives you all the information you need in the then
method.
Let’s look at the previous example and you’ll see what I mean:
Promise.allSettled([randomPromise(1), randomPromise(2), randomPromise(3)]).then(
function (data) {
console.log(data);
}
);
If all three Promises resolve successfully, the data
logged to the console will look like this:
[
{ status: "fulfilled", value: 1 },
{ status: "fulfilled", value: 2 },
{ status: "fulfilled", value: 3 }
]
Not that we now get status
information in our then
handler. Why is that? Well, it’s because if any number of the Promises rejects, you need to know that information. With allSettled
, we can have Promises in the array reject and we’ll still wait for the rest of the Promises to resolve (or reject) before moving on to the then
handler, at which point we get information about all the Promises (even the rejected ones).
Let’s look at an example where two of the Promises rejected. Our data logged to the console might look like this:
[
{ status: "rejected", reason: "1 failed randomly!" },
{ status: "fulfilled", value: 2 },
{ status: "rejected", reason: "3 failed randomly!" }
]
Conclusion
If your Promises are related such that you’d like to immediately bail when one of the Promises rejects, Promise.all
is probably for you. However, if you’d like to keep going with the rest of the Promises even if any number of them fail, then you should probably reach for Promise.allSettled
.
Recommend
-
46
Photo by Ryan Franco on
-
33
I’ve recently read the Promise combinators article in v8 blog. It's about two upcoming...
-
15
I've recently read the Promise combinators article in v8 blog. It's about two upcoming methods in Promise API: Promise.allSettled() and...
-
19
Promises have not been a new concept in the javascript community. They have existed in the ecosystem for a long time. JavaScript promises existed even before they were officially made a part of the ECMAScript spec in ES6....
-
42
Mastering Promise.allSettled in ReactEvery year a new version of javascript comes out. This year’s version, ES2020, released with a bunch of cool new features. While a lot of features got a lot of hype, a ne...
-
9
-
14
Creating a JavaScript promise from scratch, Part 6: Promise.all() and Promise.allSettled() Promise.all() and Promise.allSettled() work on any number of promises to allow you to know when all of the promises have resolved...
-
4
Using the Promise all(), race(), allSettled() and any() in Javascript With the many options for solving multiple multiple concurrent promises things can get a bit confusing. Let's see the options one by one: ...
-
6
Promise 对象是ECMAScript 6中新增的对象,主要将 JavaScript 中的异步处理对象和处理规则进行了规范化。前面介绍了《Promise.any() 原理解析及使用指南》和《
-
4
This tutorial will teach you how to use promises to wait in JavaScript. In this tutorial, I will teach you about the Promise.all() and Promise.allSettled() methods and how you can use them to work with multiple pro...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK