57. Observableを作る

RxJSはご存知ですか? その中で一番重要なコンセプトはObservable と Observerです。

Observableでは、valuesをObserverに渡すロジックを決める。Observerはcallbackの集合である。

コードを見るとわかりやすい。

const observer = {  next: (value) => {     console.log('we got a value', value)  },  error: (error) => {    console.log('we got an error', error)  },  complete: () => {    console.log('ok, no more values')  }}

上記は一つのObserverで、三つのcallbackにすぎない。

このObserverにObservableをサプスクライブさせよう。Observableは値(value)またはerrorを送ってくる。

const observable = new Observable((subscriber)=> {  subscriber.next(1)  subscriber.next(2)  setTimeout(() => {    subscriber.next(3)    subscriber.next(4)    subscriber.complete()  }, 100)})

上のコードはつまり、新規subscribingの場合は：

值 1を渡す
值2を渡す
100 msを待つ
值 3を渡す
值 4を渡す
値はもうない、終わる。

上記のobservableに前のobserverがsubscribeすると、next() と complete() は順序通りに呼ばれる。

const sub = observable.subscribe(subscriber)// we got a value 1// we got a value 2// we got a value 3// we got a value 4// ok, no more values

subscribe() の戻り値はSubscription、メソッドのunsubscribe()を使えば取り消しが可能に。

const sub = observable.subscribe(subscriber)setTimeout(() => {  // ok we only subscribe for 100ms  sub.unsubscribe()}, 100)

以上はObservable と Observerの基本です。いかがでしょうか？

ではここからはObservableを実装してください！

上記以外満たす必要な条件はこちら

error と completeの発火は一回のみ、その後のnext/error/complete はスキップ。
subscribe()に置いて、next/error/completeは全部optionalであるべき。もし関数が渡されたら、nextと扱うべき。
multiple subscriptionはサポートする

もっと読む

https://github.com/tc39/proposal-observable

出典