Promise.all vs allSettled vs any vs race — a live lab

<div class="wrap">
    <h1>🎮 Promise concurrency lab</h1>
    <p class="sub">
      Same four requests, fired at once. Set each one's <strong>latency</strong> and whether it
      <strong>fails</strong>, pick a combinator, and hit <strong>Run</strong> — watch the exact moment the
      group settles, and what it <em>keeps</em> vs. <em>throws away</em>.
    </p>

<div class="panel">
      <h2>1 · Pick a combinator</h2>
      <div class="seg" role="group" aria-label="Promise combinator">
        <button data-method="all"        aria-pressed="true">Promise.all</button>
        <button data-method="allSettled" aria-pressed="false">Promise.allSettled</button>
        <button data-method="any"        aria-pressed="false">Promise.any</button>
        <button data-method="race"       aria-pressed="false">Promise.race</button>
      </div>
      <p class="method-desc" id="methodDesc"></p>
    </div>

<div class="runbar">
      <button id="run">▶ Run</button>
      <button id="reset" class="ghost">Reset</button>
      <span class="grow"></span>
      <span class="clock" id="clock">0 ms</span>
    </div>

<div class="panel">
      <h2>2 · The four requests</h2>
      <div id="rows"></div>
      <div class="presets">
        <span class="lbl">Presets</span>
        <button data-preset="succeed">All succeed</button>
        <button data-preset="alerts">Alerts fails (500)</button>
        <button data-preset="slow">One is slow</button>
        <button data-preset="allfail">All fail</button>
      </div>
      <div class="legend" aria-hidden="true">
        <span><i class="sw" style="background:var(--good)"></i> resolved</span>
        <span><i class="sw" style="background:var(--bad)"></i> rejected</span>
        <span><i class="sw" style="background:var(--accent)"></i> decided the group</span>
        <span><i class="sw" style="background:var(--muted)"></i> discarded / ignored</span>
      </div>
    </div>

<div class="panel">
      <h2>3 · What the group returned</h2>
      <p class="status" id="status"><span class="dot">•</span><span class="idle" id="statusText">Press <strong>Run</strong> to fire all four requests concurrently.</span></p>
      <pre><code id="output" class="c">// the resolved value(s) or the rejection will appear here</code></pre>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.