webdevpuneet.com

Related Snippets

64 in Visualizers category
6–11 of 60

Promise.all vs allSettled vs race vs any Visualizer

Huffman Coding Tree Visualizer

Levenshtein Edit Distance Dynamic Programming Visualizer

BFS vs DFS Graph Traversal Visualizer

Binary Heap Priority Queue Visualizer

Dijkstra's Shortest Path Visualizer

Promise.all vs allSettled vs race vs any — Free Interactive Visualizer

Promise.all vs allSettled vs race vs any Visualizer · Visualizers · Plain HTML, CSS & JS · Live preview

CategoryVisualizers
TagsAccessibilityCSS Grid

Copy & paste

Source Code

<div class="pc">
  <div class="pc-top">
    <h2>Promise combinators on a timeline</h2>
    <p>Set how long each task takes and whether it fails, then run all four combinators on the same tasks at the same moment.</p>
  </div>
  <div class="pc-tasks" id="pcTasks"></div>
  <div class="pc-actions">
    <button type="button" id="pcRun">Run all four</button>
    <button type="button" id="pcPreset" class="ghost">Randomise</button>
  </div>
  <div class="pc-lanes" id="pcLanes"></div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Real promises
Actual resolve/reject timers, not a simulation of the rules.
All four combinators
all, allSettled, race and any side by side.
Live timeline
Bars grow with elapsed time.
Settle markers
Amber for fulfilled, red for rejected.
Ignored tasks faded
Work that can no longer affect the result.
Result values shown
Arrays, statuses and AggregateError.
Configurable tasks
Duration and failure per task.
No unhandled rejections
Raw promises are caught explicitly.

About this UI Snippet

JavaScript Promise Combinators — Four Rules on One Timeline

Screenshot of the Promise.all vs allSettled vs race vs any Visualizer snippet rendered live

JavaScript has four built-in ways to wait for several promises at once, and they differ in exactly two things: when they settle, and what counts as success. Reading the spec wording is one thing; seeing the same four tasks produce four different outcomes is what makes it stick.

Real promises, same start time

Each task is a real Promise that resolves or rejects after its delay. All four combinators receive the same array of promises at the same moment, so the only difference between lanes is the combinator's rule.

The four rules

- Promise.all fulfils with an array of values when every task fulfils, and rejects immediately when any task rejects — it short-circuits on the first failure. - Promise.allSettled never rejects. It waits for every task and fulfils with { status, value | reason } objects. - Promise.race settles the same way as whichever task settles first, success or failure. - Promise.any fulfils with the first success and ignores failures, rejecting with an AggregateError only if every task fails.

Reading the timeline

Bars grow in real time. Striped bars are rejections. The vertical line marks when the combinator settled — amber for fulfilled, red for rejected — and bars that are still running afterwards fade, because nothing they do can change that combinator's result.

Short-circuiting doesn't cancel

When Promise.all rejects early, the other tasks keep running: promises have no built-in cancellation. The faded bars keep growing to make this visible. Use an AbortController to actually stop network requests.

Unhandled rejections

The raw task promises get an empty .catch() so the browser doesn't report unhandled rejections for promises that are observed only through combinators.

Step by step

How to Use

  1. 1
    Watch the first runThe page runs once automatically with a failing third task.
  2. 2
    Adjust tasksChange each task's duration and tick "Rejects" to make it fail.
  3. 3
    Run all fourCompare when and how each combinator settles.
  4. 4
    RandomiseGenerate new durations and failures to test your predictions.
  5. 5
    Predict firstGuess each lane's result before pressing Run.

Real-world uses

Common Use Cases

Learning async JavaScript
Compare Promise.all, allSettled, race and any on the same four real promises, seeing when each settles and with what value.
Choosing the right API
Decide how to load a dashboard's widgets, seeing which combinator tolerates failure and which short-circuits on the first rejection.
Adding timeouts
See why race is the usual way to put a timeout on a request, with a live timeline of bars growing with elapsed time.
Fallback mirrors
Understand why any returns the first mirror that succeeds, ignoring rejections unless every single promise fails.
Teaching and interviews
Explain a frequently asked question visually, with amber markers for fulfilled and red for rejected promises.
Related: Event Loop Visualizer
When promise callbacks actually run: Event Loop Visualizer.
Related: Debounce vs Throttle
Another timing concept visualized: Debounce vs Throttle Visualizer.

Got questions?

Frequently Asked Questions

Promise.all rejects as soon as any promise rejects, so you lose the other results. Promise.allSettled waits for every promise and always fulfils with an array of { status, value } or { status, reason } objects.

race settles with the first promise to settle, even if it rejects. any waits for the first promise to fulfil and ignores rejections, rejecting with an AggregateError only if all of them reject.

No. JavaScript promises cannot be cancelled. The other operations keep running; only the combined promise has already rejected. Use AbortController to cancel fetch requests.

Race the request against a promise that rejects after a delay: Promise.race([fetch(url), timeout(5000)]). Better still, use AbortSignal.timeout(5000) so the request is actually aborted.

When the tasks are independent and a failure in one shouldn't discard the others, such as loading several dashboard widgets or sending a batch of notifications.