Javascript 使用Axios取消以前的API请求

我正试图按照Axios文档取消对URL的重复请求，但虽然没有收到错误，但请求并未被取消。通过下面的方法，我仍然可以做我想做的任何事情

import axios from 'axios'

getData({commit,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")
        }
      })
    },

我遵循了这里找到的Axios文档

---

编辑：Kaushik Makwana的回答是正确的，但在我的例子中，我没有将其保存在常规变量中，而是将其保存在一个状态中，因为我的axios调用是在我的store.js文件中进行的。

您可以设置一个全局变量来存储过去的请求

 var source;
    getData({commit,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")
                }
              })
            },

---

使用内部组件安装生命周期挂钩：

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
}
}, [])

---

你在哪里调用source.cancel（）？你能解释一下发生了什么类型的错误吗？我没有发现错误@kaushikmakwana我应该在哪里调用source.cancel（）@Blitzyou必须调用source.cancel（）来取消request.hum，因此在这种情况下，我的源将是我在api调用中使用的url？源将是CancelToken.source（）的实例；为了让您知道它是有效的，唯一的区别是我将源代码保存在一个状态中，而不是保存在一个正则变量上。

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