banner
Tomorrow

Tomorrow

不骄不躁
twitter

RxJS —— 訂閱 Subscription

訂閱 表示可支配資源的物件,通常是 Observable 的執行。

訂閱有一個重要的方法 unsubscribe,它不帶任何參數,只是處理訂閱持有的資源。

import { interval } from 'rxjs';

const observable = interval(1000);
const subscription = observable.subscribe((x) => console.log(x));

subscription.unsubscribe();

訂閱本質上只有一個 unsubscribe() 函數來釋放資源或取消 Observable 的執行。

也可以將訂閱放在一起,以便調用一個訂閱的 unsubscribe() 可以取消訂閱多個訂閱。通過將一個訂閱「添加」到另一個訂閱上來做到這一點:

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);

// Logs:
// 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);

// Logs:
// first: 0
// second: 0
// first: 1
// second: 1
// first: 2
// second: 2
// second: 3
// second: 4
// ...

可以看到在 remove 之後,childSubscription 能繼續接收到新的值。

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。