[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 mergeMap
under the hood. Where a typical operator invokes destination.next
directly, mergeMap
wraps destination.next
inside of a new source/subscriber combo so there's an "outer" next and an "inner" next.
import { fromEvent, of, Subscriber } from "rxjs"
import {
scan,
delay,
mergeMap
} from "rxjs/operators" class MyMergeMapSubscriber extends Subscriber {
constructor(sub, fn) {
super(sub) this.fn = fn
} _next(value) {
console.log(`outer`, value)
const o$ = this.fn(value) o$.subscribe({
next: value => {
console.log(` inner`, value)
this.destination.next(value)
}
})
}
} const myMergeMap = fn => source =>
source.lift({
call(sub, source) {
source.subscribe(
new MyMergeMapSubscriber(sub, fn)
)
}
}) const observable$ = fromEvent(
document,
"click"
).pipe(
scan(i => i + , ),
myMergeMap(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 `mergeMap` through inner Observables to Subscribe and Pass Values Through的更多相关文章
- [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" su ...
- [RxJS] Implement RxJS `concatMap` by Waiting for Inner Subscriptions to Complete
Unlike mergeMap and switchMap, concatMap focuses on when "inner" subscriptions "compl ...
- [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] 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 ...
- [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 ...
- [Javascript + rxjs] Simple drag and drop with Observables
Armed with the map and concatAll functions, we can create fairly complex interactions in a simple wa ...
- [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] 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] 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 ...
随机推荐
- python之路——内置函数和匿名函数
阅读目录 楔子 内置函数 匿名函数 本章小结 楔子 在讲新知识之前,我们先来复习复习函数的基础知识. 问:函数怎么调用? 函数名() 如果你们这么说...那你们就对了!好了记住这个事儿别给忘记了,咱们 ...
- JVM的异常体系
任何程序都追求正确有效的运行,除了保证我们代码尽可能的少出错之外,我们还要考虑如何有效的处理异常,一个良好的异常框架对于系统来说是至关重要的.最近在采集框架的时候系统的了解一边,收获颇多,特此记录相关 ...
- Error:Failed to resolve: com.afollestad:material-dialogs:
http://www.chenruixuan.com/archives/1068.html 背景: 同事把Android项目直接考给了我...我在Android Studio上运行,然后提示: Err ...
- PHP11 日期和时间
学习要点 UNIX时间戳 将其他格式的日期转成UNIX时间戳格式 基于UNIX时间戳的日期计算 获取并格式化输出日期 修改PHP的默认时间 微秒的使用 Unix时间戳 相关概念 Unix tim ...
- 多线程test
import java.io.UnsupportedEncodingException; import java.util.HashMap; import java.util.Map; import ...
- phpize Cannot find autoconf. 错误解决
phpize Configuring for: PHP Api Version: 20151012 Zend Module Api No: 20151012 Zend Extension Api No ...
- linux 配置文件要不要加上#! /bin/bash
现在一般的linux系统默认的shell都是bash.所以但很多unix系统可能会用bourne shell.csh或者ksh等来作为用户默认shell 如果你在写shell脚本的时候,用的语法只有b ...
- centos挂载本地镜像作为yum源
1.安装Centos后默认的Yum源如下 ll /etc/yum.repos.d/ [root@localhost ~]# ll /etc/yum.repos.d/ total 32 -rw-r- ...
- [vijos1159]岳麓山上打水
[vijos1159]岳麓山上打水 试题描述 今天天气好晴朗,处处好风光,好风光!蝴蝶儿忙啊,蜜蜂也忙,信息组的同学们更加忙.最近,由于XX原因,大家不得不到岳麓山去提水.55555555~,好累啊. ...
- 舆论的力量---数学建模初探(SI模型)
在高中时除了物理竞赛没有学习外,竞赛的五大学科剩下的四门均有所涉猎及参加,因而精力分散太多.因此下定决心大学时可以广泛涉猎知识,但是主攻的竞赛只能有两个ACM和MCM,如今虽然高考完挂,但学术之心尚存 ...