[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 ...
随机推荐
- Qt_为什么学习Qt
1)学习GUI编程,市场上任何一款产品几乎都带有图形界面,市场上很火的Androoid.IOS编程无非也是GUI app编程,GUI编程都是差不多的,学习Qt后再学习ANdroid IOS ,那都是S ...
- P2257 YY的GCD (莫比乌斯反演)
题意:求\[\sum_{i=1}^{n}\sum_{j=1}^{m}[gcd(i,j) = prim]\] 题解:那就开始化式子吧!! \[f(d) = \sum_{i=1}^{n}\sum_{j=1 ...
- PHP100视频教程-->视频下载
链接:https://pan.baidu.com/s/14tbX1rz3hYSKY6k0T6WVzg提取码:kypy PHP是一种目前最流行的服务端Web程序开发语言之一.PHP主要的特点是语法简单易 ...
- cf上分的失落->高兴->更失落
cf昨日做出一个题居然div2打了1800多名直接上分了...我原以为垂直落地但是....我现在1399差一分就能蓝名了啊啊啊啊,以后不一定会有这个水平的啊,给个蓝名体验卡不行吗,多加一分会死啊... ...
- CF-478C
You have r red, g green and b blue balloons. To decorate a single table for the banquet you need exa ...
- Ubuntu配置SSH服务器
SSH 为 Secure Shell 的缩写,由 IETF 的网络小组(Network Working Group)所制定:SSH 为建立在应用层和传输层基础上的安全协议.SSH 是目前较可靠,专为远 ...
- 剑指Offer(书):数组中重复的数字
题目:找出数组中重复的数字. 说明:在一个长度为n的数组里的所有数字都在0~n-1的范围内,数组中某些数字是重复的,但是不知道有几个数字重复了,也不知道每个数字重复了几次.请找出数组中任意一个重复的数 ...
- npm start问题
问题:在执行命令npm start 是出现下列问题: npm [] WARN invalid config loglevel="notice" [] npm WARN invali ...
- LayUI分页基于ASP.NET MVC
---恢复内容开始--- 今天写了挺久的分页,百度了很多都没有很好的.Net实例,今天我来更新一期关于layuiTable分页 首先你得理解layui的官方文档的Table分页部分,我在这里附上地址 ...
- 准备新的代码迁移到cnblogs
http://www.cnblogs.com/danghuijian/ http://www.cnblogs.com/danghuijian/