如何使用 axios 取消正在进行的 GET 请求

Question

I have an inputfield, onChange it sends my value of the inputfield to an API. So, the api will start fetching all the data. but when I continue typing again, I want that previous request to be canceled.

I'm using axios for making my request and tried looking at the documentation but I can't seem to figure out how it really works, can someone explain how to do this?

Here is my function that gets called by every new input:

const onChange = (value) => {
  setTimeout(async() => {
    let result = []

    if (y === "keyword") result = await AutoSuggestionKeyword({
      value: value
    });
    
    else {
      const CancelToken = axios.CancelToken;
      const source = CancelToken.source();

      await axios.get(`https://${api_uri}/${value.toLowerCase()}`)
        .catch(function(thrown) {
          if (axios.isCancel(thrown)) {
            console.log('Request canceled', thrown.message);
          } else {
            // handle error
          }

        }).then(resp => {
          console.log(resp)
        });
      source.cancel();
    }
  }, 500)
}

Answer 1

You need to provide a cancelToken in your request,

axios.get(`https://${api_uri}/${value.toLowerCase()}`, {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }

});

Answer 2

I don't think you can cancel an HTTP request , but what you can do is wrap it in debounce function, debounce function wait for a certain time before calling the callback or function you wrap or pass on it.

you can simply google debounce and it will give you articles or npm packages that you can use.

I think this article also has the same issue you are trying to resolve

Happy coding

Edit 1: yeah so you can cancel the http request see comment below