JS基礎ーRxJSのObservable

初めに

今回はRxJSライブラリーのObservableについて整理してみます。

先ずは公式サイトの例

var observable = Rx.Observable.create(function (observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  setTimeout(() => {
    observer.next(4);
    observer.complete();
  }, 1000);
});

console.log('just before subscribe');
observable.subscribe({
  next: x => console.log('got value ' + x),
  error: err => console.error('something wrong occurred: ' + err),
  complete: () => console.log('done'),
});
console.log('just after subscribe');

実行すると：

just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done

Observableとは

Observableは関数である

var observable = Rx.Observable.create(function(observer){}

上記のように、Observable関数を作成できる

subscribe

どうやってsubscribe？
答えはObservableのsubscribe()関数
下記のようにsubscribe()でObservableを観察できる(観察者はobserver)

observable.subscribe(observer);

var observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

※subscribe()するとobservableの関数構文がすぐに実行するされる

多重subscribe

observable.subscribe(observer2);

まとめ

Observable：観察された側
Observer：観察側
Subscribe：観察関係の構築

参考

RxJS公式サイト