学习一个库最好的方法就是看其源码，理解其 api 的调用原理，用起来自然也就很清楚自己到底在干什么了，秉持着此观念，为了更好地理解 rxjs，抽空将其源码看了一遍

本系列文章不会刻意涉及概念性的东西，主线就是解读源码，并在恰当的时候给出一些小例子，源码基于 rxjs v7.4.0 版本

从 new Observable 开始

import { Observable } from 'rxjs'

const observable = new Observable(subscriber => {subscriber.next(1)subscriber.next(2)subscriber.complete()

})

observable.subscribe({next: data => console.log('next data:', data),complete: () => {console.log('complete')}

})

输出如下：

// 开始输出

next data: 1

next data: 2

complete

// 结束输出

通过 new Observable() 方法创建了一个可观察对象 observable，然后通过 subscribe 方法订阅这个observable，订阅的时候会执行在 new Observable时候传入的函数参数，那么就来看下 new Observable到底做了什么

// /src/internal/Observable.ts

export class Observable implements Subscribable {// ...constructor(subscribe?: (this: Observable, subscriber: Subscriber) => TeardownLogic) {if (subscribe) {this._subscribe = subscribe;}}// ...

}

Observable的初始化方法很简单，就是将回调函数绑定到实例的 _subscribe属性上

subscribe

Observable 实现 (implements) 了 Subscribable（订阅）接口

// /src/internal/types.ts

export interface Subscribable {subscribe(observer: Partial>): Unsubscribable;

}

这个 subscribe正是下一步要用于订阅的方法，在当前版本中 subscribe的方法签名有三个，三个只是传参形式不同，最终都会处理成相同的对象，着重看第一个

subscribe(observer?: Partial>): Subscription;

对于第一个签名，接收的参数与Observer接口相关，这个接口有三个方法属性

export interface Observer {next: (value: T) => void;error: (err: any) => void;complete: () => void;

}

subscribe可以是一个对象，这个对象包含三个方法属性 next、error、complete，当你不关心 error 和 complete 这两个属性的时候，那么可以按照第二个函数签名直接传入一个方法，这个方法就默认代表 next 方法属性

进入 subscribe方法

subscribe(observerOrNext?: Partial> | ((value: T) => void) | null,error?: ((error: any) => void) | null,complete?: (() => void) | null

): Subscription {const subscriber = isSubscriber(observerOrNext) ? observerOrNext : new SafeSubscriber(observerOrNext, error, complete);errorContext(() => {// ...});return subscriber;

}

subscribe的第一个参数可以是一个 subscriber（具有 next、error、complete三个属性，所以类型合法），不过这种传参形式一般都是库内部使用，我们正常写法还是传入一个纯粹的对象或者方法，那么就意味着会执行 new SafeSubscriber(observerOrNext, error, complete)

// node_modules/rxjs/src/internal/Subscriber.ts

export class SafeSubscriber extends Subscriber {// ...

}

精彩文章

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：