[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 ...
随机推荐
- Zend studio 修改编码格式
一.临时修改编码格式 edit -> Set Encoding... -> Other(选择) 二.修改软件默认编码格式
- MFC (Combo-box control)下拉列表控件的使用
1.可以选择,但无法编辑状态: 选择下拉框的属性中的类型(Type)参数——Drop List; 2.如何控制Combo Box的下拉长度 1,一.在资源文件中打开对话框,选中Combo Box控件, ...
- SQL使用exists时的多种写法
from test; go from test; go 下面这种效率明显高不少.
- VC-基础:常用的安全CRT函数
常用的安全CRT函数 安全CRT(C Runtime Library = C运行时间库)函数,是微软公司对C/C++语言的扩展.它在原来函数名后添加了“_s”后缀:一般返回出错代码:并将原来的函数返回 ...
- Encryption requires the OpenSSL PHP extension 报错
报错截图: 解决办法: 修改php.ini配置文件,打开该拓展 open php.ini search “opensll” remove the semicolon from: extension=p ...
- cc.Component
组件入口函数1: onLoad: 组件加载的时候调用, 保证了你可以获取到场景中的其他节点,以及节点关联的资源数据;2: start: 也就是第一次执行 update 之前触发;3: update(d ...
- 操作系统复习——如何查看一个进程的详细信息,如何追踪一个进程的执行过程 ,如何在 Linux 系统下查看 CPU、内存、磁盘、IO、网卡情况?epoll和select区别?
1. 如何查看一个进程的详细信息,如何追踪一个进程的执行过程 通过pstree命令(根据pid)进行查询进程内部当前运行了多少线程:# pstree -p 19135(进程号) 使用top命令查看(可 ...
- Python数据分析 Pandas模块 基础数据结构与简介(二)
重点方法 分组:groupby('列名') groupby(['列1'],['列2'........]) 分组步骤: (spiltting)拆分 按照一些规则将数据分为不同的组 (Applying)申 ...
- Objective-C-------(1)创建并使用对象
#import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepool { ...
- 如何在小程序自定义组件和动态传入数据小demo
在开发过程中,我们会将页面常用功能抽象为一个组件,这样既方便又可以避免代码冗余.小程序中也提供了自定义组件,了解Vue的伙伴们会发现其实和Vue的组件化很相似.这里用返回顶部功能来说说如何自定义组件, ...