取消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 ...
随机推荐
- 对于opencv全面貌的认识和理解
1.opencv其实最开始只有源码,也就是sources中的代码,sources中有个modules,进入里面是各个我们平常使用的模块,如下图. 进入任意一个模块,比如calib3d,其中有inclu ...
- jquery中的ajax请求,阻塞ui线程的解决方案(自己总结的demo)
/*****************************************************/ function getAjaxData(url,data){ showLoading( ...
- Django 模板相关
Django 模板相关 视图函数只是直接返回文本,而在实际生产环境中其实很少这样用,因为实际的页面大多是带有样式的HTML代码,这可以让浏览器渲染出非常漂亮的页面.目前市面上有非常多的模板系统,其中最 ...
- odoo开发基础--模型之基本字段类型
定义模型的时候,和python的其他框架类似,可以对比Django,同样是一个模型即:一个class对应生成数据库中的一张表, 只是odoo的继承机制比较复杂一点,在日常的开发中,定义模型的时候, 基 ...
- How To Crop Bitmap For UWP
裁剪图片主要是借助于 BitmapDecoder.GetPixelDataAsync() 以及 BitmapTransform对象来实现. 实现的代码如下: using System; using S ...
- Oracle 获取本周、本月、本季、本年的第一天和最后一天
Oracle 获取本周.本月.本季.本年的第一天和最后一天 --本周 select trunc(sysdate, 'd') + 1 from dual; select trunc(sysdate, ' ...
- JDK并发包总结
本文主要介绍jdk中常用的同步控制工具以及并发容器, 其结构如下: 同步控制工具类 ReentrantLock 简而言之, 就是自由度更高的synchronized, 主要具备以下优点. 可重入: 单 ...
- 使用Docker发布应用
新建spring boot应用demo-docker,添加web依赖 <dependency> <groupId>org.springframework.boot</gr ...
- 全网最详细的启动zkfc进程时,出现INFO zookeeper.ClientCnxn: Opening socket connection to server***/192.168.80.151:2181. Will not attempt to authenticate using SASL (unknown error)解决办法(图文详解)
不多说,直接上干货! at org.apache.zookeeper.ClientCnxnSocketNIO.doTransport(ClientCnxnSocketNIO.java:) at org ...
- 编写自己的SpringBoot-starter
前言 我们都知道可以使用SpringBoot快速的开发基于Spring框架的项目.由于围绕SpringBoot存在很多开箱即用的Starter依赖,使得我们在开发业务代码时能够非常方便的.不需要过多关 ...