useCancelToken

A handy react hook to cancel axios requests

Demo

Install

npm install --save react-use-cancel-token

Usage

useAbortController

import * as React from 'react';
import axios from 'axios';

import useAbortController from 'react-use-cancel-token';

const Example = () => {
  const { newAbortSignal, cancelPreviousRequest, isCancel } = useAbortController();

  const handleClick = async () => {
    cancelPreviousRequest();

    try {
      const response = await axios.get('request_url', {
        signal: newAbortSignal(),
      });

      if (response.status === 200) {
        // handle success
      }
    } catch (err) {
      if (isCancel(err)) return;
      console.error(err);
    }
  };

  return <button onClick={handleClick}>send request</button>;
};

Outputs

Property	Type	Description
controller	MutableObjectRef	Reference to the AbortController instance
newAbortSignal	() => AbortSignal	Generate the abort signal sent in the Axios request
cancelPreviousRequest	() => void	Cancel any previous Axios request
isCancel	() => boolean	Check if the error returned in Axios response is an abort error

useCancelToken (deprecated)

import * as React from 'react';
import axios from 'axios';

import { useCancelToken } from 'react-use-cancel-token';

const Example = () => {
  const { newCancelToken, cancelPreviousRequest, isCancel } = useCancelToken();

  const handleClick = async () => {
    cancelPreviousRequest();

    try {
      const response = await axios.get('request_url', {
        cancelToken: newCancelToken(),
      });

      if (response.status === 200) {
        // handle success
      }
    } catch (err) {
      if (isCancel(err)) return;
      console.error(err);
    }
  };

  return <button onClick={handleClick}>send request</button>;
};

Outputs

Property	Type	Description
source	MutableObjectRef	Reference to Axios cancel token source
newCancelToken	() => CancelToken	Generate the cancel token sent in the Axios request
cancelPreviousRequest	(message?: string) => void	Cancel any previous Axios request
isCancel	() => boolean	Check if the error returned in Axios response is a cancel token error

License

MIT © AXeL-dev