How to cancel axios requests

Question

I have api file with requests

import * as axios from "axios";

export const productAPI = {
getProducts() {
    return axios({
        method: 'get',
        url: `/api/products`
    });
}

};

which reaches to transport.js and sends request(i think that part is not important).
Method above is called from my component like this

 useEffect(()=> {
    setLoading(true);
    productAPI.getProducts()
        .then((response) => {
            if(response.status === 200) {
                history.push(`${pathWithLocation}${PAGES.newLoan}`);
            }
        })
        .catch((error) => {
            if (error.response.data.error.message) {
                dispatch(addModal({
                    type: 'basic',
                    size: 'middle',
                    title: 'some title',
                    text: error.response.data.error.message,
                    buttons: [{ buttonLabel: 'ОК', onClick: ()=> dispatch(removeModal()) }]       
                }))
            }
        })
        .finally(() => {
            setLoading(false);
        });
},[])

I want to cancel this specific request when component is unmounted. (switched route for example)

Does this answer your question? [Abort Ajax requests using jQuery](https://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery) — BadPiggie, Apr 15 '21 at 09:18
You have to obtain a `cancelToken` (a function) when making a request, save it somewhere and call it when appropriate. https://github.com/axios/axios#cancellation — georg, Apr 15 '21 at 09:34
You can just use a flag in your useEffect callback that is reset in the cleanup — Martin, Apr 15 '21 at 09:42

score 1 · Answer 1 · answered Apr 15 '21 at 09:52

You can just use a isCurrent flag. (I have to admit that I have not considered what the benefit of using the axios.cancelToken mechanism would be here. Maybe it would make it cleaner, maybe it would just make it more convoluted.)

useEffect(() => {
    const isCurrent = true;
    setLoading(true);
    productAPI.getProducts()
        .then((response) => {
            if(isCurrent && response.status === 200) {
                history.push(`${pathWithLocation}${PAGES.newLoan}`);
            }
        })
        .catch((error) => {
            if (isCurrent && error.response.data.error.message) {
                dispatch(addModal({/*...*/}))
            }
        })
        .finally(() => {
            if (isCurrent) setLoading(false);
        });
    return () => { isCurrent = false };
}, [])

score 0 · Answer 2 · answered Apr 15 '21 at 11:31

getProducts(cancelToken) {
    return axios({
        method: 'get',
        url: `/api/products`,
        cancelToken
    });
}

 useEffect(()=> {
    const source= CancelToken.source();
    const isMounted= true;

    setLoading(true);
    productAPI.getProducts(source.token)
        .then((response) => {
            if(response.status === 200) {
                history.push(`${pathWithLocation}${PAGES.newLoan}`);
            }
        })
        .catch((error) => {
            if (error.response.data.error.message) {
                dispatch(addModal({  
                  ...
                }))
            }
        })
        .finally(() => {
            isMounted && setLoading(false);
        });
    return ()=>{
      isMounted= false;
      source.cancel();
    }
},[])

Or a bit magic way (Codesandbox demo):

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

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

  const cancel = useAsyncEffect(
    function* () {
      try {
        const response = yield cpAxios(props.url);
        setText(JSON.stringify(response.data));
        setLoading(false);
        if (response.status === 200) {
          //history.push(`${pathWithLocation}${PAGES.newLoan}`);
        }
      } catch (err) {
        CanceledError.rethrow(err, E_REASON_UNMOUNTED);
        setLoading(false);
        setText(err.toString());
        //dispatch(addModal({})
      }
    },
    [props.url]
  );

  return (
    <div className="component">
      <div className="caption">useAsyncEffect demo:</div>
      <div>{text}</div>
      <button onClick={cancel} disabled={!loading}>
        Cancel request
      </button>
    </div>
  );
}

How to cancel axios requests

2 Answers2