HTML5テクニカルノート

RxJS入門 03: Observer

ID: FN1802006
Technique: HTML5 / JavaScript
Library: RxJS 5.5.6

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

01 Observerの中身

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


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

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つのメソッドをそれぞれ必要に応じて呼び出します。なお、error()またはcomplete()が通知されると、そのあとデータは送られません。


const observable = Rx.Observable.create((observer) => {
	try {
		observer.next(1);
		observer.next(2);
		if (Math.random() < 0.5) {
			const n = 1;
			n.notExists();
		}
		observer.complete();
	} catch(err) {
		observer.error(err);
	}
});
observable.subscribe(observer);

// コンソール出力
next value: 1
next value: 2
error: TypeError: n.notExists is not a function
// または
next value: 1
next value: 2
complete

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入門

作成者: 野中文雄
作成日: 2018年2月21日