RxJS_Observableがデータを発行するまでの流れ　#388

RxJSにおける、非同期処理やイベントベースのプログラミングを扱うための2つの主要なコンセプトであるObservableとObserverについてです。

最近はAngularでフロントを開発させていただく機会が増えたので、勉強した内容を整理しておきます。

ObservableとObserverの関係

2つの関係を簡単に表すと以下です。

Observable：値の発行元となるデータストリーム
                 ↓
Observer：subscribeメソッドを通じて値を購読するもの

データストリームとは、時間とともに0個以上の値を発行可能な「データの源」です。ただし源にすぎないので、誰かがコップを持ってこないと水が汲めません。

その誰かがObserverであり、コップがnext, error, completeというObserverが持つ3つのメソッドです。nextが値の発行、errorがエラー通知、completeが完了通知（もうObservableが値を発行しない）です。

また、上記のsubscribeメソッドはObservableのメソッドなので注意してください（Observerのメソッドではない）。

Obeservablがデータを発行するまでの流れ

ここからがややこしいのですが、以下の流れになっています。

• Observableを生成する時にSubscriberというオブジェクトが渡されます

• Subscriberは特殊なObserverで、Observable内部で息を潜めています（後ほどObserverと連携するために待っている）

• Observableのsubscribe()を呼び出すと、Observerが渡されます

• するとObservable内部で息を潜めていたSubscriberが起動し、next, error, completeを実行し出します

• ObserverはSubscriberからのnext, error, completeを受け取り、subscribe()のコールバック関数の引数に渡します

サンプルコードです

// Observable生成時にSubscriberオブジェクトが渡されるのを、subscriberで受け取っている
// SubscriberはObserverインターフェースを実装しており、next, error, completeを扱える
const observable = new Observable(subscriber => {
  subscriber.next(1);
  subscriber.next(2);
  subscriber.next(3);
  subscriber.complete();
});

observable.subscribe(
  (next) => {
    // データの処理。仮引数の名前は任意（最初に引数に値が入る）
  },
  (error) => {
    // エラー処理。仮引数の名前は任意（第二引数にエラーが入る）
  },
  () => {
    // 完了時の処理（第三引数に呼ばれはするが、完了通知のみなので値は何も渡されてこない）
  }
);

つまりObservableは、Observerにsubscribeされて初めて値を発行できます。
そしてsubscribeのコールバック関数を使って、発行された値をどう処理するか定義することが可能です。

ここまでお読みいただきありがとうございました！！