make-cancelable-task

make promise cancelable (include axios promise), make function cancelable

How to use

First of all you need to import this library in global index.ts (or app.ts,...)file

import "make-cancelable-task";

How to make axios promise cancelable

• You can create your get request method like bellow , file api.ts

import Axios, { AxiosRequestConfig, CancelToken } from "axios";

const get = (
    url: string,
    config?: AxiosRequestConfig,
    cancelToken?: CancelToken
  ) =>
  api.request({
    method: "GET",
    url,
    ...config,
    cancelToken: config?.cancelToken || cancelToken,
  });
const withErrorHandler = function (cancelableApi: Function) {
  return cancelableApi()
    .makeCancelablePromise()
    .convertData(({ data, error }) => {
      if (error) {
        if (error?.message?.canceled || error?.canceled) {
          console.log("promise was canceled", error);
        }
        error.newProp = "I'm new prop";
        return error;
      } else {
        return {
          ...data,
          isOk: () => {
            console.log("you can extend more properties for response data or convert data before return response");
          },
        };
      }
    });
};

export const cancelableApi = {
  get: (...params: any) =>
    withCancelToken(get, ...((params.length = 2) && params))
  getWithErrorHandler: (...params: any) =>
    withErrorHandler(withCancelToken(get, ...((params.length = 2) && params)))
	/* (params.length = 2) && params : this code make sure params length always is 2,
  match with required params of axios.get method */
};

/*===== Now you can use  this method in request service file =====*/
import { cancelableApi } from "./api";

function getRequest = async () {
	const execute = cancelableApi.get("you request url");
	setTimeout(()=>{
		execute.cancel()
		// cancel axios request if it take longer than 1 second
	}, 1000);
	const response = await execute();
}

Make Function cancelable

• Simple cancel timeout in executed function

import { InjectAbort } from "make-cancelable-task";

const notifyValue = ((injectEbort: InjectAbort, inputValue) => {
  const t = setTimeout(() => {
    alert("Alert value after 3 seconds", inputValue);
  }, 3000);
  injectEbort.withAbort(() => {
    clearTimeout(t);
    alert("Cancel timeout after 2 seconds");
  });
}).makeCancelable();

notifyValue("hello");

setTimeout(() => {
  notifyValue.cancel();
}, 2000);

• Cancel request in executed function

import { InjectAbort } from "make-cancelable-task";
import { cancelableApi } from "./api";

const getDataFromServer = (async (injectEbort: InjectAbort, url: string) => {
  try {
    const response = await injectEbort(cancelableApi.get(url));
    console.log("response", response);
  } catch (error) {
    console.log("is request to url canceled? ", injectEbort.isAborted());
  }
}).makeCancelable({ delay: 200 }); // you can delay execute function in 200ms(default is 0),
// this is very usefull when many too many similar requests/functions executed close together
getDataFromServer("get-url");

setTimeout(() => {
  // cancel get data function after running 1 second
  getDataFromServer.cancel();
}, 1000);

Make promise cancelable.

• Bellow code describer how to create a waiting call function and make it cancelable

const waiting = function (time: number = 1000, clb?: Function) {
  let timeoutValue: any;
  const promise = new Promise((resolve, reject) => {
    timeoutValue = setTimeout(() => {
      resolve(clb ? clb() : "");
    }, time);
  });
  const cancelAllSyncTask = () => {
    console.log("cancel promise in waiting function");
    clearTimeout(timeoutValue);
  };
  return promise.makeCancelablePromise(cancelAllSyncTask);
};

waiting(3000, () => {
  alert("This is called after 3 seconds");
});
setTimeout(() => {
  waiting.cancel();
}, 1000);