I am trying to follow Axios documentation to cancel repeated requests to an URL but while I get no errors the requests aren't being cancelled. I still can do as many as I want through the following method.

import axios from 'axios'

getData({mit,state,dispatch}, id){
      const CancelToken = axios.CancelToken;
      const source = CancelToken.source();
      axios
      .get("http://15.100.100.100:9999/getData/" + id,{
        cancelToken: source.token
      }).catch(function (thrown) {
        if (axios.isCancel(thrown)) {
          console.log('Request canceled', thrown.message);
        } else {
          console.log("cancel error")
        }
      })
    },

I followed Axios documentation found here

EDIT: Kaushik Makwana's answer was correct but in my case, instead of saving in a regular variable, i saved it in a state since my axios calls are made in my store.js file.

I am trying to follow Axios documentation to cancel repeated requests to an URL but while I get no errors the requests aren't being cancelled. I still can do as many as I want through the following method.

import axios from 'axios'

getData({mit,state,dispatch}, id){
      const CancelToken = axios.CancelToken;
      const source = CancelToken.source();
      axios
      .get("http://15.100.100.100:9999/getData/" + id,{
        cancelToken: source.token
      }).catch(function (thrown) {
        if (axios.isCancel(thrown)) {
          console.log('Request canceled', thrown.message);
        } else {
          console.log("cancel error")
        }
      })
    },

I followed Axios documentation found here https://github./axios/axios#cancellation

EDIT: Kaushik Makwana's answer was correct but in my case, instead of saving in a regular variable, i saved it in a state since my axios calls are made in my store.js file.

• javascript
• vue.js
• axios

• Where do you call source.cancel() ? – Blitz Commented Aug 6, 2019 at 19:22
• Can you explain what type of error occurred? – Kaushik Makwana Commented Aug 6, 2019 at 19:22
• I get no errors @KaushikMakwana – Otorrinolaringologista -man Commented Aug 6, 2019 at 19:22
• where should i call source.cancel()? @Blitz – Otorrinolaringologista -man Commented Aug 6, 2019 at 19:23
• you have to call source.cancel() for cancel the request. – Kaushik Makwana Commented Aug 6, 2019 at 19:25

2 Answers 2

you can set a global variable to store past request.

 var source;
    getData({mit,state,dispatch}, id){

              if(source){
                 source.cancel();
              }
              const CancelToken = axios.CancelToken;
              source = CancelToken.source();
              axios
              .get("http://15.100.100.100:9999/getData/" + id,{
                cancelToken: source.token
              }).catch(function (thrown) {
                if (axios.isCancel(thrown)) {
                  console.log('Request canceled', thrown.message);
                } else {
                  console.log("cancel error")
                }
              })
            },

Using inside ponentDidMount lifecycle hook:

useEffect(() => {
const ourRequest = Axios.CancelToken.source() // <-- 1st step

const fetchPost = async () => {
  try {
    const response = await Axios.get(`endpointURL`, {
      cancelToken: ourRequest.token, // <-- 2nd step
    })
    console.log(response.data)

  } catch (err) {
    console.log('There was a problem or request was cancelled.')
  }
}
fetchPost()

return () => {
  ourRequest.cancel() // <-- 3rd step
}
}, [])

Note: For POST request, pass cancelToken as 3rd argument

Axios.post(`endpointURL`, {data}, {
 cancelToken: ourRequest.token, // 2nd step
})