axios中斷請求AbortController

場景: 連續發送多次請求，只需要最后一次結果，模糊搜索，下載視頻取消

axios中的請求中斷

//VUE
 sendStr() {
      if(window.cancel) window.cancel()
      let CancelToken = axios.CancelToken;
      // let cancel
      axios
        .get(`http://localhost:3000/test?str=${this.searchStr}`, {
          cancelToken: new CancelToken(function executor(c) {
          window.cancel = c;
          })
        })
        .then(res => {
          window.console.log(res);
          window.cancel = null
        })
    }

再相應間隔長的情況下，可以看到input事件中請求了五次，前幾次都中斷了，只保留最后一次

 

image.png

同樣的方法，將后台定時器刪掉，因為相應速度大於input事件觸發間隔所以數據都成功返回

 

image.png

fetch手動中斷

fetch是一種原生HTTP數據請求的方式，是xml的替代方案，和axios類似同樣使用了 JavaScript Promises 來處理結果/回調:

AbortController對象

根據文檔說明我們可以了解到
AbortController接口代表一個控制器對象，允許你在需要時中止一個或多個Web(網絡)請求。

你可以使用AbortController.AbortController()構造函數創建一個新的AbortController對象。 使用AbortSignal 對象完成與Web(網絡)請求的通信。

簡單來說就是創建一個AbortController對象abortController，然后使用abortController.signal生成關聯變量再添加到fetch請求參數中去，然后想要中斷的時候使用關聯該請求的abortController.abort()方法是使該請求中斷

   download() { this.downloadController = new AbortController(); this.signal = this.downloadController.signal; fetch(`http://localhost:3000/test?str=${this.searchStr}`, { signal: this.signal }) .then(res => { window.console.log(res); }) .catch(err => { window.console.log(err); }); }, termination() { this.downloadController.abort(); } 

中斷如下

 

image.png

...未完待續(有時間封裝的話)