🎮 Promise.withResolvers()

Create a pending promise, then settle it from a button click or a timeout — completely outside the code that created it. That's the whole point of Promise.withResolvers(): resolve and reject live in your scope, ready for later.

Your browser doesn't implement Promise.withResolvers natively — this demo falls back to a tiny inline polyfill so it still runs identically. Native support is Baseline 2024 (Chrome 119+, Firefox 121+, Safari 17.4+, Node.js 22+).

1 Settle it from outside

The promise below is created once, up front. Confirm, Cancel, and the timeout all fire later, from outside — exactly like a real "are you sure?" dialog or a socket event.

2 Promise state

pending — waiting for an external event…

Settled value

—

resolve and reject are ordinary functions sitting in this scope — call either one from anywhere, anytime. Once the promise settles, every later call is silently ignored: the first settlement always wins. Try the last preset, or click Confirm and then Cancel yourself, to see it happen.

3 Old way vs new way

escape the executor

let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

Promise.withResolvers()

const { promise, resolve, reject } =
  Promise.withResolvers();

Both give you the same three things — a promise plus its resolve/reject functions, free to hand to code outside the constructor. The right side just skips the manual "declare outer variables, then capture them" dance. This demo's buttons call the right-hand form (or the polyfill below, if your browser lacks it).