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操作；