Use `Promise.all`, `allSettled`, `race` and `any` with intent

Coordinate multiple asynchronous tasks with the right promise combinator depending on whether you need total success, partial resilience, the fastest result or the first successful answer.

How much do you know about JavaScript?

📘 Theory

Start from the contract, not the syntax

Before you write the code, decide what should happen when one task fails or arrives first.

Real products often launch several requests together: profile, permissions, notifications, charts, metrics or search suggestions.

The key question is not only how to run them, but how much of the interface should depend on all of them succeeding.

Promise.all

Everything must succeed or the whole flow fails.

Promise.allSettled

You always get every result and can degrade partially.

Promise.race

The first settled promise wins, whether it succeeds or fails.

Promise.any

The first successful promise wins, and rejections are ignored until all fail.

Use `Promise.all()` when the screen needs everything

This is a fail-fast contract for critical combined data.

`Promise.all()` preserves the input order in its final array even if the promises settle in a different order.

If one promise rejects, the whole combined promise rejects. That is useful when the view does not make sense with incomplete data.

Use `Promise.allSettled()` for partial resilience

If one widget can fail without killing the whole dashboard, this combinator is often the better fit.

Instead of one global success or failure, you receive an array of result objects with `status` and either `value` or `reason`.

That lets you render successful modules and degrade or hide only the failed ones.

1 Start from the contract, not the syntax 2 Use `Promise.all()` when the screen needs everything 3 Use `Promise.allSettled()` for partial resilience

🧪 Learn by doing

Example Guided example: true parallel loading with `Promise.all()` Compare the total duration when independent asynchronous tasks run together.

⌄

Example Interactive demo: compare `all`, `allSettled`, `race` and `any` Trigger simulated async tasks and see how the final result changes depending on the combinator.

⌄

🏁 Challenges

Challenge Challenge: load critical dashboard data with `Promise.all()` Combine two mandatory async calls and return one object ready for the UI.

⌄

🧰 Resources

Useful links

MDN: Promise.all() MDN: Promise.allSettled() MDN: Promise.any() MDN: Promise.race() MDN: Using promises

Test

Check your knowledge with a test about JavaScript.

Test for JavaScript

Course resources 62

📘 Glossary 🎧 Audio 📄 PDFs 🖼️ Infographics 🎬 Videos 🔗 Links 🧠 Flashcards 🧩 Snippets

‹

Lesson 38

Advanced fetch: cancel requests, retry safely and avoid races

Lesson 40

Use browser APIs with intent: Clipboard, URL, History and observers

›