# 什麼是 RxJS Subscriptions ?
###### 2020.06.13
###### tags: `自主學習` `翻譯` `RxJS`

---

原始文章
[What are RxJS Subscriptions?](https://levelup.gitconnected.com/what-are-rxjs-subscriptions-65f50394f190)

---

<br/>

在 RxJS 中，Subscription 是一種一次性的資源，通常是表示一個 Observable 的執行。它有 <code>unsubscribe</code> 方法，讓我們可以用來清除訂閱資源後所進行的處理。

早些版本中的 RxJS 中，Subscription 又叫做 Disposable。

<br/>

## 基本用法

下面的程式碼示範對於 Subcription 的基本用法。

import { of } from "rxjs";

const observable = of(1, 2, 3);
const subscription = observable.subscribe(val => console.log(val));
subscription.unsubscribe();

在上面的程式碼中，當我們對 Observable 呼叫它的 <code>subscribe</code> 方法時，會回傳一個 <code>subscription</code>。呼叫它的 <code>ubsubscribe</code> 方法時，會取消對於 Observable 的訂閱。

<br/>

## 合併 Subscriptions

我們可以使用 <code>add</code> 方法來合併 Subscription 物件。

import { of } from "rxjs";

const observable1 = of(1, 2, 3);
const observable2 = of(4, 5, 6);

const subscription1 = bservable1.subscribe(val => console.log(val));

const subscription2 = observable2.subscribe(val => console.log(val));

subscription1.add(subscription2);

在上面的程式中，我們呼叫 <code>subscription1</code> 的 <code>add </code> 方法，將 <code>subscription2</code> 與它結合起來。

console 的輸出結果會是

1
2
3
4
5
6

當我們將多個 Subscription 結合時，當對第一個 subscription 進行 <code>unsubscribe</code> 時，會同時取消跟它結合的其他訂閱。

例如下列的組合

import { interval } from "rxjs";

const observable1 = interval(400);
const observable2 = interval(300);

const subscription = observable1.subscribe(x => console.log(x));
const childSubscription = observable2.subscribe(x => console.log(x));

subscription.add(childSubscription);

接著對 <code>subscription</code> 進行 <code>unsubscribe</code> 時，會解除所有結合在一起的訂閱。

setTimeout(() => {
  subscription.unsubscribe();
}, 1000);

<br/>

## 取消子階層的 Subscription

我們可以藉由呼叫 Subscription 的 <code>remove</code> 方法，取消子階層的訂閱

import { interval } from "rxjs";

const observable1 = interval(400);
const observable2 = interval(300);

const subscription = observable1.subscribe(x => console.log(x));
const childSubscription = observable2.subscribe(x => console.log(x));

subscription.add(childSubscription);

(async () => {
  await new Promise(resolve => {
    setTimeout(() => {
      subscription.remove(childSubscription);
      resolve();
    }, 600);
  });
  
  await new Promise(resolve => {
    setTimeout(() => {
      subscription.unsubscribe();
      childSubscription.unsubscribe();
      resolve();
    }, 1200);
  });
})();

一旦 <code>childSubscription</code> 被移除了，它就不再是 <code>subscription</code> 的子階層。

因此，會必須對被分開的所有的訂閱都呼叫 <code>unsubscribe</code>。

<br/>

## 小結

可以對多個 subscription 使用 <code>add</code> 方法結合在一起。

結合在一起的 subscription，可以藉由解除父階層訂閱，達到同時解除子階層訂閱的效果。

可以藉由 <code>remove</code> 方法將子階層從父階層中移除。

被移除之後，各個 subscription 就必須個別取消訂閱。