Rxjs初探

370 阅读2分钟

笔者最近工作上接手了一个项目,一个后台管理工程,其中用到了Rxjs。新手上路,梳理一下大致的概念,不涉及太多具体API。

Observable

Observable(可被观测的东西)对象,可通过多种方法生成,它的指责是可以生产数据,并将数据以“流”的形式,发送给订阅者(Observer).

Observer

观察者,本质上也是订阅者(Subscriber),可以订阅Observable,当Observable生成数据时,观察者Observer能够接收到数据“推送”。这里的推送,本质上是在订阅时传入方法,供数据制造者调用。

Operator

Observable生成的一系列数据格式,并不一定是Observer需要的。此时可以使用调用Observable的的pipe函数,并将一系列operator函数作为pipe的参数使用,举个栗子🌰:

// 通过点击事件生成一个Observable对象,
// 每次点击一次,就产生一条数据
const observable = fromEvent(document, 'click')

// 定义一个观察者(订阅者)
const observer = data => {
  console.log(data)
}

// 第一种情况:没有经过pipe管道做数据变形的,最终的log结果是:MouseEvent
observable.subscribe(observer)

// 第二种情况,将每次的点击事件,都处理成一个特定的值,比如字符串'OK'
// 此时打印出来的结果就是"OK"了
const subscription = observable.pipe(mapTo('OK')).subscribe(observer)

另外,执行subscribe方法以后,会返回一个subscription对象,当observer不需要再继续观察流数据的时候,可以调用unsubscribe方法,解除订阅关系。

subscription.unsubscribe()
Subject

Subject是一种特殊的Observable,它可以把产生的数据发送给多个观察者,也就是这些观察者共享这些数据。同时Subject也可以充当Observer的角色。

const subject = new Subject()

// 此时的subject是Observable
subject.subscribe({
  next: value => console.log(value)
})

const observable = from([1, 2, 3]
// 此时的subject是observer
observable.subscribe(subject)