前端進階（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操做；