currently, I'm using axios and i try to get request and set data then abort request using useState with interval.
however, it seems like the request does not keep abort request as soon as get the request.
I want to know if it's possible to abort request !
my code is like this .
const controller = new AbortController();
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
const getAPI = useCallback(async () => {
await axios
.get(convert.GET_API_URL, {
headers: convert.Header,
cancelToken: source.token,
signal: controller.signal,
})
.then(response => {
setAPI_DATA(response.data);
setSpinner(false);
source.cancel();
controller.abort();
})
.catch(error => {
setSpinner(false);
});
}, [API_DATA, convert, spinner]);
useInterval(
() => {
getAPI();
},
apiStart ? convert?.API_Read_Speed : null
);
import { useEffect } from "react";
import { useRef } from "react";
const useInterval = (callback, delay) => {
const savedCallback = useRef(callback);
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
useEffect(() => {
const tick = () => {
savedCallback.current();
};
if (delay !== null) {
const id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
};
export default useInterval;