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

SOLVED: NextJS restricts plugins from modifying HTML to avoid unnecessary re-rendering

Having trouble parsing the BODY of a NodeJs JSON post request?

AngularJS substitution with regular expressions

Attach a Material-UI Popper component to a customized edge label in a React Flow

What is the best way to transfer form data to another function without causing a page refresh?

A guide on enhancing Autocomplete Tag-it plugin with custom tags

Facing some unexpected issues with integrating Django and AngularJS, unclear on the cause

Ways to update an angular page using the router without resorting to window.location.reload

Using Javascript to attach <head> elements can be accomplished with the .innerHTML property, however, it does not work with XML child nodes

having trouble transferring data from one angular component to another

What could be causing my state not to change in Nextjs even though I followed the quick start guide for Easy Peasy?

What is the best way to create a time delay between two consecutive desktop screenshot captures?

Nuxt.js has exceeded the maximum call stack size

What do you believe to be superior: Vue UI design?

Angular: Disabling a button based on an empty datepicker selection

Fetch request encountered a 500 error due to the absence of the 'Access-Control-Allow-Origin' header on the requested resource

Efficiently handling multiple form submissions using a single jQuery Ajax request

Struggling with transferring form input data to a different file using JavaScript, Node.js, React.js, and Next.js

Utilizing Angular for making API requests using double quotes

Exploring the significance of a super in Object-Oriented Programming within JavaScript