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. Git 迁库 标签

    Git迁库 (一)克隆裸库 git clone --bare https://github.com/SunArmy/Tourist.git 克隆之后进入该目录下是这样的 (二)创建新的版本库 这里我已 ...

  2. ACM_堆箱子咯(栈)

    堆箱子咯 Time Limit: 2000/1000ms (Java/Others) Problem Description: 双十一大家都在买买买,可忙坏了快递小哥了.zl和皮卡鸡在大伙在剁手的时候 ...

  3. 高斯消元_HihoCoderOffer6_03

    题目3 : 图像算子 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在图像处理的技术中,经常会用到算子与图像进行卷积运算,从而达到平滑图像或是查找边界的效果. 假设原图 ...

  4. Manacher 学习笔记

    \(\\\) \(Manacher\) 一种常用的字符串算法,用于处理一些回文字符相关的问题. 回文串:从前向后和从后向前输出一致. 回文中心:以这里开始,每次向外左右各扩展一个字符得到的回文串的中心 ...

  5. P1257 平面上的最接近点对

    题目描述 给定平面上n个点,找出其中的一对点的距离,使得在这n个点的所有点对中,该距离为所有点对中最小的 输入输出格式 输入格式: 第一行:n:2≤n≤200000 接下来n行:每行两个实数:x y, ...

  6. php判断form数据是否为POST而来,判断数据提交方式

    //判断form数据是否为POST而来,判断数据提交方式 if ($_SERVER['REQUEST_METHOD'] != 'POST') { // 非 POST 来路,做警告或你想做的事 retu ...

  7. 在Yosemite中创建个人站点

    Yosemite变动很大,随之而来的就是一堆坑,之前在旧版OS中有效的方法在新版OS上已经不起作用了,创建个人站点就是一例. Mac OS内置Apache,安装目录在/etc/apache2/,etc ...

  8. python编辑csv

    import csv import time def timestamp_to_timestr(timeStamp): timeArray = time.localtime(int(timeStamp ...

  9. 【sqli-labs】 less49 GET -Error based -String -Blind -Order By Clause(GET型基于盲注的字符型Order By从句注入)

    都是order by的注入,作者连图片都懒得改了... 注意和整型的区别,前引号用提交的引号闭合,后引号用#注释 http://192.168.136.128/sqli-labs-master/Les ...

  10. 常见Android安装启动失败问题

    1.INSTALL_FAILED_VERSION_DOWNGRADE版本过低2.Failed to install Funm_AND.apk on device 'QWOJLVR8KNHYA6NR': ...