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
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!