axios 通過 cancelToken取消多次重復(fù)請(qǐng)求，為什么最后一次請(qǐng)求的時(shí)間非常長(zhǎng)？

我有一個(gè)vue項(xiàng)目，ajax請(qǐng)求是用axios來(lái)發(fā)送的。
其中一個(gè)列表頁(yè)面，點(diǎn)擊列表會(huì)發(fā)送請(qǐng)求查詢對(duì)應(yīng)列表的詳細(xì)信息。
現(xiàn)在為了防止快速多次點(diǎn)擊列表導(dǎo)致請(qǐng)求頻繁發(fā)送，我封裝了下axios。
現(xiàn)在的效果是，通過axios 的 cancelToken 我關(guān)閉了請(qǐng)求。但是最后一次發(fā)送的請(qǐng)求速度會(huì)變得非常慢。后來(lái)我在請(qǐng)求的then里面打印代碼執(zhí)行次數(shù)，發(fā)現(xiàn)即使通過cancelToken停止了請(qǐng)求，但是then里面的代碼依然會(huì)進(jìn)入，不知道和這個(gè)是不是有關(guān)系。我甚至懷疑是不是自己使用cancelToken的方法有問題。
我現(xiàn)在把代碼貼在下面

 let CancelToken = axios.CancelToken;
 let cancel;
            
const httpServer = axios.create({
     responseType: 'json',
     withCredentials: true,  // 設(shè)置 withCredentials 使請(qǐng)求帶上 `cookies`
     cancelToken: new CancelToken(function (c) {
          cancel = c  // 記錄當(dāng)前請(qǐng)求的取消方法
      })
});

這里是攔截器中的代碼

// 設(shè)置一個(gè)攔截器，每次發(fā)起請(qǐng)求前取消掉在進(jìn)行中的相同請(qǐng)求
//__axiosPromiseArr是一個(gè)全局變量，定義在window下
httpServer.interceptors.request.use(function (config) {
    if (__axiosPromiseArr[config.url]) {
      __axiosPromiseArr[config.url]('操作取消');
      __axiosPromiseArr[config.url] = cancel;
     } else {
         __axiosPromiseArr[config.url] = cancel; 
 }

最后返回一個(gè)對(duì)象

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

頁(yè)面里面調(diào)用封裝的ajax對(duì)象發(fā)送請(qǐng)求

this.$Ajax.postForm("http://loclhost:8080/dataApi/queryWorkTableInfo.do",{
      id:id
 }).then((result)=>{
   console.count('postForm'); //這里打印代碼執(zhí)行次數(shù)，發(fā)現(xiàn)即使cancel了，代碼依然有執(zhí)行

網(wǎng)絡(luò)請(qǐng)求的截圖。
紅色部分的就是請(qǐng)求cancel了，倒數(shù)第二個(gè)是最后一次頻繁請(qǐng)求的時(shí)間2s多，倒數(shù)第一個(gè)請(qǐng)求是點(diǎn)擊一次后的請(qǐng)求時(shí)間800ms

不知道這種情況應(yīng)該如何處理？是cancel的使用有問題？還是需要其他代碼配合？求教各路大神了。謝謝！