HTML5テクニカルノート

RxJS 6入門 04: Subscription

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

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

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

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

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


const {Observable, interval} = rxjs;
const observable = interval(700);
const subscription = observable.subscribe((x) => console.log(x));
setTimeout(() => 
	subscription.unsubscribe()
, 1500);

// コンソール出力
0
1

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

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


const {Observable, interval} = rxjs;
const observable = interval(900);
const observableChild = interval(700);
const observableGrandChild = interval(400);
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();  // 子は破棄される
	}, 1500)
}, 1000);

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

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

RxJS 6入門

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