HTML5テクニカルノート

RxJS 6入門 03: Observer

ID: FN1806001
Technique: HTML5 / JavaScript
Library: RxJS 6.2.0

Observerは、Observableが送る値を使うオブジェクトです。コールバックをまとめて、Observableからの通知を受け取ります。RxJS 5公式「Manual」の「Observer」を下じきに、バージョン6に改め、コード例や解説も書き替えました。

01 Observerの中身

Observerは、Observableが送る値を受け取ります。オブジェクトが備えるのは、next()とerror()およびcomplete()の3つのコールバックです。Observableがこれらを通知します。Observerは、つぎのようなTypeScriptのインタフェースです(図001)。


interface Observer<T> {
	closed?: boolean;
	next: (value: T) => void;
	error: (err: any) => void;
	complete: () => void;
}

図001■公式REFERENCE「Observer」のページ

02 Observerの例

Observerには、next()とerror()およびcomplete()の3つのコールバックをメソッドとして与えます。つぎのコードは、3つのメソッドを定めたObserverオブジェクトの例です。


const observer = {
	next(x) {console.log('next value: ' + x)},
	error(err) {console.error('error: ' + err)},
	complete() {console.log('complete')}
};

ObserverインスタンスはObservableを実行(サブスクライブ)するときに渡されます。実行に用いるメソッドはObservable.subscribe()です。Observerは、Observableに与えられたコールバック(Observable.create()の引数)が引数として受け取り、Observerの3つのメソッドをそれぞれ必要に応じて呼び出します。なお、complete()またはerror()が通知されると、そのあとデータは送られません。


const {Observable} = rxjs;
const observable = Observable.create((observer) => {
	try {
		observer.next(1);
		observer.next(2);
		if (Math.random() < 0.5) {  // 50%の確率でエラー
			const n = 1;
			n.notExists();
		}
		observer.complete();
	} catch(err) {
		observer.error(err);
	}
});
observable.subscribe(observer);

// コンソール出力
next value: 1
next value: 2
complete  // 正しく終了
// または
next value: 1
next value: 2
error: TypeError: n.notExists is not a function  // エラー

Observerのコールバックは、3つ揃わなくても構いません。メソッドのあるなしにかかわらず、Observableの実行はできて、通知も送られます。けれども、Observerにそのコールバックがなければ何も起こらないというだけです。


const observer = {
	next(x) {console.log('next value: ' + x)},
	complete() {console.log('complete')}
};

コールバックのメソッドがnext()ひとつのときは、Observerオブジェクトはつくらずに、Observable.subscribe()メソッドの引数に関数をじかに渡すこともできます。Observerオブジェクトは内部的につくられてObservableに渡され、引数の関数はnext()のコールバックとして加えられるのです。


observable.subscribe((x) => console.log('next value: ' + x));

さらに、Observable.subscribe()メソッドの第2および第3引数に関数を与えると、それぞれerror()とcomplete()のコールバックとみなされます。またたとえば、error()はとばして、complete()にコールバックを加えたいときは、第2引数はundefinedにすればよいのです。


observable.subscribe(
	(x) => console.log('next value: ' + x),
	undefined,
	() => console.log('complete')
);

RxJS 6入門

作成者: 野中文雄
作成日: 2018年6月1日