rxjs Observable of 操作符的单步调试分析
看这段最简单的代码:
import { Observable, of } from 'rxjs';
const observable = of(1, 2, 3);
observable.subscribe((message) => {
console.log(message);
});
输出:
输入的 1,2,3 被当成数组处理,触发 fromArray 函数调用:
因为不存在 scheduler 调用,所以进入 subscribeToArray 分支:
subscribeToArray 的实现在一个 subscribeToArray.ts
文件里,这个文件的命名空间如下:internal/util
注意,上图第 8 行的 for 循环,显然在 of 函数调用里不会执行,而是 of 返回的 Observable 被 subscribe 时才执行。subscribeToArray 的逻辑就是,一个简单的 for 循环,循环体内依次调用 subscriber 的 next 方法,最后调用 complete 方法。
subscribeToArray 返回的函数,存储在 Observable 构造函数的 _subscribe 属性内。
然后针对这个 of 返回的 Observable 实例,调用 subscribe 方法。
of Observable 实例的 _subscribe 方法,指向的就是刚刚 subscribeToArray 返回的函数:
直到 Observable 被 subscribe,这个函数体才得以执行。在函数体的 for 循环内,逐一调用 subscriber 的 next 方法:
subscriber 并不是应用开发人员创建的,而是 rxjs 框架内部维护和使用的。subscriber 有一个属性 destination,指向 Safesubscriber,这个 safesubscriber 的 _next 属性,指向的就是应用开发人员维护的回调函数。
这段函数先后执行顺序如下图图例所示:
subscribe 除了传入一个单一的回调函数之后,还支持 error 和 complete 处理。
看下面的例子:
import { Observable, of } from 'rxjs';
const observable = of(1, 2, 3);
observable.subscribe(
(message) => {
console.log(message);
},
() => {},
() => {
console.log('complete');
}
);
complete 方法和 next 方法的执行逻辑类似,唯一区别是在 for 循环体执行完毕之后触发:
由此可见,of 创建的 Observable 是 cold Observable.
如果是一个周期性发射数据的 Observable,我们还可以使用 unsubscribe 对其取消订阅。看下面的代码:
import { interval } from 'rxjs';
const observable = interval(1000);
const subscription = observable.subscribe((x) => console.log(x));
setTimeout(() => {
subscription.unsubscribe();
}, 4500);
输出:
该 Observable 在输出 4 个整数后停止发射值。
相关文章
- Xcode调试非异常导致崩溃的程序
- 如何调试Javascript代码
- 【BSP视频教程】STM32H7视频教程第6期:MDK专题进阶,Cortex-M内核芯片Hardfault硬件异常调试分析定位(2022-02-17)
- 【安富莱专题教程第7期】终极调试组件Event Recorder,各种Link通吃,支持时间和功耗测量,printf打印,RTX5及中间件调试
- 微信小程序开发系列 (二) :微信小程序的单步调试和控制器实现步骤概述
- vlc源码分析一 vlc-android native调试配置
- Qt分析之调试跟踪系统
- 云小课 | 玩转HiLens Studio之手机实时视频流调试代码
- Python自带又好用的代码调试工具Pdb学习笔记
- LeanCloud SDK 中秒杀70%问题的调试方法
- 【Android 逆向】Android 进程注入工具开发 ( 注入代码分析 | 调试进程 ATTACH 附着目标进程 | 读取目标函数寄存器值并存档 )
- VBA调试利器debug.print
- 单步调试找到 cy.visit 的实现源代码(二) - WebSocket?
- gdb 调试 hello word char *详细指针
- 【内卷数据结构】顺序表超详细解析 | 从零开始步步解读 | 画图理解+调试分析 | 菜单制作
- 【读书笔记】《Verilog数字系统设计教程》第7章 调试用系统任务和常用编译预处理语句(附思考题答案)