Axios cancels multiple repeat requests through cancelToken. Why does the last request take so long?

I have a vue project where ajax requests are sent using axios.
one of the list pages, clicking on the list will send the details of the corresponding list of the request query.
now in order to prevent frequent requests from being sent due to multiple clicks on the list, I encapsulate the axios.
the effect now is that I closed the request through axios"s cancelToken. But the last request sent will become very slow. Later, I printed the number of code execution times in the requested then and found that even if the request was stopped through cancelToken, the code in the then would still enter. I don"t know if it had anything to do with this. I even wonder if there is something wrong with my own way of using cancelToken.
I will now post the code below

 let CancelToken = axios.CancelToken;
 let cancel;
            
const httpServer = axios.create({
     responseType: "json",
     withCredentials: true,  //  withCredentials  `cookies`
     cancelToken: new CancelToken(function (c) {
          cancel = c  // 
      })
});

here is the code in the interceptor

// 
//__axiosPromiseArrwindow
httpServer.interceptors.request.use(function (config) {
    if (__axiosPromiseArr[config.url]) {
      __axiosPromiseArr[config.url]("");
      __axiosPromiseArr[config.url] = cancel;
     } else {
         __axiosPromiseArr[config.url] = cancel; 
 }

finally return an object

return httpServer({
    method: "post",
    url: url,
    data: data
});

the encapsulated ajax object is called in the page to send the request

this.$Ajax.postForm("http://loclhost:8080/dataApi/queryWorkTableInfo.do",{
      id:id
 }).then((result)=>{
   console.count("postForm"); //cancel

Screenshot of the network request.
the red part is the request cancel. The penultimate request is more than 2s for the last frequent request, and the penultimate request is the request time 800ms after one click

.

clipboard.png

I don"t know how to deal with this situation. Is there a problem with the use of cancel? Or do you need other code to cooperate? Ask all kinds of gods for advice. Thank you!

Mar.02,2021

the length of the request has nothing to do with the axios. The browser is only responsible for the request. When and how long the response depends on your backend and network delay.


cancelToken is just a cancellation request from the front end. If the request has been sent, the server will still execute it if it is not processed. The last time the response was slow, it may be that the backend executed the request before it was executed.

Menu