A handy react hook to cancel axios requests
A handy react hook to cancel axios requests
npm install --save react-use-cancel-token
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>;
};
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 |
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>;
};
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 |
MIT © AXeL-dev