Rxjs初探

筆者最近工做上接手了一個項目，一個後臺管理工程，其中用到了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)
複製代碼