前端進階（2）使用fetch/axios時， 如何取消http請求

前端進階（2）使用fetch/axios時， 如何取消http請求

1. 需求

現在前端都是SPA，我們什么時候需要取消HTTP請求呢？

1. 當我們從一個頁面跳轉到另外一個頁面時，如果前一個頁面的請求還沒有返回，那么我們希望取消前一個頁面的請求
2. 某些操作耗時比較長（不能是保存等操作哦），如果用戶不想等待呢，取消了操作，對應我們也需要取消HTTP請求

對於原生的XMLHttpRequest,是支持取消http請求(abort)操作的: XMLHttpRequest.abort()
那么，當我們使用ES6的fetch，或者使用axios庫，如何實現呢？

2. Fetch 取消http請求

fetch與XMLHttpRequest(XHR)類似，是ES6之后瀏覽器（除IE之外）默認支持的http操作函數。可惜不是默認支持abort操作。但我們可以通過AbortController來實現， 直接上代碼：

// 聲明AbortController
const controller = new AbortController();

// 正常的http調用
fetch('https://jackniu81.github.io', { signal: controller.signal })
    .then(r => r.json())
    .then(response => {
        console.log(response);
    })
    .catch(err => {
        if (err.name === 'AbortError') {
            console.log('Fetch was aborted')
        } else {
            console.log('Error', err)
        }
    })；

// 需要取消請求時，調用：
controller.abort()

3. axios取消http請求

axios 已經實現了abort操作，

var source = axios.CancelToken.source();

axios.get('https://jackniu81.github.io', {
  cancelToken: source.token
}).catch(function(err) {
  if (axios.isCancel(err)) {
    // handle our cancel operation
    console.log('Request canceled', err.message);
  } else {
    // handle real error here
  }
});

// 需要取消請求時，調用：
source.cancel('Abort Request');

4. jquery 取消http請求

$.ajax內部已經實現了abort功能。直接調用.abort()即可。

5. 總結

1. fetch與AbortController集成：我們將signal屬性作為可選參數（option）進行傳遞，之后 fetch 會監聽它，因此它能夠中止 fetch.
2. AbortController 是可伸縮的，可以用於一次性終止多個請求；
3. 參考fetch的實現，我們自己的代碼也完善一下，實現基於AbortController操作取消操作；
4. axios 默認支持Abort操作；