axios 通过 cancelToken取消多次重复请求，为什么最后一次请求的时间非常长？

Question

我有一个vue项目，ajax请求是用axios来发送的。
其中一个列表页面，点击列表会发送请求查询对应列表的详细信息。
现在为了防止快速多次点击列表导致请求频繁发送，我封装了下axios。
现在的效果是，通过axios 的 cancelToken 我关闭了请求。但是最后一次发送的请求速度会变得非常慢。后来我在请求的then里面打印代码执行次数，发现即使通过cancelToken停止了请求，但是then里面的代码依然会进入，不知道和这个是不是有关系。我甚至怀疑是不是自己使用cancelToken的方法有问题。
我现在把代码贴在下面

 let CancelToken = axios.CancelToken;
 let cancel;
            
const httpServer = axios.create({
     responseType: 'json',
     withCredentials: true,  // 设置 withCredentials 使请求带上 `cookies`
     cancelToken: new CancelToken(function (c) {
          cancel = c  // 记录当前请求的取消方法
      })
});

这里是拦截器中的代码

// 设置一个拦截器，每次发起请求前取消掉在进行中的相同请求
//__axiosPromiseArr是一个全局变量，定义在window下
httpServer.interceptors.request.use(function (config) {
    if (__axiosPromiseArr[config.url]) {
      __axiosPromiseArr[config.url]('操作取消');
      __axiosPromiseArr[config.url] = cancel;
     } else {
         __axiosPromiseArr[config.url] = cancel; 
 }

最后返回一个对象

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

页面里面调用封装的ajax对象发送请求

this.$Ajax.postForm("http://loclhost:8080/dataApi/queryWorkTableInfo.do",{
      id:id
 }).then((result)=>{
   console.count('postForm'); //这里打印代码执行次数，发现即使cancel了，代码依然有执行

网络请求的截图。
红色部分的就是请求cancel了，倒数第二个是最后一次频繁请求的时间2s多，倒数第一个请求是点击一次后的请求时间800ms

不知道这种情况应该如何处理？是cancel的使用有问题？还是需要其他代码配合？求教各路大神了。谢谢！

Answer 1

请求时长跟axios没啥关系呀，浏览器只负责请求，什么时候响应，响应多久是看你后端以及网络延时呀

Answer 2

cancelToken 只是前端取消请求，如果请求已发出，服务器端如果没有做处理，还是会执行的。最后一次响应慢，可能是后端在执行之前的请求。