取消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 ...
随机推荐
- Golang 中哪些值是不可以寻址的
不可以寻址, 指的是不能通过&获得其地址. golang中不能寻址的可以总结为:不可变的,临时结果和不安全的.只要符合其中任何一个条件,它就是不可以寻址的. 具体为: 常量的值. 基本类型值的 ...
- 【xsy2193】Wallace 最大权闭合子图
题目大意:给你一棵$n$个节点的树$a$,每个点有一个点权$val_i$,同时给你另一棵$n$个节点的树$b$. 现在你需要在树$a$上找一个联通块,满足这些点在树$b$上也是连通的,同时树$a$的这 ...
- [原创]Base32加密解密工具
工具: Base32_Decode编译: VS2012 C# (.NET Framework v2.0)组织: K8搞基大队[K8team]作者: K8拉登哥哥博客: http://qqhack8. ...
- json-lib.jar开发包及依赖包的下载地址(转)
一.去官方下载json-lib工具包下载地址:http://sourceforge.net/projects/json-lib/files/json-lib/json-lib-2.4/目前最新的是2. ...
- Python学习--08函数式编程
函数式编程的一个特点就是,允许把函数本身作为参数传入另一个函数,还允许返回一个函数. 高阶函数 Python支持高阶函数(Higher-order function). 什么是高阶函数呢?把函数作为参 ...
- 世界上最短的bash脚本
世界上最短的bash脚本长这样: #!/bin/bash 为啥呢?见下图: 推荐一篇文章,讲解为啥shell脚本开头总是"#!/bin/bash".文风太清奇,不好翻译,看原文吧: ...
- HYPER-V的安装和双机调试的配置(一)
在上一篇文章中,我们已经安装好了VS2017以及WDK,现在我们就需要创建双机调试的环境, 因为本人的工作环境问题,不能使用WMWARE进行虚拟机的安装,因此就针对HYPER-V这个的虚拟机来进行双机 ...
- Java之建造者模式(Builder Pattern)(转)
1.概念 将一个复杂的构建与其表示相分离,使得同样的构建过程可以创建不同的表示. [构建与表示分离,同构建不同表示] 与抽象工厂的区别:在建造者模式里,有个指导者,由指导者来管理建造者,用户是与指导者 ...
- 异常处理:net.sf.cglib.beans.BulkBeanException
今天下午由于各种开会,断断续续写得代码,单元测试的时候,老是报如题的错误,后来查阅资料,发现原来是从数据库查询的值如果为空,则对应实体类执行set方法会赋值null给对应属性值,但是我当时的几个值偏偏 ...
- JavaScript 经典笔记
JavaScript 是弱类型的语言,所以编译器不能检测出类型错误. JavaScript 依赖于全局变量来进行链接.所有编译单元的所有顶级变量被撮合到一个被称为全局对象(the global obj ...