[Javascript] AbortController to cancel the fetch request
We are able to cancel the fetch request by using AbortController with RxJS Observable.
return Observable.create(observer => {
// Create an AbortController to able to cancel the fetch request
const controller = new AbortController();
// we need singal to pass to the fetch request
const signal = controller.singal;
// Pass the singal in fetch options
fetch(url, { singal })
.then(response => {
return response.json();
})
.then(body => {
observer.next(body);
observer.complete();
})
.catch(err => {
observer.error(err);
});
// When comsumer call sub.unsubscribe(), it will call abort()
// to cancel the request.
return () => controller.abort();
});
[Javascript] AbortController to cancel the fetch request的更多相关文章
- Fetch API与POST请求那些事
简述 相信不少前端开发童鞋与后端联调接口时,都会碰到前端明明已经传了参数,后端童鞋却说没有收到,尤其是post请求,遇到的非常多.本文以node.js作为服务端语言,借用express框架,简要分析客 ...
- 也许你对 Fetch 了解得不是那么多(下)
上文链接:也许你对 Fetch 了解得不是那么多(上) 编者按:除创宇前端与作者博客外,本文还在语雀发布. 编者还要按:作者也在掘金哦,欢迎关注:@GoDotDotDot Fetch 与 XHR 比较 ...
- 运用javascript的成员访问特性来实现通用版的兼容所有浏览器的打开对话框功能
打开网页对话框,一般有三种方法:window.open.window.showModalDialog.window.showModelessDialog,每一种都有它的优点与不足.第一种方法:wind ...
- Fancytree Javascript Tree的入门使用
Fancytree Javascript Tree的入门使用 一.概念----是做什么的能干什么 Fancytree是一个Javascript控件,它依赖于: <script src=" ...
- Fancytree Javascript Tree TreeTable 树介绍和使用
Fancytree是一个非常棒的Javascript控件,功能强大,文档健全.在做Javascript Tree控件选型时,主要基于以下几点选择了Fancytree 在Javascript Tree控 ...
- 使用 Fetch
原文链接:https://css-tricks.com/using-fetch/. 本文介绍了Fetch基本使用方法及zlFetch库的使用 无论用JavaScript发送或获取信息,我们都会用到Aj ...
- JS Fetch
使用Fetch 1.进行 fetch 请求 一个基本的 fetch请求设置起来很简单.看看下面的代码: fetch('http://example.com/movies.json') .then(fu ...
- 原生AJAX(包括Fetch)
一.INTRO AJAX即“Asynchronous Javascript And XML” 一.Ajax的原生初级 1.1 Ajax对象创建:var xhr= new XMLHttpRequest( ...
- JS之Fetch
细节叙述见以下链接:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch 1 基本概念: WindowOrWo ...
随机推荐
- Boost(1.69.0) windows入门(译)
目录 Boost windows入门 1. 获得Boost源代码 2. Boost源代码组织 The Boost Distribution 3. 仅用头文件的库 Header-Only Librari ...
- Django 内容回顾
模板 变量 {{ }} 标签 {% %} if elif else for empty forloop() with...as csrf_token 过滤器 default length add da ...
- BZOJ 3998 后缀数组
思路: 第一问 建出来后缀数组以后 前缀和一发n-sa[i]-ht[i]+1 二分 第二问 二分判断是带重复的第几 怎么判断呢 找到它 往后扫ht递减sum+=它 跟K判判 注意等于 加 ...
- Moto P30(XT1943-1) 免解锁BL 免rec 保留数据 Magisk Xposed ROOT 救砖 ZUI 4.0.374
>>>重点介绍<<< 第一:本刷机包可卡刷可线刷,刷机包比较大的原因是采用同时兼容卡刷和线刷的格式,所以比较大第二:[卡刷方法]卡刷不要解压刷机包,直接传入手机后用 ...
- jQuery与js的区别,并有基本语法详解,
通过过一下对比,我们能很清楚的发现jquery与js的区别,运用jquery能大量减少代码量,不过js里面关于时间的setinterval和settimeout只能用js <script src ...
- C语言保留字
数值变量相关: int float double char long short unsigned signed 储存说明符 const 用于声明常量 static用于限制变量/函数的作用范围等等 e ...
- php判断form数据是否为POST而来,判断数据提交方式
//判断form数据是否为POST而来,判断数据提交方式 if ($_SERVER['REQUEST_METHOD'] != 'POST') { // 非 POST 来路,做警告或你想做的事 retu ...
- Ubuntu14.4安装mysql
一.安装 apt-get install mysql-server mysql-client 设置用户名和密码 二.检查 sudo service mysql restart 三.支持 1.apach ...
- CSS之float浮动
CSS理解之float浮动 首先我们看看W3C给出的关于 float 的说明: 参考资料 MDN W3C
- day06-数字类型、字符串类型内置方法
目录 数字类型内置方法 字符串类型内置方法 有序 or 无序 可变 or 不可变 数字类型内置方法 1. int()强制类型转化成整型 age_str = '18' # 定义字符串 age = int ...