rxjs pipe和filter组合的一个实际例子的单步调试
源代码:
const source$ = range(0, 10);
range(0,10)返回一个新的Observable,但是不会立即执行,直到遇到subscribe调用为止:
下图高亮的这段代码,在Observable.subscribe后会执行:
注册到Observable的_subscribe里:
源代码:
ngOnInit(): void {
console.log('before ngOnInit');
const source$ = range(0, 10);
source$.pipe(
filter((x, index) => {
console.log('inside filter!: ' + x + ' index: ' + index);
return x % 2 === 0 }),
map( x => {
console.log('inside map: ' + x);
return (x + x); }
),
// scan((acc, x) => acc + x, 0)
scan(this.accumulator)
)
.subscribe(x => console.log('result: ' + x));
}
pipe调用的参数传入的是filter, map和scan三个操作的结果,因此首先执行filter:
位于operators目录里:
filter操作接收的参数predicate, 类型是一个函数,该函数接收x和index两个参数,返回boolean类型,这就是所谓的filter-过滤器。filter操作返回一个新的函数,该函数接收一个新的输入source,对source调用lift操作,施加predicate操作。
然后执行pipe操作:
pipe的输入参数就是filter调用的返回结果:
pipeFromArray返回的就是包裹了filter操作的filterOperatorFunction:
进入之前filter调用返回的新函数:
这个source应该是range(0,10)返回的Observable:
对原始Observable对象调用filter返回的predicate操作:
life操作内部新建了一个Observable对象,source是原始Observable对象,operator就是filter对应的predicate.
Observable遇到subscribe方法才会真正地执行Observable内部的方法:
新建一个subscriber,第一个输入参数nextOrObserver就是应用程序里subscribe方法里传入的箭头函数:
subscriber是subscription的子类:
next就是应用程序传入的箭头函数:
注意这里,sink已经准备调用operator了。operator就是filter操作:
进入filter操作:
开始执行subscribe:
执行complete的条件:
调用next:
由此可见,range Observable里包含的值,逐一调用filter:
如果filter返回true,继续调用下一个Observable对象:
这里最终就调用应用程序里传入的subscribe方法了:
range = 0的value已经执行完毕了,下面进行range1:
因为range = 1时filter返回false,所以Observable链式执行到这里就中断了:
range = 2,下面的原理类似,不重复介绍了。
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
相关文章
- 基于idea做java程序的本地k8s调试-skaffold(二)
- IDEA调试技巧之条件断点
- 手机H5 web调试利器——WEINRE (WEb INspector REmote)
- VSCode调试配置
- 如何分析 SAP Spartacus 路由问题之 CheckoutAuthGuard 单步调试
- TypeScript 类装饰器的一个例子和使用单步调试搞清楚其运行原理
- SAP CRM WebClient UI Selenium自动化UI测试的一些调试步骤
- 如何远程调试部署在CloudFoundry平台上的nodejs应用
- CloudFoundry上运行的应用远程调试的一些安全考虑
- SAP UI5应用的一个调试参数 - sap-ds-debug=true
- JavaScript Source Code映射引起的一个SAP C4C代码调试问题
- Angular 基于自定义指令的内容投影 content projection 问题的单步调试
- SAP 电商云 Spartacus UI Angular Component 动态创建的单步调试
- rxjs pipe和map组合的一个实际例子的单步调试
- Android NDK调试出错Unknown Application ABI, Unable to detect application ABI's的解决方式
- vs2010 一个解决方案 多个项目 调试
- vscode调试配置
- Nodejs学习笔记(二)——Eclipse中运行调试Nodejs
- 龙芯软件开发(21)-- 调试与功能选择
- go语言笔记——append是内置的函数!!!new是一个函数!!!调试可以使用闭包,本质上是print调试,尼玛!
- Vivado跑通一个流水灯LED程序,FPGA板级验证、Testbench测试前仿真、逻辑分析仪ila进行调试 三种方式进行验证功能,但逻辑分析仪验证更重要。