前端进阶（2）使用fetch/axios时， 如何取消http请求
2024-09-03 18:49:25
1. 需求
现在前端都是SPA，我们什么时候需要取消HTTP请求呢？
- 当我们从一个页面跳转到另外一个页面时，如果前一个页面的请求还没有返回，那么我们希望取消前一个页面的请求
- 某些操作耗时比较长（不能是保存等操作哦），如果用户不想等待呢，取消了操作，对应我们也需要取消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. 总结
fetch与AbortController集成：我们将signal属性作为可选参数（option）进行传递，之后 fetch 会监听它，因此它能够中止 fetch.- AbortController 是可伸缩的，可以用于
一次性终止多个请求； - 参考fetch的实现，我们自己的代码也完善一下，实现基于AbortController操作取消操作；
- axios 默认支持Abort操作；
最新文章
- 类ExampleA继承Exception，类ExampleB继承ExampleA。 有如下代码片断：
- IOCP和WSA异步协同客户端版
- C#二维数组
- bootstrap-12
- [GraphQL] Use GraphQL's List Type for Collections
- springmvc学习笔记（一）之简介
- 使用Proj.Net创建空间参考
- 越狱Season 1-Episode 6: Riots, Drills and the Devil: Part 1
- JS正则表达式使用方法及示例
- epub-2格式电子书剖析之一：文档构成
- for 的多重循环--java
- iOS触摸事件深度解析－备用
- 使用jquery.form异步提交注意jquery.validate需要手动添加验证
- python3学习笔记九（if语句）
- IntegrityError at /admin/users/userprofile/add/ (1452, 'Cannot add or update a child row: a foreign key constraint fails (`mxonline`.`django_admin_log`, CONSTRAINT `django_admin_log_user_id_c564eba6_
- vue中常用的两中页面刷新的方式和页面回退
- java倒计时使用java.util.Timer实现，使用两个线程，以秒为单位
- Mac mysql sql_model引起的问题
- Network Mapper 嗅探工具
- 常见MQ流行度比较