57. Observableを作る

JavaScript
お役に立つのか?

少し工夫が必要  - accepted / - tried

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

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. 1を渡す
  2. 2を渡す
  3. 100 msを待つ
  4. 3を渡す
  5. 4を渡す
  6. 値はもうない、終わる。

上記の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を実装してください!

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

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

もっと読む

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

15分間以内で解いてみて

ディスカス(30)