Promise - is it possible to force cancel a promise

Question

I use ES6 Promises to manage all of my network data retrieval and there are some situations where I need to force cancel them.

Basically the scenario is such that I have a type-ahead search on the UI where the request is delegated to the backend has to carry out the search based on the partial input. While this network request (#1) may take a little bit of time, user continues to type which eventually triggers another backend call (#2)

Here #2 naturally takes precedence over #1 so I would like to cancel the Promise wrapping request #1. I already have a cache of all Promises in the data layer so I can theoretically retrieve it as I am attempting to submit a Promise for #2.

But how do I cancel Promise #1 once I retrieve it from the cache?

Could anyone suggest an approach?

Answer 1

If your use case involves lots of await, this solution should work. It involves using a closure to signal from the cancelling function to the promise that it should gracefully stop.

// convenience method for pausing for a period of time
async function delay(milliseconds: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, milliseconds));
}


// A simple demo for how to implement a cancellable promise using a closure
function makeTicker() {

    let cancelled = false

    const cancel = () => {
        cancelled = true
    }

    const start = async () => {
        while(!cancelled) {
            await delay(1000)
            console.log(new Date(), " Tick!")
        }
    }

    return { start, cancel }
}


// A method for showing how to use a cancellable promise
async function main() {

    let ticker = makeTicker()

    console.log("Starting ticker...")
    
    // when SIGINT (CTRL+C) is received, cancel the ticker
    process.on("SIGINT", ticker.cancel)

    // start ticking, but DON'T await it just yet...
    const startResult = ticker.start()

    // do stuff with the ticker running in the background
    console.log("Doing stuff in main!")
    await delay(1700)
    console.log("Doing stuff in main!")
    await delay(1700)
    console.log("Doing stuff in main!")
    await delay(1700)
    
    console.log("Waiting for ticker to finish...")

    // wait here for the ticker to be cancelled at some point...
    await startResult

    // SIGINT was received and the ticker was cancelled
    console.log("Ticker stopped ticking!")
}

Answer 2

Update for March 2024:

Now you can use Promise.withResolvers to create cancellable promise.

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

Below is a sample code which starts two promises and cancels slower one:

function lazy(id, delay) {
  const { promise, resolve, reject } = Promise.withResolvers()
  const timeoutId = setTimeout(() => {
    resolve(id)
    console.log("finished:", id)
  }, delay)
  const cancel = () => {
    clearTimeout(timeoutId)
    reject("cancelled")
    console.log("cancelled:", id)
  }
  return { promise, cancel }
}

const p1 = lazy("fast", 3000)
const p2 = lazy("slow", 5000)

const first = Promise.any([
  p1.promise.then(result => {
    p2.cancel()
    return result
  }),
  p2.promise.then(result => {
    p1.cancel()
    return result
  })
]).then(result => console.log("result is:", result))

Answer 3

In modern JavaScript - no

Promises have settled (hah) and it appears like it will never be possible to cancel a (pending) promise.

Instead, there is a cross-platform (Node, browsers, etc.) cancellation primitive as part of WHATWG (a standards body that also builds HTML) called AbortController. You can use it to cancel functions that return promises rather than promises themselves:

// Take a signal parameter in the function that needs cancellation
async function somethingIWantToCancel({ signal } = {}) {
  // either pass it directly to APIs that support it
  // (fetch and most Node APIs do)
  const response = await fetch('.../', { signal });
  // return response.json();
  // or if the API does not already support it
  // manually adapt your code to support signals:
  const onAbort = (e) => {
    // run any code relating to aborting here
  };
  signal.addEventListener('abort', onAbort, { once: true });
  // and be sure to clean it up when the action you are performing
  // is finished to avoid a leak
  // … some time later…
  signal.removeEventListener('abort', onAbort);
}

// Usage
const ac = new AbortController();
setTimeout(() => ac.abort(), 1000); // give it a 1 s timeout
try {
  await somethingIWantToCancel({ signal: ac.signal });
} catch (e) {
  if (e.name === 'AbortError') {
    // deal with cancellation in caller, or ignore
  } else {
    throw e; // don't swallow errors :)
  }
}

---

No. We can't do that yet.

ES6 promises do not support cancellation yet. It's on its way, and its design is something a lot of people worked really hard on. Sound cancellation semantics are hard to get right and this is work in progress. There are interesting debates on the "fetch" repo, on ES Discuss and on several other repos on GH but I'd just be patient if I were you.

But, but, but… cancellation is really important!

It is, the reality of the matter is cancellation is really an important scenario in client-side programming. The cases you describe like aborting web requests are important and they're everywhere.

So… the language screwed me!

Yeah, sorry about that. Promises had to get in first before further things were specified - so they went in without some useful stuff like .finally and .cancel - it's on its way though, to the spec through the DOM. Cancellation is not an afterthought it's just a time constraint and a more iterative approach to API design.

So what can I do?

You have several alternatives:

• Use a third party library like bluebird who can move a lot faster than the spec and thus have cancellation as well as a bunch of other goodies - this is what large companies like WhatsApp do.
• Pass a cancellation token.

Using a third party library is pretty obvious. As for a token, you can make your method take a function in and then call it, as such:

function getWithCancel(url, token) { // the token is for cancellation
  var xhr = new XMLHttpRequest;
  xhr.open("GET", url);
  return new Promise(function(resolve, reject) {
    xhr.onload = function () {
      resolve(xhr.responseText);
    });
    xhr.onerror = reject;
    token.cancel = function () { // specify cancellation
      xhr.abort(); // abort request
      reject(new Error("Cancelled")); // reject the promise
    };
  });
};

Which would let you do:

var token = {};
var promise = getWithCancel("/someUrl", token);

// later we want to abort the promise:
token.cancel();

Your actual use case - last

This isn't too hard with the token approach:

function last(fn) {
  var lastToken = { cancel: function () {} }; // start with no op
  return function() {
    lastToken.cancel();
    var args = Array.prototype.slice.call(arguments);
    args.push(lastToken);
    return fn.apply(this, args);
  };
}

Which would let you do:

var synced = last(getWithCancel);
synced("/url1?q=a"); // this will get cancelled 
synced("/url1?q=ab"); // this will get cancelled too
synced("/url1?q=abc"); // this will get cancelled too
synced("/url1?q=abcd").then(function () {
  // only this will run
});

And no, libraries like Bacon and Rx don't "shine" here because they're observable libraries, they just have the same advantage user level promise libraries have by not being spec bound. I guess we'll wait to have and see in ES2016 when observables go native. They are nifty for typeahead though.

Answer 4

Using a Promise subclass provided by the external package, this can be done as follows: (Live demo)

import { CPromise } from "c-promise2";

const cancelableFetch = (url) =>
  new CPromise(
    (resolve, reject, { signal }) => {
      resolve(fetch(url, { signal }));
    },
    { nativeController: true }
  );

let promise;

document.querySelector("#btn-request").onclick = () => {
  console.log("request");
  promise = cancelableFetch("https://dummyjson.com/users/?delay=1000&limit=1")
    .then((res) => res.json())
    .then((json) => {
      console.log(`JSON:`, JSON.stringify(json));
    });
};

document.querySelector("#btn-abort").onclick = () => {
  promise?.cancel("Don't need this anymore");
};

The same approach using another my library that provides a standalone cancelable promise class (Live Demo):

import AxiosPromise from "axios-promise";

const cancelableFetch = (url) =>
  new AxiosPromise((resolve, reject, { signal }) => {
    resolve(fetch(url, { signal }));
  });

let promise;

document.querySelector("#btn-request").onclick = () => {
  promise = cancelableFetch("https://dummyjson.com/users/?delay=1000&limit=1")
    .then((res) => res.json())
    .then((json) => {
      console.log(`JSON:`, JSON.stringify(json));
    });
};

document.querySelector("#btn-abort").onclick = () => {
  promise?.cancel("Don't need this anymore");
};

Answer 5

Promises are not intrinsically cancelable. As an alternative to a regular promise, see https://www.npmjs.com/package/promise-abortable

$ npm install promise-abortable

This module provides an abortable Promise implementation:
(pulled from the npm readme)

// 1. Instantiate
const promise = new AbortablePromise((resolve, reject, signal) => {
  // 2. Set abort handler
  signal.onabort = reason => {
    // 4. Abort won't reject, but you can reject manually
  };
});
// 3. Invoke `signal.onabort(reason)`
promise.abort(reason);

Answer 6

With AbortController

It is possible to use abort controller to reject promise or resolve on your demand:

let controller = new AbortController();

let task = new Promise((resolve, reject) => {
  const abortListener = ({target}) => {
    controller.signal.removeEventListener('abort', abortListener);
    reject(target.reason);
  }
  controller.signal.addEventListener('abort', abortListener);

  // some logic ...
});

controller.abort('cancelled reason'); // task is now in rejected state

Also it's better to remove event listener on abort to prevent memory leaks

And you can later check if error was thrown by abort by checking the controller.signal.aborted boolean property like:

const res = task.catch((err) => (
  controller.signal.aborted 
    ? { value: err } 
    : null
));

Abort controller will not cancel running the internal logic in Promise. But not invoking the resolve or reject will result in Promise pending status forever, in that case you also will not get .catch fired with any error if that's your intension (but this will lead to memory leak) so e.g. cancelled fetch fires reject

xhr.onload = () => {
  if(controller.signal.aborted) reject(controller.signal.reason);
  resolve(xhr.responseText);
}

Same works for cancelling fetch:

let controller = new AbortController();
fetch(url, {
  signal: controller.signal
});

or just pass controller:

let controller = new AbortController();
fetch(url, controller);

And call abort method to cancel one, or infinite number of fetches where you passed this controller controller.abort();

Answer 7

So I have an async function that I needed to cancel on user input, but it's a long running one that involves mouse control.

I used p-queue and added each line in my function into it and have an observable that I feed the cancellation signal. Anything that the queue starts processing will run no matter what but you should be able to cancel anything after that by clearing the queue. The shorter the task you add to the queue, the sooner you can quit after getting the cancel signal. You can be lazy and throw whole chunks of code into the queue instead of the one liners i have in the example.

p-queue releases Version 6 works with commonjs, 7+ switches to ESM and could break your app. Breaks my electron/typescript/webpack one.

const cancellable_function = async () => {
 const queue = new PQueue({concurrency:1});
 queue.pause();

 queue.addAll([
   async () => await move_mouse({...}),
   async () => await mouse_click({...}),
 ])

 for await (const item of items) {
  queue.addAll([
    async () => await do_something({...}),
    async () => await do_something_else({...}),
  ])
 } 

 const {information} = await get_information();

 queue.addAll([
   async () => await move_mouse({...}),
   async () => await mouse_click({...}),
 ])
 
 cancel_signal$.pipe(take(1)).subscribe(() => {
   queue.clear();
 });

 queue.start();
 await queue.onEmpty()
}

Answer 8

I found the posted solutions here a little hard to read, so I created a helper function that is in my opinion easier to use.

The helper function gives access to to the information whether the current call is already obsolete or not. With this information the function itself has to take care of things accordingly (usually by simply returning).

// Typescript
export function obsoletableFn<Res, Args extends unknown[]>(
  fn: (isObsolete: () => boolean, ...args: Args) => Promise<Res>,
): (...args: Args) => Promise<Res> {
  let lastCaller = null;

  return (...args: Args) => {
    const me = Symbol();
    lastCaller = me;

    const isObsolete = () => lastCaller !== me;

    return fn(isObsolete, ...args);
  };
}

// helper function
function obsoletableFn(fn) {
  let lastCaller = null;
  return (...args) => {
    const me = Symbol();
    lastCaller = me;
    const isObsolete = () => lastCaller !== me;
    return fn(isObsolete, ...args);
  };
}

const simulateRequest = () => new Promise(resolve => setTimeout(resolve, Math.random() * 2000 + 1000));

// usage
const myFireAndForgetFn = obsoletableFn(async(isObsolete, x) => {
  console.log(x, 'starting');
  await simulateRequest();
  if (isObsolete()) {
    console.log(x, 'is obsolete');
    // return, as there is already a more recent call running
    return;
  }
  console.log(x, 'is not obsolete');
  document.querySelector('div').innerHTML = `Response ${x}`;
});

myFireAndForgetFn('A');
myFireAndForgetFn('B');

<div>Waiting for response...</div>

Answer 9

Using AbortController

I've been researching about this for a few days and I still feel that rejecting the promise inside an abort event handler is only part of the approach.

The thing is that as you may know, only rejecting a promise, makes the code awaiting for it to resume execution but if there's any code that runs after the rejection or resolution of the promise, or outside of its execution scope, e.g. Inside of an event listener or an async call, it will keep running, wasting cycles and maybe even memory on something that isn't really needed anymore.

Lacking approach

When executing the snippet below, after 2 seconds, the console will contain the output derived from the execution of the promise rejection, and any output derived from the pending work. The promise will be rejected and the work awaiting for it can continue, but the work will not, which in my opinion is the main point of this exercise.

let abortController = new AbortController();
new Promise( ( resolve, reject ) => {
  if ( abortController.signal.aborted ) return;

  let abortHandler = () => {
    reject( 'Aborted' );
  };
  abortController.signal.addEventListener( 'abort',  abortHandler );

  setTimeout( () => {
    console.log( 'Work' );
    console.log( 'More work' );
    resolve( 'Work result' );
    abortController.signal.removeEventListener( 'abort', abortHandler );
  }, 2000 );
} )
  .then( result => console.log( 'then:', result ) )
  .catch( reason => console.error( 'catch:', reason ) );
setTimeout( () => abortController.abort(), 1000 );

Which leads me to think that after defining the abort event handler there must be calls to

if ( abortController.signal.aborted ) return;

in sensible points of the code that is performing the work so that the work doesn't get performed and can gracefully stop if necessary (Adding more statements before the return in the if block above).

Proposal

This approach reminds me a little about the cancellable token proposal from a few years back but it will in fact prevent work to be performed in vain. The console output should now only be the abort error and nothing more and even, when the work is in progress, and then cancelled in the middle, it can stop, as said before in a sensible step of the processing, like at the beginning of a loop's body

let abortController = new AbortController();
new Promise( ( resolve, reject ) => {
  if ( abortController.signal.aborted ) return;

  let abortHandler = () => {
    reject( 'Aborted' );
  };
  abortController.signal.addEventListener( 'abort',  abortHandler );

  setTimeout( () => {
    if ( abortController.signal.aborted ) return;
    console.log( 'Work' );

    if ( abortController.signal.aborted ) return;
    console.log( 'More work' );
    resolve( 'Work result' );
    abortController.signal.removeEventListener( 'abort', abortHandler );
  }, 2000 );
} )
  .then( result => console.log( 'then:', result ) )
  .catch( reason => console.error( 'catch:', reason ) );
setTimeout( () => abortController.abort(), 1000 );

Answer 10

For Node.js and Electron, I'd highly recommend using Promise Extensions for JavaScript (Prex). Its author Ron Buckton is one of the key TypeScript engineers and also is the guy behind the current TC39's ECMAScript Cancellation proposal. The library is well documented and chances are some of Prex will make to the standard.

On a personal note and coming from C# background, I like very much the fact that Prex is modelled upon the existing Cancellation in Managed Threads framework, i.e. based on the approach taken with CancellationTokenSource/CancellationToken .NET APIs. In my experience, those have been very handy to implement robust cancellation logic in managed apps.

I also verified it to work within a browser by bundling Prex using Browserify.

Here is an example of a delay with cancellation (Gist and RunKit, using Prex for its CancellationToken and Deferred):

// by @noseratio
// https://gist.github.com/noseratio/141a2df292b108ec4c147db4530379d2
// https://runkit.com/noseratio/cancellablepromise

const prex = require('prex');

/**
 * A cancellable promise.
 * @extends Promise
 */
class CancellablePromise extends Promise {
  static get [Symbol.species]() { 
    // tinyurl.com/promise-constructor
    return Promise; 
  }

  constructor(executor, token) {
    const withCancellation = async () => {
      // create a new linked token source 
      const linkedSource = new prex.CancellationTokenSource(token? [token]: []);
      try {
        const linkedToken = linkedSource.token;
        const deferred = new prex.Deferred();
  
        linkedToken.register(() => deferred.reject(new prex.CancelError()));
  
        executor({ 
          resolve: value => deferred.resolve(value),
          reject: error => deferred.reject(error),
          token: linkedToken
        });

        await deferred.promise;
      } 
      finally {
        // this will also free all linkedToken registrations,
        // so the executor doesn't have to worry about it
        linkedSource.close();
      }
    };

    super((resolve, reject) => withCancellation().then(resolve, reject));
  }
}

/**
 * A cancellable delay.
 * @extends Promise
 */
class Delay extends CancellablePromise {
  static get [Symbol.species]() { return Promise; }

  constructor(delayMs, token) {
    super(r => {
      const id = setTimeout(r.resolve, delayMs);
      r.token.register(() => clearTimeout(id));
    }, token);
  }
}

// main
async function main() {
  const tokenSource = new prex.CancellationTokenSource();
  const token = tokenSource.token;
  setTimeout(() => tokenSource.cancel(), 2000); // cancel after 2000ms

  let delay = 1000;
  console.log(`delaying by ${delay}ms`); 
  await new Delay(delay, token);
  console.log("successfully delayed."); // we should reach here

  delay = 2000;
  console.log(`delaying by ${delay}ms`); 
  await new Delay(delay, token);
  console.log("successfully delayed."); // we should not reach here
}

main().catch(error => console.error(`Error caught, ${error}`));

Note that cancellation is a race. I.e., a promise may have been resolved successfully, but by the time you observe it (with await or then), the cancellation may have been triggered as well. It's up to you how you handle this race, but it doesn't hurts to call token.throwIfCancellationRequested() an extra time, like I do above.

Answer 11

You can make the promise reject before finishing:

// Our function to cancel promises receives a promise and return the same one and a cancel function
const cancellablePromise = (promiseToCancel) => {
  let cancel
  const promise = new Promise((resolve, reject) => {
    cancel = reject
    promiseToCancel
      .then(resolve)
      .catch(reject)
  })
  return {promise, cancel}
}

// A simple promise to exeute a function with a delay
const waitAndExecute = (time, functionToExecute) => new Promise((resolve, reject) => {
  timeInMs = time * 1000
  setTimeout(()=>{
    console.log(`Waited ${time} secs`)
    resolve(functionToExecute())
  }, timeInMs)
})

// The promise that we will cancel
const fetchURL = () => fetch('https://pokeapi.co/api/v2/pokemon/ditto/')

// Create a function that resolve in 1 seconds. (We will cancel it in 0.5 secs)
const {promise, cancel} = cancellablePromise(waitAndExecute(1, fetchURL))

promise
  .then((res) => {
    console.log('then', res) // This will executed in 1 second
  })
  .catch(() => {
    console.log('catch') // We will force the promise reject in 0.5 seconds
  })

waitAndExecute(0.5, cancel) // Cancel previous promise in 0.5 seconds, so it will be rejected before finishing. Commenting this line will make the promise resolve

Unfortunately the fetch call has already be done, so you will see the call resolving in the Network tab. Your code will just ignore it.

Answer 12

Because @jib reject my modify, so I post my answer here. It's just the modfify of @jib's anwser with some comments and using more understandable variable names.

Below I just show examples of two different method: one is resolve() the other is reject()

let cancelCallback = () => {};

input.oninput = function(ev) {
  let term = ev.target.value;
  console.log(`searching for "${term}"`);
  cancelCallback(); //cancel previous promise by calling cancelCallback()

  let setCancelCallbackPromise = () => {
    return new Promise((resolve, reject) => {
      // set cancelCallback when running this promise
      cancelCallback = () => {
        // pass cancel messages by resolve()
        return resolve('Canceled');
      };
    })
  }

  Promise.race([setCancelCallbackPromise(), getSearchResults(term)]).then(results => {
    // check if the calling of resolve() is from cancelCallback() or getSearchResults()
    if (results == 'Canceled') {
      console.log("error(by resolve): ", results);
    } else {
      console.log(`results for "${term}"`, results);
    }
  });
}


input2.oninput = function(ev) {
  let term = ev.target.value;
  console.log(`searching for "${term}"`);
  cancelCallback(); //cancel previous promise by calling cancelCallback()

  let setCancelCallbackPromise = () => {
    return new Promise((resolve, reject) => {
      // set cancelCallback when running this promise
      cancelCallback = () => {
        // pass cancel messages by reject()
        return reject('Canceled');
      };
    })
  }

  Promise.race([setCancelCallbackPromise(), getSearchResults(term)]).then(results => {
    // check if the calling of resolve() is from cancelCallback() or getSearchResults()
    if (results !== 'Canceled') {
      console.log(`results for "${term}"`, results);
    }
  }).catch(error => {
    console.log("error(by reject): ", error);
  })
}

function getSearchResults(term) {
  return new Promise(resolve => {
    let timeout = 100 + Math.floor(Math.random() * 1900);
    setTimeout(() => resolve([term.toLowerCase(), term.toUpperCase()]), timeout);
  });
}

Search(use resolve): <input id="input">
<br> Search2(use reject and catch error): <input id="input2">

Answer 13

Standard proposals for cancellable promises have failed.

A promise is not a control surface for the async action fulfilling it; confuses owner with consumer. Instead, create asynchronous functions that can be cancelled through some passed-in token.

Another promise makes a fine token, making cancel easy to implement with Promise.race:

Example: Use Promise.race to cancel the effect of a previous chain:

let cancel = () => {};

input.oninput = function(ev) {
  let term = ev.target.value;
  console.log(`searching for "${term}"`);
  cancel();
  let p = new Promise(resolve => cancel = resolve);
  Promise.race([p, getSearchResults(term)]).then(results => {
    if (results) {
      console.log(`results for "${term}"`,results);
    }
  });
}

function getSearchResults(term) {
  return new Promise(resolve => {
    let timeout = 100 + Math.floor(Math.random() * 1900);
    setTimeout(() => resolve([term.toLowerCase(), term.toUpperCase()]), timeout);
  });
}

Search: <input id="input">

Here we're "cancelling" previous searches by injecting an undefined result and testing for it, but we could easily imagine rejecting with "CancelledError" instead.

Of course this doesn't actually cancel the network search, but that's a limitation of fetch. If fetch were to take a cancel promise as argument, then it could cancel the network activity.

I've proposed this "Cancel promise pattern" on es-discuss, exactly to suggest that fetch do this.

Answer 14

I faced similar problem recently.

I had a promise based client (not a network one) and i wanted to always give the latest requested data to the user to keep the UI smooth.

After struggling with cancellation idea, Promise.race(...) and Promise.all(..) i just started remembering my last request id and when promise was fulfilled i was only rendering my data when it matched the id of a last request.

Hope it helps someone.

Answer 15

I have checked out Mozilla JS reference and found this:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/race

Let's check it out:

var p1 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 500, "one"); 
});
var p2 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 100, "two"); 
});

Promise.race([p1, p2]).then(function(value) {
  console.log(value); // "two"
  // Both resolve, but p2 is faster
});

We have here p1, and p2 put in Promise.race(...) as arguments, this is actually creating new resolve promise, which is what you require.