axios 取消上一次的請求

需求

 在select change事件中，由於每次change都要去請求接口，但是這個接口返回的極慢，就會出現了，切換了多次，請求了很多次，

但是可能有的請求返回錯誤，有的有數據

接着，在接口請求超時或者是返回成功的時候，就會出現

頁面上可能一直在彈出請求失敗的消息，而下拉中缺有數據的尷尬請求

為了解決這種情況，我在axios中進行取消處理

 

引入axios

import axios from 'axios'；

 

//

const CancelToken = axios.CancelToken;

在全局先定義一個cancle變量
window.cancle=null;
....  //省略其他代碼
res = await axios({
      url: `${process.env.apiBase}${url}`,
      method,
      data,
      params,
      timeout,
      //跨域請求是否需要憑證，默認false
      withCredentials,
      headers,
      responseType,
      cancelToken:new CancelToken(function executor(c) {  在axios封裝的函數中寫上這句就可以了
        window.cancle = c; })
   })
....省略其他代碼

使用

handleSourChange(value){   //在切換select的操作中
        cancle();
        if(value){
          this.getTableListFn(value);
        }
          
   },

就可以了