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

看个例子：

const myObservable = of(1, 2, 3);// 创建一个观察者对象-Observer(处理next、error、complete回调)const myObserver = {next: x => console.log('Observer got a next value: ' + x),error: err => console.error('Observer got an error: ' + err),complete: () => console.log('Observer got a complete notification'),};// 通过Observable的subscribe函数，观察者去订阅可观察者的消息myObservable.subscribe(myObserver);

调用Observable的subscribe方法，传入一个包含回调函数的observer对象：

后两个参数都是undefined：

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

进入默认实现，新建一个Subscriber对象：

Subscriber是Subscription的子类：

我们现在的Subscriber的构造函数里，创建一个SafeSubscruber实例：this作为parent subscriber传入

EmptyObserver是从./Observer导入进来的：

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

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

执行subscribe：

sink的destination包含了应用程序传入的complete, next, error逻辑：

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

next调用私有的_next方法：

this._next调用this.destination.next:

最终调用到应用程序员传入的next方法：

最后的输出：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

rxjs里的Observable对象subscribe方法的执行原理相关推荐

通过一个最简单的例子，理解Angular rxjs里的Observable对象的pipe方法
源代码: import { of } from 'rxjs'; import { Injectable } from '@angular/core'; import { map } from 'rxj ...
rxjs里的Observable对象和map配合的一个用法
源代码: import { of } from 'rxjs'; import { Injectable } from '@angular/core'; import { map } from 'rxj ...
rxjs里的Observable对象如何消费
测试代码: import { of } from 'rxjs'; import { Injectable } from '@angular/core';@Injectable() export cla ...
rxjs里b = a.pipe(map(mapFn))的执行示意图
rxjs of操作符生成的Observable对象的执行详细分析
代码: const a = of([1, 2, 3]); a.subscribe((data) => console.log('Fairy:' + data)); 单步调试,首先执行of所在的i ...
Rxjs 里 subscribeToArray 工具函数的详细分析
subscribeToArray 函数体的逻辑:它的实质是一个函数: 该函数接收一个 array 作为输入参数,遍历这个 array,将其每个元素,作为另一个匿名函数执行的一部分.该匿名函数体内,将 ...
Selenium webdriver 新跳转页面上找对象解决方法
Selenium webdriver 新跳转页面上找对象解决方法在执行的测试的时候,需要验证跳转后新的web页面的对象,不是之前页面,用get()跳转后,在新页面找不到对象. 例如:之前是 ...
为什么Spartacus单元测试里对http返回的Observable对象调用subscribe时，会触发依赖注入的框架代码
今天我工作发现,一旦下面单元测试代码第109行,即subscribe方法单步调试进去: 会触发HTTP请求真正的执行,即请求发送给服务器: 试图获取HTTP_INTERCEPTORS这个injecti ...
如何在Chrome调试器里检查嵌套Observable对象
一个例子: 举个例子,看如下这个嵌套的Observable对象: items$: Observable<Observable<Product>[]> = this.compon ...

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

rxjs里的Observable对象subscribe方法的执行原理相关推荐

最新文章

热门文章