rxjs里的Observable对象subscribe方法的执行原理

简介: rxjs里的Observable对象subscribe方法的执行原理

看个例子:

image.png调用Observable的subscribe方法,传入一个包含回调函数的observer对象:

image.png后两个参数都是undefined:

image.png在toSubscriber函数里,因为nextOrObserver是我手动传入的对象,所以前两个IF条件均不满足:

image.png进入默认实现,新建一个Subscriber对象:

image.pngSubscriber是Subscription的子类:

image.png我们现在的Subscriber的构造函数里,创建一个SafeSubscruber实例:this作为parent subscriber传入

image.pngEmptyObserver是从./Observer导入进来的:

image.png从SafeSubscriber的实现能看出,传入的Observer对象的next,error和complete这些函数名称都是硬编码的,必须符合这个命名规范:

image.pngimage.pngObject.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。

image.png执行subscribe:

image.pngsink的destination包含了应用程序传入的complete, next, error逻辑:

image.png这里能看到,subscribe的逻辑就是,遍历所有Observable参数,依次调用observer的next方法,最后再调用一次complete方法:

image.pngnext调用私有的_next方法:

image.pngthis._next调用this.destination.next:

image.pngimage.png最终调用到应用程序员传入的next方法:

image.png最后的输出:

image.png

相关文章
|
6月前
|
设计模式 JavaScript 前端开发
Rxjs observable 的 subscribeToArray 方法的模拟实现
Rxjs observable 的 subscribeToArray 方法的模拟实现
|
缓存 数据处理 数据格式
Rxjs 里 Observable 对象的 tap 操作
Rxjs 里 Observable 对象的 tap 操作
什么是 Rxjs Observable subscribe 方法的副作用
什么是 Rxjs Observable subscribe 方法的副作用
|
数据处理 对象存储
关于 Observable 对象调用 subscribe 方法时不传递任何参数值的用法讨论
关于 Observable 对象调用 subscribe 方法时不传递任何参数值的用法讨论
|
JavaScript
rxjs Observable filter Operator 的实现原理介绍
rxjs Observable filter Operator 的实现原理介绍
|
JavaScript 前端开发 算法
RxJS系列06:测试 Observable
RxJS系列06:测试 Observable
102 0
|
前端开发 JavaScript API
Rxjs源码解析(一)Observable
学习一个库最好的方法就是看其源码,理解其 api 的调用原理,用起来自然也就很清楚自己到底在干什么了,秉持着此观念,为了更好地理解 rxjs,抽空将其源码看了一遍 本文章不会刻意涉及概念性的东西,主线就是解读源码,并在恰当的时候给出一些小例子,源码基于 rxjs v7.4.0 版本
329 0
|
程序员
rxjs里的Observable对象subscribe方法的执行原理
rxjs里的Observable对象subscribe方法的执行原理
317 0
rxjs里的Observable对象subscribe方法的执行原理
rxjs里Observable.subscribe(subscriber)的执行示意图
rxjs里Observable.subscribe(subscriber)的执行示意图
109 0
rxjs里Observable.subscribe(subscriber)的执行示意图
rxjs里的Observable对象如何消费
rxjs里的Observable对象如何消费
135 0
rxjs里的Observable对象如何消费