取消Fetch API请求
如今,Fetch API已经成为现在浏览器异步网络请求的标准方法,但Fetch也是有弊端的,比如: Fetch还没有方法终止一个请求,而且Fetch无法检测上传进度
现在我们可以通过 AbortController 和 AbortSignal 来终止,代码如下:
const controller = new AbortController()
const signal = controller.signal
fetch('./data.json', { signal })
可以通过controller.abort()来通知终止事件,比如,你可以在请求发出后3秒来终止请求
setTimeout(() => { controller.abort(); }, 3 * 1000);
如果请求完成了,调用absort()不会发生错误
如果请求没有完成,那么Fetch就会抛出一个DOMException异常,异常的name属性值为"AbortError",可以在promise中的catch捕获这个异常
例如: fetch('./data.json', { signal })
.then((res) => {})
.catch((err) => {
if (err.name === 'AbortError') {
console.log('Fetch aborted');
} else {
console.log('Another error');
}
})
取消Fetch API请求的更多相关文章
- 解决React Native使用Fetch API请求网络报Network request failed
问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...
- ES6 Fetch API HTTP请求实用指南
本次将介绍如何使用Fetch API(ES6 +)对REST API的 HTTP请求,还有一些示例提供给大家便于大家理解. 注意:所有示例均在带有箭头功能的 ES6中给出. 当前的Web /移动应用程 ...
- Fetch API与POST请求那些事
简述 相信不少前端开发童鞋与后端联调接口时,都会碰到前端明明已经传了参数,后端童鞋却说没有收到,尤其是post请求,遇到的非常多.本文以node.js作为服务端语言,借用express框架,简要分析客 ...
- Cross-origin resource sharing JSON with Padding 同源策略 JSONP 为什么form表单提交没有跨域问题,但ajax提交有跨域问题? XMLHttpRequest and the Fetch API follow the same-origin policy 预检请求(preflight request)
https://zh.wikipedia.org/wiki/跨来源资源共享 跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略[1 ...
- 如何取消一个 Ajax 请求
如何取消一个 Ajax 请求 jQuery XMLHttpRequest.abort() https://stackoverflow.com/questions/446594/abort-ajax-r ...
- (转)这个API很“迷人”——新的Fetch API
原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以 ...
- Ajax新玩法fetch API
目前 Web 异步应用都是基于 XMLHttpRequest/ActiveXObject (IE)实现的, 这些对象不是专门为资源获取而设计的,因而它们的 API 非常复杂,同时还需要开发者处理兼容性 ...
- vue项目实践-添加axios封装api请求
安装 axios npm install axios --save 创建实例 (utils/fetch.js) axios 默认提交格式为:application/json 可使用 qs 模块(需要安 ...
- 使用Vue cli3搭建一个用Fetch Api的组件
系列参考 ,英文原文参考 我的git代码: https://github.com/chentianwei411/Typeahead 目标: 建立一个输入关键字得到相关列表的组件,用Vuejs2和Fet ...
随机推荐
- [每天解决一问题系列 - 0001] Javascript apply和 call对比
相同点: 每个函数都包含这两个原生的方法 他们两个的效果是一样的,用于在特定的作用域下执行函数,本质上是设置函数内this对象的值. 不同点: 传入的参数类型不同 . apply(函数作用域,arra ...
- pcm原始数据绘制
最近帮别人做了个东西,这里分享一下pcm原始数据绘图的思路 1.pcm数据采样位数,根据采样位数选取适合自己绘图的采样点的数量 2.计算出最大最小的的采样点的值差 3.根据要显示pcm数据的控件宽高, ...
- sql server 主从库设计和数据库镜像设计
sql server 主从设计可以通过sql server 的发布订阅实现,在大数据量的时候不要用快照发布,要使用事务发布的方式实现. 主从的设计后,要将数据库的读写分离,实现数据库效率的提示 而数据 ...
- EOS 理解
1.通过石墨烯技术来解决延迟和吞吐量. 2.账户体系:账户是可读的唯一标识符,不是地址.可包含多对公私钥.账户有权限规划.权限有阈值,公私钥有权重,公私钥的权重大于等于阀值才能拥有该权限进行相应操作. ...
- 24-hadoop-hiveserver2&jdbc-正则数据导入
hive 可以 类似jdbc链接, 但启动的必须是hiveserver2, 才可以使用 hiveserver2 默认监听 10000 端口 1, 启动: nohup $HIVE_HOME/bin/hi ...
- 【详解】核心组件之UserDetailService
简介 UserDetails => Spring Security基础接口,包含某个用户的账号,密码,权限,状态(是否锁定)等信息.只有getter方法. Authentication => ...
- Go的基本类型与变量
基本类型 布尔型:bool 长度:1字节 取值范围:true,false 注意:不可以用数字代表true或false 整型:int/uint 根据运行平台可能为32或64位 8位整型:int8/uin ...
- java中类的加载顺序介绍(ClassLoader)
转自:http://blog.csdn.net/eff666/article/details/52203406 1.ClassNotFoundExcetpion 我们在开发中,经常可以遇见java. ...
- DispatcherServlet源码注解分析
DispatcherServlet的介绍与工作流程 DispatcherServlet是SpringMVC的前端分发控制器,用于处理客户端请求,然后交给对应的handler进行处理,返回对应的模型和视 ...
- 并发编程 —— 自己写一个异步回调 API
1. 前言 在并发编程中,异步回调的效率不言而喻,在业务开发中,如果由阻塞的任务需要执行,必然要使用异步线程.并且,如果我们想在异步执行之后,根据他的结果执行一些动作. JDK 8 之前的 Futur ...