[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 ...
随机推荐
- oracle 误删数据
insert into hr.job_history select * from hr.job_history as of timestamp to_timestamp('2007-07-23 10: ...
- ORCLE 服务器下 in、instr、like的速度比较
情景一(百万级数据):有一个表 (JG_COLLECT_FORM_QGZYXFPHFWJGJC1 ) 有数据条数 :1177472 条 结果:330542条 1.in: SELECT count( ...
- Elasticsearch之CURL命令的DSL查询
它是Domain Specific Language领域特定语言. https://www.elastic.co/guide/en/elasticsearch/reference/current/in ...
- Android基于HttpUrlConnection类的文件下载
/** * get方法的文件下载 * <p> * 特别说明 android中的progressBar是google唯一的做了处理的可以在子线程中更新UI的控件 * * @param pat ...
- 注释及Scriptlet
1.显式注释 <!--xxxxxx-->,在正常页面上也看不出来,右键鼠标查看源代码可以看到 2.隐式注释 //xxxxx /*xxxxxx*/ <%--xxxxxxx--> ...
- Ubuntu下获取内核源码
查看当前系统使用的内核版本: apt-cache search linux-source 输出如下: linux-source - Linux kernel source with Ubuntu pa ...
- .mm c++ oc 混编
When you create a static library you don't link in the dependent libraries. As a result, when you re ...
- 在centos安装 sql server
主要参考官方文档https://docs.microsoft.com/en-us/sql/linux/sql-server-linux-setup-red-hat
- centos 设置 ip地址
linux设置ip,主要是修改/etc/sysconfig/network-scripts/ifcfg-** 里面的网卡配置文件,然后命令 service network restart 生效 自动获 ...
- zabbix_agent自动发现服务端口
应用背景: zabbix监控系统介绍及安装,参考大牛运维生存时间,在这儿就不啰嗦了 为了zabbix-agent端能自动把服务器端的服务端口汇报给 zabbix server端,监控其端口 ...