Canceling asynchronous actions with Promise.race()

Suppose you started with a simple promise that resolves to a value after 3 seconds:

const delayedPromise = new Promise((resolve, reject) =>      setTimeout(resolve.bind(null, 'foobar'), 3000))   .then(val => console.log(val));   

You would like to have the ability to detach a part of your application from waiting for this promise.

A simple solution would be to expose the promise's reject handler and just invoke it from whatever is to perform the cancelation. However, it is preferable to stop waiting for this promise instead of destroying it.

Instead, you can take advantage of Promise.race() and introduce a cancellation promise alongside the original one:

// Use this method to capture the cancellation function   var cancel;       const cancelPromise = new Promise((resolve, reject) => {      cancel = reject;    });    const delayedPromise = new Promise((resolve, reject) =>      setTimeout(resolve.bind(null, 'foobar'), 3000));       // Promise.race() creates a new promise   Promise.race([cancelPromise, delayedPromise])   .then(     val => console.log(val),      () => console.error('cancelled!'));      // If you invoke cancel() before 3 seconds elapses   // (error) "cancelled!"         // Instead, if 3 seconds elapses   // "foobar"   

Now, if delayedPromise resolves first, the promise created by Promise.race() will log the value passed to it here, foobar. If, however, you invoke cancel() before it happens, then that same Promise will print a cancelled! error.

Promise.race() just waits for any of its inner promises to arrive at the final state. It creates and returns a new promise that is beholden to the state of the contained promises. When it observes that any of them transitions to the final state, the new promise also assumes this state.

Note that the use of Promise.race() doesn't affect the implementation of delayedPromise. Even when cancel() is invoked, delayedPromise will still be resolved and its handlers will still be executed normally, unaware that the surrounding Promise.race() has already been rejected. You can prove this to yourself by adding a resolve handler to delayedPromise, invoking cancel() and seeing the resolve handler of delayedPromise being executed anyway:

var cancel;    const cancelPromise = new Promise((resolve, reject) => {      cancel = reject;    });    const delayedPromise = new Promise((resolve, reject) =>       setTimeout(resolve.bind(null, 'foobar'), 3000))   .then(() => console.log('still resolved!'));       Promise.race([ cancelPromise, delayedPromise ])   .then(     val => console.log(val),      () => console.error('cancelled!'));      cancel();   // (error) cancelled!      // After 3 seconds elapses   // "still resolved!"