Promise with cancel method | Cancellable promise | Javascript

This tutorial will show us how to create a promise with the cancel method.
Usually, as we know promises have these two methods called then and catch which gets called as soon as the promise is resolved or rejected.

The idea is to have a cancel method attached to the promise object so that we can control the execution of callbacks passed to then and catch methods. The objective of the cancel method is to stop the execution of callbacks passed to then and catch methods upon calling it.

If you want to learn from a video tutorial then here is a video tutorial for the same:

Let’s continue.

We will create a dummy promise. We will use this dummy promise to test the function.

const promise = new Promise((res, rej) => setTimeout(res, 500, 'data'))

Now, we have a dummy promise which resolves after 500ms.

Now we write a function that will accept the promise object as an argument and attach the cancel method to it.

const promise = new Promise((res, rej) => setTimeout(rej, 500, 'data'))

function cancellablePromise(promise) {
  // attach the cancel method
}


promise.then(console.log) // log 'data' after 500ms

We know this function must return a promise because we do not want to lose on promise chaining. It will also give us more control over when to resolve or reject.

const promise = new Promise((res, rej) => setTimeout(rej, 500, 'data'))

function cancellablePromise(promise) {
  // attach additional cancel
  const promiseObject = new Promise((res, rej) => {

  })

  return promiseObject;
}


promise.then(console.log) // log 'data' after 500ms

Let’s add the cancel method to the promise object.

const promise = new Promise((res, rej) => setTimeout(rej, 500, 'data'))

function cancellablePromise(promise) {

  const promiseObject = new Promise((res, rej) => {

  })

  promiseObject.cancel = function() {
    
  }

  return promiseObject;
}

promise.then(console.log) // log 'data' after 500ms

Since the objective is to stop the execution of callbacks passed to then and catch methods upon calling it, we will need a flag to track if cancel the method has been called or not. We will name this variable isCancelled . We will mark this variable true upon calling the cancel method.

const promise = new Promise((res, rej) => setTimeout(rej, 500, 'data'))

function cancellablePromise(promise) {
  let isCancelled = false;

  const promiseObject = new Promise((res, rej) => {

  })

  promiseObject.cancel = function() {
    isCancelled = true;
  }

  return promiseObject;
}

promise.then(console.log) // log 'data' after 500ms

We have got the original promise as an argument. Let’s subscribe to it.

const promise = new Promise((res, rej) => setTimeout(rej, 500, 'data'))

function cancellablePromise(promise) {
  let isCancelled = false;

  const promiseObject = new Promise((res, rej) => {
    promise.then(data=> {
      // resolve the promise
    }).catch(err => {
      // reject the promise
    })
  })

  promiseObject.cancel = function() {
    isCancelled = true;
  }

  return promiseObject;
}

promise.then(console.log) // log 'data' after 500ms

Now, we just need to ensure that we only resolve or reject the promise if isCancelled is false . And, we will have our final code.

Here is the complete code.

const promise = new Promise((res, rej) => setTimeout(rej, 500, 'data'))

function cancellablePromise(promise) {
  let isCancelled = false;

  const promiseObject = new Promise((res, rej) => {
    promise.then(data=> {

      if (!isCancelled) {
        res(data);
      }
    }).catch(err => {

      if (!isCancelled) {
        rej(err);
      }
    })
  })

  promiseObject.cancel = function() {
    isCancelled = true;
  }
  return promiseObject;
}

const newPromise = cancellablePromise(promise);

newPromise.then(console.log)
newPromise.catch(console.log)
newPromise.cancel() // Calling this before promise settlement will stop execution of callbacks passed to then and catch

Thank you.

Happy coding!!.