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. RHEL6.5安装成功ORACLE11GR2之后,编写PROC程序出错解决方法

    1.  proc: error while loading shared libraries: libclntsh.so.11.1: cannot open shared object file: N ...

  2. 上传Android代码到gerrit服务器

    1. 配置default.xml default.xml是跟Android代码配套的,可参考google Android源码下的default.xml(.repo/manifests/default. ...

  3. 启用禁用USB接口

    一个小工具,功能有启用禁用外网.USB接口,可由服务端socket长链接进行操控客户端从而达到实现前边的这些功能,这里贴上核心代码,先给上启用禁用USB接口吧,这个方法可随时启用禁用,之前用过一个改u ...

  4. Java系列学习(十)-包与权限修饰符

    1.形式参数和返回值的问题 (1)形式参数: A:类名:需要该类的对象 B:抽象类名:需要改类的子类对象 C:接口名:需要该接口的实现对象 (2)返回值类型: A:类名:抽象类名:返回的是该类的对象 ...

  5. cms中某些标题链接的单独写法

    href="{$CATEGORYS[45][url]}" 链接写法, {$CATEGORYS[45][catname]} 标题写法 在show页面中 src="{$thu ...

  6. JS——事件冒泡与捕获

    事件冒泡与事件捕获 1.冒泡:addEventListener("click",fn,false)或者addEventListener("click",fn): ...

  7. RAID技术简单分析

    RAID技术解析 RAID:独立磁盘冗余阵列(Redundant Array of Independent Disks) RAID技术就是将许多块硬盘设备组合成一个容量更大.更安全的硬盘组,可以将数据 ...

  8. 视频cover占满

    /* 关键属性 */ object-fit: fill; //被替换的内容的大小,以填补该元素的内容框:对象的具体对象的大小是元素的使用宽度和高度. object-fit: contain;被替换的内 ...

  9. 怎么用最短时间高效而踏实地学习Python?

    之所以写这篇文章,在标题里已经表达得很清楚了.做技术的人都知道,时间就是金钱不是一句空话,同一个技术,你比别人早学会半年,那你就能比别人多拿半年的钱.所以有时候别人去培训我也不怎么拦着,为什么?因为培 ...

  10. flutter 环境搭建

    环境: ladder什么的是必不可少的 win10 + Idea 2019.1.13 + Genymotion 2.12 基本可以在模拟器中运行项目,还有些许小问题,但是可以看到效果了 基本流程 下载 ...