サブスクリプション は、通常は Observable の実行を表す、操作可能なリソースを示すオブジェクトです。
サブスクリプションには、リソースを解放したり Observable の実行をキャンセルしたりするための重要な unsubscribe メソッドがあります。
import { interval } from 'rxjs';
const observable = interval(1000);
const subscription = observable.subscribe((x) => console.log(x));
subscription.unsubscribe();
サブスクリプションは本質的に
unsubscribe()関数しか持たず、リソースを解放したり Observable の実行をキャンセルしたりします。
また、複数のサブスクリプションを一緒にすることで、1 つのサブスクリプションの unsubscribe() を呼び出すことで複数のサブスクリプションをキャンセルすることもできます。これは、1 つのサブスクリプションを別のサブスクリプションに「追加」することで実現できます：
import { interval } from 'rxjs';
const observable1 = interval(300);
const observable2 = interval(400);
const subscription = observable1.subscribe((x) => console.log('first: ' + x));
const childSubscription = observable2.subscribe((x) => console.log('second: ' + x));
subscription.add(childSubscription);
setTimeout(() => {
subscription.unsubscribe();
}, 1000);
// ログ:
// first: 0
// second: 0
// first: 1
// second: 1
// first: 2
サブスクリプションには、追加された子サブスクリプションを取り消すための remove(otherSubscription) メソッドもあります。
import { interval } from 'rxjs';
const observable1 = interval(300);
const observable2 = interval(400);
const subscription = observable1.subscribe((x) => console.log('first: ' + x));
const childSubscription = observable2.subscribe((x) => console.log('second: ' + x));
subscription.add(childSubscription);
subscription.remove(childSubscription);
setTimeout(() => {
subscription.unsubscribe();
}, 1000);
// ログ:
// first: 0
// second: 0
// first: 1
// second: 1
// first: 2
// second: 2
// second: 3
// second: 4
// ...
remove の後でも、childSubscription は新しい値を受け取ることができることがわかります。