Canceling promises
The cancelable promises proposal was withdrawn some time ago.
The new standard way is that your long-running function take a AbortSignal
{ signal }
property. The caller can use this signal to send an abort request to your function. Upon receiving the request, your function should reject its promise with an error.
Async browser functions like fetch()
reject their promises with a new DOMException('Message here', 'AbortError')
when canceled.
This already has good browser support and can be polyfilled on older browsers.
Example
Here is an async function countDown()
. It returns a promise that will be fulfilled after the given number of seconds:
Copyfunction countDown(seconds) { return new Promise((resolve, reject) => { setTimeout(resolve, seconds * 1000) }) }
Here is how you would use it:
CopycountDown(10).then(() => console.log("10 seconds have past")) // prints "10 seconds have past" after 10 seconds
Making countDown() abortable
Here is a variant of countDown()
that may be canceled by the caller before the time has elapsed:
Copyfunction countDown(seconds, options = {}) { return new Promise((resolve, reject) => { if (options.signal) { options.signal.addEventListener('abort', (event) => { reject(new DOMException('User aborted countdown', 'AbortError')) }) } setTimeout(resolve, seconds * 1000) }) }
You use it by passing an AbortSignal
as a { signal }
option:
Copylet controller = new AbortController() countDown(10, { signal: controller.signal }).then( () => console.log("10 seconds have past"), (reason) => console.log("Countdown failed:", reason) ) controller.abort() /* prints "Coundown failed: User aborted countdown" in the next microtask */
Compatibility
AbortController
is supported by all modern browsers, but not IE11.
If you need IE11 support you can polyfill AbortController
with very little code:
Copywindow.AbortController ||= class { constructor() { this.signal = document.createElement('abort-signal') } abort() { this.signal.dispatchEvent(new CustomEvent('abort')) } }