rxjs pipe和map组合的一个实际例子的单步调试

简介: rxjs pipe和map组合的一个实际例子的单步调试

原始代码:

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));

执行subscribe操作:image.png

operator就是map operator的wrapper:image.png

此处调用source Observable实例的subscribe方法:image.png

原始的Observable就是调用了range之后生成的Observable对象:image.png

调用下一个Observable:

image.png

即map operator的实现:image.png

再由map operator传递给下一个subscriber:image.png

于是就执行到了应用程序指定的subscribe回调里:image.png


相关文章
|
6月前
|
开发框架 .NET C#
如何调试 C# Emit 生成的动态代码?
如何调试 C# Emit 生成的动态代码?
|
4天前
|
Python
Python函数式编程,map(), filter() 和 reduce() 函数的作用是什么?
Python函数式编程,map(), filter() 和 reduce() 函数的作用是什么?
|
8月前
|
存储
rxjs Observable of 操作符的单步调试分析
rxjs Observable of 操作符的单步调试分析
38 1
turtle.setup 函数的调用(简洁)(带图解释)
turtle.setup 函数的调用(简洁)(带图解释)
392 0
turtle.setup 函数的调用(简洁)(带图解释)
rxjs pipe和filter组合的一个实际例子的单步调试
rxjs pipe和filter组合的一个实际例子的单步调试
223 0
rxjs pipe和filter组合的一个实际例子的单步调试
rxjs的pipe和map配合使用的单步调试
rxjs的pipe和map配合使用的单步调试
187 0
rxjs的pipe和map配合使用的单步调试
rxjs pipe和map组合的一个实际例子的单步调试
rxjs pipe和map组合的一个实际例子的单步调试
rxjs pipe和map组合的一个实际例子的单步调试
rxjs里b = a.pipe(map(mapFn))的执行示意图
rxjs里b = a.pipe(map(mapFn))的执行示意图
80 0
rxjs里b = a.pipe(map(mapFn))的执行示意图
|
缓存
NgRx Store createSelector 返回的 selector 执行取数逻辑的单步调试
NgRx Store createSelector 返回的 selector 执行取数逻辑的单步调试
107 0
NgRx Store createSelector 返回的 selector 执行取数逻辑的单步调试
一个基于ngrx的计数器例子 单步调试搞清楚原理
一个基于ngrx的计数器例子 单步调试搞清楚原理
一个基于ngrx的计数器例子 单步调试搞清楚原理