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的更多相关文章

  1. Fetch API与POST请求那些事

    简述 相信不少前端开发童鞋与后端联调接口时,都会碰到前端明明已经传了参数,后端童鞋却说没有收到,尤其是post请求,遇到的非常多.本文以node.js作为服务端语言,借用express框架,简要分析客 ...

  2. 也许你对 Fetch 了解得不是那么多(下)

    上文链接:也许你对 Fetch 了解得不是那么多(上) 编者按:除创宇前端与作者博客外,本文还在语雀发布. 编者还要按:作者也在掘金哦,欢迎关注:@GoDotDotDot Fetch 与 XHR 比较 ...

  3. 运用javascript的成员访问特性来实现通用版的兼容所有浏览器的打开对话框功能

    打开网页对话框,一般有三种方法:window.open.window.showModalDialog.window.showModelessDialog,每一种都有它的优点与不足.第一种方法:wind ...

  4. Fancytree Javascript Tree的入门使用

    Fancytree Javascript Tree的入门使用 一.概念----是做什么的能干什么 Fancytree是一个Javascript控件,它依赖于: <script src=" ...

  5. Fancytree Javascript Tree TreeTable 树介绍和使用

    Fancytree是一个非常棒的Javascript控件,功能强大,文档健全.在做Javascript Tree控件选型时,主要基于以下几点选择了Fancytree 在Javascript Tree控 ...

  6. 使用 Fetch

    原文链接:https://css-tricks.com/using-fetch/. 本文介绍了Fetch基本使用方法及zlFetch库的使用 无论用JavaScript发送或获取信息,我们都会用到Aj ...

  7. JS Fetch

    使用Fetch 1.进行 fetch 请求 一个基本的 fetch请求设置起来很简单.看看下面的代码: fetch('http://example.com/movies.json') .then(fu ...

  8. 原生AJAX(包括Fetch)

    一.INTRO AJAX即“Asynchronous Javascript And XML” 一.Ajax的原生初级 1.1 Ajax对象创建:var xhr= new XMLHttpRequest( ...

  9. JS之Fetch

    细节叙述见以下链接:https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch 1 基本概念:  WindowOrWo ...

随机推荐

  1. to_string作用

  2. S2深入.NET编程总结

    不知从几何时,我也开始变得懒了,以往为了学习的那股子斗劲也早已不在,是时候反思反思了.失败的检测成绩希望可以把我唤醒. 经过总结,在本书中大概学到了这些知识: 1.如果一个类可序列化,则它的子类和包含 ...

  3. 正则表达式 \D 元字符

    \D元字符可以匹配非数字字符,等价于"[^0-9]". 语法结构: (1).构造函数方式: new RegExp("\\D") (2).对象直接量方式: /\D ...

  4. 联想 K5 Note(L38012)免解锁BL 免rec 保留数据 ROOT Magisk Xposed 救砖 ZUI3.9.218

    >>>重点介绍<<< 第一:本刷机包可卡刷可线刷,刷机包比较大的原因是采用同时兼容卡刷和线刷的格式,所以比较大第二:[卡刷方法]卡刷不要解压刷机包,直接传入手机后用 ...

  5. 学习csv

    1.csv文件读取,csv文件是常用的数据存储格式之一,我们使用Python模块来处理csv文件,这是一个天气信息表 import csv from matplotlib import pyplot ...

  6. js 包管理工具

    环境 Windows10 + node 12.x + Webstorm 2019.1.3 工具 npm cnpm yarn npm/cnpm Webstorm 中第一次安装包一定几率卡死,很烦 不使用 ...

  7. Labview学习笔记(三)

    一.数据 1.数值控件 (1)数值控件 根据不同的模拟状态,放置不同控件 (2)显示格式 为了程序显示,需要设置数值型控件的表示法.数值范围.显示格式等属性. 一般来说,长度越长,则可以表示的数值范围 ...

  8. 内核调试-ftrace introduction

    ftrace https://www.ibm.com/developerworks/cn/linux/l-cn-ftrace1/ https://www.ibm.com/developerworks/ ...

  9. uva 1585 Score(Uva-1585)

    vj:https://vjudge.net/problem/UVA-1585 不多说水题一个o一直加x就加的变为0 我的代码 #include <iostream> #include &l ...

  10. CentOS6.8 安装python2.7,pip以及yum

    由于CentOS6.8里自带的yum所依赖的python是2.6.66版本,但是安装pip至少要求python是2.7版本,因而原有的2.6并不能卸载,又得安装新的2.7.之前安装的时候强制卸载了2. ...