前端进阶（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操做；