标签：axios http 请求 取消 abort fetch 进阶

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

标签：axios,http,请求,取消,abort,fetch,进阶
来源： https://blog.51cto.com/u_13549122/2731694

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。