Cancel async Axios GET request - React hooks

June 2022 Update

CancelToken has been deprecated since Axios v0.22.0 and should not be used in new projects (reference: https://axios-http.com/docs/cancellation). Use AbortController instead, like so:

function App() {
  useEffect(() => {
    const controller = new AbortController();
    async function getPairs() {
      try {
        const res = await axios.get(
          "http://localhost:3000/binance/pairs?timeframe=" +
            timeframe +
            "&strat=" +
            strat,
          {
            signal: controller.signal,
          }
        );

        if (res.status === 200 || res.data.status === "success") {
          setPairs(res.data.pairs);
          setReloadConfig(false);
        }
      } catch (err) {
        if (axios.isCancel(err)) {
          console.log("cancelled");
        } else {
          throw err;
        }
      }
    }

    // reloadConfig: React useState hook set to true when clicking a button
    if (reloadConfig) {
      getPairs();
    }

    return () => {
      controller.abort();
    };
  }, [reloadConfig]);
}

export default App;

Happy coding! Ciao.

Maybe this is not a web problem, I can't give an accurate answer. Maybe you can consider using queue and broadcast(websocket) solution?

If you want to do something before refreshing the page, please refer to window.onbeforeunload event.The code that executes the cancel request in the event callback.

Think you should change implementation like this to ensure you're avoiding memory leaks and handling errors. Using a separate hook for the axios request will also decouple your component and request code.

The main issue you have is that you're not getting the token from source i.e. const { token: cancelToken, cancel } = source;

const useFetchPairs = () => {
  const [data, setData] = useState({
    pairs: null,
    isLoading: false,
    error: null,
  });
  const CancelToken = axios.CancelToken;
  const source = CancelToken.source();
  const { cancelToken: token, cancel } = source;
  const getPairs = async () => {
    setData({ pairs: null, isLoading: false, error: null });

    try {
      const res = await axios.get(
        "http://localhost:3000/binance/pairs?timeframe=" +
          timeframe +
          "&strat=" +
          strat,
        {
          cancelToken,
        }
      );

      if (res.status === 200 || res.data.status === "success") {
        setData({ pairs: res.data.pairs, isLoading: false, error: null });
      }
    } catch (err) {
      if (axios.isCancel(err)) {
        console.log("cancelled");
      } else {
        setData({ pairs: null, isLoading: false, error });
      }
    }
  };

  return [data, getPairs, cancel];
};

const MyComponent = () => {
  const [{ isLoading, pairs, error }, getPairs, cancel] = useFetchPairs();

  useEffect(() => {
    return () => {
      // cancelling when component unmounts i.e. navigation
      cancel();
    };
  }, []);

  const onClick = () => {
    if (isLoading) {
      // cancelling when button clicked and previous request in progress
      cancel();
    }
    getPairs();
  };
  return (
    <>
      {error && <p>{error}</p>}
      <div>{pairs}</div>
      <button onClick={onClick}>Click me</button>
    </>
  );
};
    

I can suggest one more solution with custom libs (Working Demo):

import React, { useState } from "react";
import { useAsyncCallback, E_REASON_UNMOUNTED } from "use-async-effect2";
import { CanceledError } from "c-promise2";
import cpAxios from "cp-axios";

export default function TestComponent(props) {
  const [text, setText] = useState("");

  const request = useAsyncCallback(
    function* () {
      this.timeout(props.timeout);

      try {
        setText("fetching...");
        const response = yield cpAxios(props.url);
        setText(`Success: ${JSON.stringify(response.data)}`);
        // do whatever you need with the response data here 
      } catch (err) {
        CanceledError.rethrow(err, E_REASON_UNMOUNTED); //passthrough
        setText(`Failed: ${err}`);
      }
    },
    { deps: [props.url], cancelPrevious: true }
  );

  return (
    <div className="component">
      <div>{text}</div>
      <button onClick={request}>Request</button>
      <button onClick={request.cancel}>Abort</button>
    </div>
  );
}