HTML5テクニカルノート

RxJS入門 04: Subscription

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

Subscriptionは、実行中のObservableなど、捨て去ることができるリソースをもつオブジェクトです。もっとも重要なメソッドSubscription.unsubscribe()により、保持しているリソースが破棄できます。公式「Manual」の「Subscription」を下じきに、サンプルコードや解説は改めました。

01 Subscription.unsubscribe()でリソースを破棄する

Subscriptionは、捨て去ることができるリソースをもつオブジェクトです(前のバージョンではDisposableと呼ばれていました)。おもに、実行中のObservableに用いられます。もっとも重要なメソッドはSubscription.unsubscribe()です。引数なしに呼び出して、オブジェクトが保持しているリソースを解放するか、Observableの実行を取り消します。

つぎのコードは、静的メソッドObservable.interval()でObservableをつくりました。引数に渡したミリ秒の間隔で、0からはじまる連番整数が順に送られます。そして、setTimeout()メソッドで呼び出すのが、Subscription.unsubscribe()です。これで、指定時間(3秒)が経つと、オブジェクトは破棄されてコンソールへの値の出力が止まります。


const observable = Rx.Observable.interval(1000);
const subscription = observable.subscribe((x) => console.log(x));
setTimeout(() => 
	subscription.unsubscribe()
, 3000);

// コンソール出力
0
1

02 Subscription.add()でオブジェクトをまとめる

Subscription.add()メソッドを使うと、引数のSubscriptionオブジェクトを子に加えられます。この場合、親オブジェクトに対してSubscription.unsubscribe()メソッドを呼び出すと、子のオブジェクトも破棄されます。


const observable = Rx.Observable.interval(1000);
const observableChild = Rx.Observable.interval(750);
const observableGrandChild = Rx.Observable.interval(500);
const subscription = observable.subscribe((x) => console.log('parent: ' + x));
const subscriptionChild = observableChild.subscribe((y) => console.log('child: ' + y));
const subscriptionGrandChild = observableGrandChild.subscribe((z) => console.log('grand child: ' + z));
subscription.add(subscriptionChild);
subscriptionChild.add(subscriptionGrandChild);
setTimeout(() => {
	console.log('unsubscribe grand child');
	subscriptionGrandChild.unsubscribe();  // 親は破棄されない
	setTimeout(() => {
		console.log('unsubscribe parent');
		subscription.unsubscribe();  // 子は破棄される
	}, 3000)
}, 1000);

// コンソール出力
grand child: 0
child: 0
parent: 0
unsubscribe grand child
child: 1
parent: 1
child: 2
parent: 2
child: 3
child: 4
unsubscribe parent

なお、子に加えたSubscriptionオブジェクトは、Subscription.remove()メソッドで除くことができます。

RxJS入門

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