What is the best way to cancel a Promise if it hasn't been resolved yet

Question

What is the best way to cancel a Promise if it hasn't been resolved yet

Let's consider a situation where I have implemented a search function to make an HTTP call. Each call made can have varying durations, and it is crucial for the system to cancel any previous HTTP requests and only await results from the latest call.

async function search(timeout){

   const data = await simulateHTTPRequest(timeout)
   return data;

}
// The simulateHTTPRequest function is used purely for representational purposes
function simulatedHTTPRequest(timeout){
   return new Promise(resolve,reject){
       setTimeout(function(){      
           resolve()
       },timeout) 
   }
}
search(200)
.then(function(){console.log('search1 resolved')})
.catch(function() {console.log('search1 rejected')})
search(2000)
.then(function(){console.log('search2 resolved')})
.catch(function(){console.log('search2 rejected')})
search(1000)
.then(function(){console.log('search3 resolved')})
.catch(function(){console.log('search3 rejected')})

The desired output needs to display "search1 resolved", "search2 rejected", and "search3 resolved".

How can this particular scenario be achieved?

javascript promise cancellation

Answer 1

Answer №1

While promises cannot be directly canceled, they can be terminated by rejecting them in a limited sense.

To achieve cancellation, you can use Promise.race() in combination with a special function that allows for cancellations.

function makeCancellable(fn) {
    var reject_; // store for the latest 'reject' function
    return function(...params) {
        if(reject_) reject_(new Error('_cancelled_')); // If there is a previous 'reject', cancel it.
                                                       // This only works if the previous race is still ongoing.
        let canceller = new Promise((resolve, reject) => { // create a cancellation promise
            reject_ = reject; // store the canceller's 'reject' function
        });
        return Promise.race([canceller, fn.apply(null, params)]); // race between the main promise and the canceller
    }
}

If your HTTP call function is named httpRequest (avoid using confusing names like 'promise'), you can make it cancellable as follows:

const search = makeCancellable(httpRequest);

Each time you call search(), the cached 'reject' function is invoked to effectively "cancel" the previous search (assuming it has not yet been resolved).

// Search 1: No need for cancellation - httpRequest(200) is executed
search(200)
.then(function() { console.log('search1 resolved') })
.catch(function(err) { console.log('search3 rejected', err) });

// Search 2: Cancels search 1 and triggers its catch callback - httpRequest(2000) is called
search(2000)
.then(function() { console.log('search2 resolved') })
.catch(function(err) { console.log('search3 rejected', err) });

// Search 3: Cancels search 2 and triggers its catch callback - httpRequest(1000) is called
search(1000)
.then(function() { console.log('search3 resolved') })
.catch(function(err) { console.log('search3 rejected', err) });

In case of need, the catch callbacks can check err.message === '_cancelled_' to differentiate cancellation from other rejection reasons.

Answer 2

While promises cannot be directly canceled, they can be terminated by rejecting them in a limited sense.

To achieve cancellation, you can use Promise.race() in combination with a special function that allows for cancellations.

function makeCancellable(fn) {
    var reject_; // store for the latest 'reject' function
    return function(...params) {
        if(reject_) reject_(new Error('_cancelled_')); // If there is a previous 'reject', cancel it.
                                                       // This only works if the previous race is still ongoing.
        let canceller = new Promise((resolve, reject) => { // create a cancellation promise
            reject_ = reject; // store the canceller's 'reject' function
        });
        return Promise.race([canceller, fn.apply(null, params)]); // race between the main promise and the canceller
    }
}

If your HTTP call function is named httpRequest (avoid using confusing names like 'promise'), you can make it cancellable as follows:

const search = makeCancellable(httpRequest);

Each time you call search(), the cached 'reject' function is invoked to effectively "cancel" the previous search (assuming it has not yet been resolved).

// Search 1: No need for cancellation - httpRequest(200) is executed
search(200)
.then(function() { console.log('search1 resolved') })
.catch(function(err) { console.log('search3 rejected', err) });

// Search 2: Cancels search 1 and triggers its catch callback - httpRequest(2000) is called
search(2000)
.then(function() { console.log('search2 resolved') })
.catch(function(err) { console.log('search3 rejected', err) });

// Search 3: Cancels search 2 and triggers its catch callback - httpRequest(1000) is called
search(1000)
.then(function() { console.log('search3 resolved') })
.catch(function(err) { console.log('search3 rejected', err) });

In case of need, the catch callbacks can check err.message === '_cancelled_' to differentiate cancellation from other rejection reasons.

Answer 3

Answer №2

To create a factory function that encapsulates the search() method with the necessary cancellation behavior, you can define a custom function. It's important to note that while using Promise constructors is generally discouraged, in this specific scenario, it is required to maintain references to each reject() function in the pending set for early cancellation implementation.

function cancellable(fn) {
  const pending = new Set();

  return function() {
    return new Promise(async (resolve, reject) => {
      let settle;
      let result;

      try {
        pending.add(reject);
        settle = resolve;
        result = await Promise.resolve(fn.apply(this, arguments));
      } catch (error) {
        settle = reject;
        result = error;
      }

      // if this promise has not been cancelled
      if (pending.has(reject)) {
        // cancel the pending promises from calls made before this
        for (const cancel of pending) {
          pending.delete(cancel);

          if (cancel !== reject) {
            cancel();
          } else {
            break;
          }
        }

        settle(result);
      }
    });
  };
}

// internal API function
function searchImpl(timeout) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, timeout);
  });
}

// pass your internal API function to cancellable()
// and use the return value as the external API function
const search = cancellable(searchImpl);

search(200).then(() => {
  console.log('search1 resolved');
}, () => {
  console.log('search1 rejected');
});

search(2000).then(() => {
  console.log('search2 resolved');
}, () => {
  console.log('search2 rejected');
});

search(1000).then(() => {
  console.log('search3 resolved');
}, () => {
  console.log('search3 rejected');
});

search(500).then(function() {
  console.log('search4 resolved');
}, () => {
  console.log('search4 rejected');
});

This particular factory function leverages the ordering principle of Set to selectively cancel only the pending promises generated by previous calls before the current one that settles on a promise.

It's crucial to understand that invoking reject() doesn't halt any ongoing asynchronous operations triggered by creating the promise. Each HTTP request will proceed until completion, along with other internal functions invoked within search() prior to resolving the promise.

The purpose of cancellation() is solely to transition the internal state of the resultant promise from pending to rejected instead of fulfilled if a subsequent promise resolves first, ensuring that the appropriate handlers for promise resolution are executed by the consumer code.

Answer 4

To create a factory function that encapsulates the search() method with the necessary cancellation behavior, you can define a custom function. It's important to note that while using Promise constructors is generally discouraged, in this specific scenario, it is required to maintain references to each reject() function in the pending set for early cancellation implementation.

function cancellable(fn) {
  const pending = new Set();

  return function() {
    return new Promise(async (resolve, reject) => {
      let settle;
      let result;

      try {
        pending.add(reject);
        settle = resolve;
        result = await Promise.resolve(fn.apply(this, arguments));
      } catch (error) {
        settle = reject;
        result = error;
      }

      // if this promise has not been cancelled
      if (pending.has(reject)) {
        // cancel the pending promises from calls made before this
        for (const cancel of pending) {
          pending.delete(cancel);

          if (cancel !== reject) {
            cancel();
          } else {
            break;
          }
        }

        settle(result);
      }
    });
  };
}

// internal API function
function searchImpl(timeout) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, timeout);
  });
}

// pass your internal API function to cancellable()
// and use the return value as the external API function
const search = cancellable(searchImpl);

search(200).then(() => {
  console.log('search1 resolved');
}, () => {
  console.log('search1 rejected');
});

search(2000).then(() => {
  console.log('search2 resolved');
}, () => {
  console.log('search2 rejected');
});

search(1000).then(() => {
  console.log('search3 resolved');
}, () => {
  console.log('search3 rejected');
});

search(500).then(function() {
  console.log('search4 resolved');
}, () => {
  console.log('search4 rejected');
});

This particular factory function leverages the ordering principle of Set to selectively cancel only the pending promises generated by previous calls before the current one that settles on a promise.

It's crucial to understand that invoking reject() doesn't halt any ongoing asynchronous operations triggered by creating the promise. Each HTTP request will proceed until completion, along with other internal functions invoked within search() prior to resolving the promise.

The purpose of cancellation() is solely to transition the internal state of the resultant promise from pending to rejected instead of fulfilled if a subsequent promise resolves first, ensuring that the appropriate handlers for promise resolution are executed by the consumer code.

Answer 5

Answer №3

Following a similar approach to PatrickRoberts, my recommendation would be to utilize a Map to manage a list of pending promises.

However, I propose avoiding the preservation of the reject callback outside of the promise constructor. Instead of explicitly rejecting an outdated promise, my suggestion is to simply disregard it. Create a promise wrapper that remains dormant without ever resolving or rejecting – essentially functioning as a stagnant promise object with no state alterations. This silent promise could serve as a universal placeholder for such occurrences.

Here's an illustration of how this concept can be implemented:

const delay = (timeout, data) => new Promise(resolve => setTimeout(() => resolve(data), timeout));
const godot = new Promise(() => null);

const search = (function () { // utilizing closure...
    const requests = new Map; // ...for shared variables
    let id = 1;
    
    return async function search() {
        let duration = Math.floor(Math.random() * 2000);
        let request = delay(duration, "data" + id); // Emulating an HTTP request
        requests.set(request, id++);
        let data = await request;
        if (!requests.has(request)) return godot; // Stays unresolved...
        for (let [pendingRequest, pendingId] of requests) {
            if (pendingRequest === request) break;
            requests.delete(pendingRequest);
            // Outputting demonstration purposes only. 
            // Not necessary in a real-world scenario:
            console.log("ignoring search " + pendingId);
        }
        requests.delete(request);
        return data;
    }    
})();

const reportSuccess = data => console.log("search resolved with " + data);
const reportError = err => console.log('search rejected with ' + err);

// Triggering searches at regular intervals.
// In practice, this could be initiated by key events.
// Each promise resolves after a random duration.
setInterval(() => search().then(reportSuccess).catch(reportError), 100);

Answer 6

Following a similar approach to PatrickRoberts, my recommendation would be to utilize a Map to manage a list of pending promises.

However, I propose avoiding the preservation of the reject callback outside of the promise constructor. Instead of explicitly rejecting an outdated promise, my suggestion is to simply disregard it. Create a promise wrapper that remains dormant without ever resolving or rejecting – essentially functioning as a stagnant promise object with no state alterations. This silent promise could serve as a universal placeholder for such occurrences.

Here's an illustration of how this concept can be implemented:

const delay = (timeout, data) => new Promise(resolve => setTimeout(() => resolve(data), timeout));
const godot = new Promise(() => null);

const search = (function () { // utilizing closure...
    const requests = new Map; // ...for shared variables
    let id = 1;
    
    return async function search() {
        let duration = Math.floor(Math.random() * 2000);
        let request = delay(duration, "data" + id); // Emulating an HTTP request
        requests.set(request, id++);
        let data = await request;
        if (!requests.has(request)) return godot; // Stays unresolved...
        for (let [pendingRequest, pendingId] of requests) {
            if (pendingRequest === request) break;
            requests.delete(pendingRequest);
            // Outputting demonstration purposes only. 
            // Not necessary in a real-world scenario:
            console.log("ignoring search " + pendingId);
        }
        requests.delete(request);
        return data;
    }    
})();

const reportSuccess = data => console.log("search resolved with " + data);
const reportError = err => console.log('search rejected with ' + err);

// Triggering searches at regular intervals.
// In practice, this could be initiated by key events.
// Each promise resolves after a random duration.
setInterval(() => search().then(reportSuccess).catch(reportError), 100);

What is the best way to cancel a Promise if it hasn't been resolved yet

Answer №1

Answer №2

Answer №3

Similar questions

Learn how to incorporate a HTML page into a DIV by selecting an Li element within a menu using the command 'include('menu.html')'

I am facing an issue with Angular where the $http.get method is

Looking for assistance with arranging and managing several containers, buttons, and modals?

Looping through an array in Vue using v-for and checking for a specific key-value pair

I am experiencing an issue where components are constantly re-rendering whenever I type something. However, I would like them to

How to dynamically insert elements into the HTML page using Angular

What could be causing the "undefined property read" error even though the data is clearly defined?

Axios fails to capture and transmit data to the client's end

Having trouble with Angular's ng-class performance when dealing with a large number of elements in the

Identify if a process operates synchronously or asynchronously

Executing secure journey within TypeScript

There seems to be an issue with the Link component from react-router-dom when used in conjunction with

Monitor the $scope within a factory by utilizing the $http service in AngularJS

Working with time durations in Moment.js to manipulate datetime

What is the most effective way to reset the state array of objects in React JS?

React - Updating state from an external component

Picked (chosen-js): Steps to deselect options using a variety of selectors

Having difficulty viewing the images clearly

JavaScript does not allow executing methods on imported arrays and maps

What is the best way to handle reading hefty files using the fs.read method and a buffer in JavaScript?