rxjs——subject和Observable的區別

原創文章，轉載請注明出處

理解

observable的每個訂閱者之間，是獨立的，完整的享受observable流動下來的數據的。
subject的訂閱者之間，是共享一個留下來的數據的

舉例

這里的clock$ 被訂閱者被 observerA，observerB ，observerC 三個訂閱者在不同的時間獨自訂閱。
對於三個訂閱者，clock$ 都是從頭重新完成的跑一遍。

    let a=''
        const clock$ = Rx.Observable.interval(1000).take(3);

        const observerA = {
            next(v) {
                a+='--A執行了，'
                console.log('A next: ' + v)
                console.log(a)
            }
        }
        const observerB = {
            next(v) {
                a+='--B執行了，'
                console.log('B next: ' + v)
                console.log(a)
            }
        }

        const observerC = {
            next(v) {
                a+='--C執行了，'
                console.log('C next: ' + v)
                console.log(a)
            }
        }


        clock$.subscribe(observerA) // a Observable execution

        setTimeout(() => {
            clock$.subscribe(observerB) // another new Observable execution
        }, 7000)

        setTimeout(() => {
            clock$.subscribe(observerC) // another new Observable execution
        }, 14000)

/*
A next: 0
--A執行了，
A next: 1
--A執行了，--A執行了，
A next: 2
--A執行了，--A執行了，--A執行了，
B next: 0
--A執行了，--A執行了，--A執行了，--B執行了，
B next: 1
--A執行了，--A執行了，--A執行了，--B執行了，--B執行了，
B next: 2
--A執行了，--A執行了，--A執行了，--B執行了，--B執行了，--B執行了，
C next: 0
--A執行了，--A執行了，--A執行了，--B執行了，--B執行了，--B執行了，--C執行了，
C next: 1
--A執行了，--A執行了，--A執行了，--B執行了，--B執行了，--B執行了，--C執行了，--C執行了，
C next: 2
--A執行了，--A執行了，--A執行了，--B執行了，--B執行了，--B執行了，--C執行了，--C執行了，--C執行了，
 */

對於subject則不同
observerA，observerB ，observerC 三個訂閱者在不同的時間訂閱同一個subject。
他們三個在時間上是共享一個subject。
subject產生數據時，你這個訂閱者如果沒來得及訂閱，那對不起，過了這個村就沒這個店，你錯過了。

const { Observable, Subject } = Rx


const clock$ = Observable.interval(1000).take(3);

const observerA = {
  next(v) {
    console.log('A next: ' + v)
  }
}
const observerB = {
  next(v) {
    console.log('B next: ' + v)
  }
}
const subject = new Subject()
subject.subscribe(observerA)

clock$.subscribe(subject)

setTimeout(() => {
  subject.subscribe(observerB)
}, 2000)

/*
 * A next: 0
 * A next: 1
 * A next: 2
 * B next: 2
 */