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. C# 工厂单例

     public class BusinessFactory    {        private static BusinessFactory instance = null;        pri ...

  2. hcode视频教程中心(学习h5和hbuilder等)

    网站: http://www.hcoder.net/course

  3. Java系列学习(十一)-内部类

    1.内部类 (1)把类定义在另一个类的内部,该类就称为内部类 (2)内部类的访问规则 A:内部类可以直接访问外部类的成员,包括私有 B:外部类要想访问内部类的成员,必须创建对象 (3)内部类的分类 A ...

  4. jQuery自适应倒计时插件

    jQuery自适应倒计时插件 在线演示本地下载

  5. 模拟测试—moq:简单一两句

    在Xunit的基础上,说话模拟测试. 假如我们有这样一个控制器里面有这样一个方法,如图 我们在对Bar测试得时候,如果测试未通过,错误有可能来至于Bar,也有可能错误来至于serverde Foo方法 ...

  6. tomcat报错org.springframework.web.context.ContextLoaderListener找不到

    tomcat报错org.springframework.web.context.ContextLoaderListener找不到. 最后解决办法:将jar包copy到web-inf下面的lib中. 你 ...

  7. JS——scroll

    scrollWidth:父div宽度小于子div宽度,父div scrollWidth宽度为子div的宽度,大于则为本身的宽度width+padding scrollHeight:父div高度小于子d ...

  8. (转)Struts2快速入门

    http://blog.csdn.net/yerenyuan_pku/article/details/66187307 Struts2框架的概述 Struts2是一种基于MVC模式的轻量级Web框架, ...

  9. Codeforces_The least round way

    B. The least round way time limit per test 2 seconds memory limit per test 64 megabytes input standa ...

  10. groupbox

    使用groupbox将radiobox 放入其中可以使组框中只选中一个