Use Promise.allSettled() when independent optional widgets can succeed or fail separately and you want to handle every result. It waits until all supplied promises settle, then gives you an outcome for each one, so your code can render successful widgets while showing a fallback for failed ones.
What Promise.allSettled() returns
Promise.allSettled(iterable) returns a promise that fulfills after every input promise has either fulfilled or rejected. Its result is an array of outcome objects in the same order as the inputs—not in the order the tasks finished. MDN describes the method as widely available across browsers since July 2020; check your project’s compatibility matrix for the runtimes you support. See MDN’s Promise.allSettled() reference.
- A fulfilled outcome has
status: "fulfilled"and avalueproperty. - A rejected outcome has
status: "rejected"and areasonproperty.
Check status before accessing value or reason. The two outcomes have different properties, so treating every result as though it succeeded can cause errors in your handling code.
Render each optional widget independently
Keep each request associated with its widget. Since result order matches input order, an indexed mapping works as long as the input and result arrays stay aligned. Storing a key beside each load makes that relationship explicit:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
const widgets = [
{ key: "weather", load: loadWeather() },
{ key: "news", load: loadNews() },
{ key: "recommendations", load: loadRecommendations() },
];
const outcomes = await Promise.allSettled(
widgets.map(({ load }) => load)
);
for (const [index, outcome] of outcomes.entries()) {
const key = widgets[index].key;
if (outcome.status === "fulfilled") {
renderWidget(key, outcome.value);
} else {
renderWidgetFallback(key, outcome.reason);
}
}Adapt the fallback to the widget: you might omit it, display a neutral unavailable message, or offer a retry action. Promise.allSettled() only reports the outcomes; it does not render widgets, decide how errors should appear, or retry rejected work. Avoid showing raw rejection details to users if they may expose internal information or be confusing. Send diagnostic details through your application’s established logging or error-reporting path instead.
Choose between Promise.all() and Promise.allSettled()
| Method | Use it when | What the combined promise does |
|---|---|---|
Promise.all() |
Every task must succeed for the combined operation to be useful, such as when tasks depend on one another, or you want fail-fast rejection. | Rejects if an input promise rejects. |
Promise.allSettled() |
Tasks are independent, partial results remain useful, and you need to handle every task’s outcome. | Fulfills after all inputs settle with one outcome record per input. |
MDN documents this distinction in its Promise.allSettled() reference and Promise.all() reference. Don’t use allSettled() to suppress failures in required or dependent data: choose the method that matches what the application should do when a task fails.
Account for waiting and progressive rendering
The code after await Promise.allSettled(...) runs only after the slowest input settles. That is useful when one place should process a complete set of outcomes, but it can delay rendering fast widgets while another request remains pending. If the interface should display each widget as soon as its own request completes, handle completion per widget instead of waiting for the combined promise.
The method does not impose a timeout or cancel slow work. If a request needs a deadline or cancellation behavior, implement that separately using the mechanisms appropriate to your application and runtime.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minuteCompatibility and specification
MDN labels Promise.allSettled() Baseline and widely available, with browser support across browsers since July 2020. Older or constrained environments may differ, so verify support for your actual deployment targets. The method’s normative algorithm is included in the ECMAScript 2025 specification.
Quick Recap
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
