[RxJS] Implement RxJS `switchMap` by Canceling Inner Subscriptions as Values are Passed Through
switchMap is mergeMap that checks for an "inner" subscription. If the "inner" subscription exists, switchMap unsubscribes from that "inner" subscription which effectively "cancels" any pending pushes.
import { fromEvent, of, Subscriber } from "rxjs"
import {
scan,
delay,
mergeMap,
switchMap
} from "rxjs/operators"
class MySwitchMapSubscriber extends Subscriber {
innerSubscription
constructor(sub, fn) {
super(sub)
this.fn = fn
}
_next(value) {
console.log(`outer`, value)
const o$ = this.fn(value)
if (this.innerSubscription) {
this.innerSubscription.unsubscribe()
}
this.innerSubscription = o$.subscribe({
next: value => {
console.log(` inner`, value)
this.destination.next(value)
}
})
}
}
const mySwitchMap = fn => source =>
source.lift({
call(sub, source) {
source.subscribe(
new MySwitchMapSubscriber(sub, fn)
)
}
})
const observable$ = fromEvent(
document,
"click"
).pipe(
scan(i => i + , ),
mySwitchMap(value => of(value).pipe(delay()))
)
const subscriber = {
next: value => {
console.log(value)
},
complete: () => {
console.log("done")
},
error: value => {
console.log(value)
}
}
observable$.subscribe(subscriber)
[RxJS] Implement RxJS `switchMap` by Canceling Inner Subscriptions as Values are Passed Through的更多相关文章
- [RxJS] Implement RxJS `concatMap` by Waiting for Inner Subscriptions to Complete
Unlike mergeMap and switchMap, concatMap focuses on when "inner" subscriptions "compl ...
- [RxJS] Implement RxJS `mergeMap` through inner Observables to Subscribe and Pass Values Through
Understanding sources and subscribers makes it much easier to understand what's going on with mergeM ...
- [RxJS] Implement the `map` Operator from Scratch in RxJS
While it's great to use the RxJS built-in operators, it's also important to realize you now have the ...
- [RxJS] exhaustMap vs switchMap vs concatMap
exhaustMap: It drop the outter observable, just return the inner observable, and it waits until prev ...
- [RxJS] Implement pause and resume feature correctly through RxJS
Eventually you will feel the need for pausing the observation of an Observable and resuming it later ...
- [RxJS] Use RxJS concatMap to map and concat high order observables
Like switchMap and mergeMap, concatMap is a shortcut for map() followed by a concatAll(). In this le ...
- [RxJS] Use RxJS mergeMap to map and merge high order observables
Like RxJS switchMap() is a shortcut for map() and switch(), we will see in this lesson how mergeMap( ...
- [RxJS] Chain RxJS Operators Together with a Custom `pipe` Function using Array.reduce
Instead of writing complex operators, it's usually best to write simple, single-purpose operators th ...
- [RxJS] Convert RxJS Subjects to Observables
The use of RxJS Subjects is common, but not without problems. In this lesson we will see how they ca ...
随机推荐
- CSS3---渲染属性
1.计数器 CSS3计数器( CSS Counters )可以允许我们使用css对页面中的任意元素进行计数,实现类似于有序列表的功能.与有序列表相比,它的突出特性在于可以对任意元素计数,同时实现个性化 ...
- CSS---基础外部样式表
<link rel="stylesheet" type="text/css" href="style.css" media=" ...
- linux 服务器 php vue项目部署流程总结
服务器配置 购买阿里云服务器 (选择ubuntu 16系统 / 内存2G以上) 安全策略, 入规则: 添加端口 20,21,22, 80, 443, 3306, 8080, 安装宝塔 wget -O ...
- C语言学习9
婚礼的谎言 三对情侣参加婚礼,三个新郎为A.B.C,三个新娘为X.Y.Z.有人想知道究竟水域谁结婚2,于是就问新人中的三位,得到结果如下:A说他将和X结婚:X说她的未婚夫是C:C说他将和Z结婚.这人事 ...
- SpringMVC最核心
如图所示:
- Vue微信自定义分享时安卓系统config:ok,ios系统config:invalid signature签名错误,或者安卓和ios二次分享时均config:ok但是分享无效的解决办法
简述需求:要求指定页面可以进行微信自定义分享(自定义标题,描述,图片,链接),剩下的页面隐藏所有基础接口.二次分享依然可以正常使用,切换至其他页面也可以正常进行自定义分享. 这两天在做微信自定义分享的 ...
- BootStrap学习01框架搭建
中文文档:https://v3.bootcss.com/css/ 开发工具 WebStorm 一.新建项目08bootstrap 引入bootstrap-3.3.7,引入jQuery,引入holder ...
- Pychorm提示Unresolved reference 导入模块报错
最近使用Pychorm编写Python时,每次要引入自定义模块,就会报错,提示“Unresolved reference” Unresolved reference 'LoginClass' more ...
- UVALive 2957 Bring Them There
Bring Them There Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. O ...
- ASP.NET MVC WebAPI请求
基础: 首先,先创建一个“ASP.NET 空Web应用程序” : 然后添加对 “System.Web.Http” 和 “System.Web.Http.WebHost” 的引用: 再添加对“Syste ...