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

出典