[譯] 理解 RxJS 中 Subjects

原文鏈接: https://netbasal.com/understanding-subjects-in-rxjs-55102a190f3

本文為 RxJS 中文社區 翻譯文章，如需轉載，請註明出處，謝謝合作！

如果你也想和我們一起，翻譯更多優質的 RxJS 文章以奉獻給大家，請點擊【這裡】。

在開始閱讀前，本文需要一些 Rx 中的基礎知識。

比如說你有兩個 Observables 訂閱:

const interval$ = Rx.Observable.interval(1000);nninterval$.subscribe(console.log);nnsetTimeout(() => {n interval$.subscribe(console.log);n}, 2000);n

每次使用新的觀察者 ( observer ) 調用 `subscribe` 方法時，你都在創建新的執行。你可以把它想像成一個執行兩次的普通函數。例如:

function interval() {n setInterval(() => console.log(..), 1000);n}nninterval();nnsetTimeout(() => {n interval();n}, 2000);n

我們創建了定時器，它們是彼此獨立的。但如果你需要兩個觀察者獲得同樣的事件呢？

這時候你就需要使用 Rx 中 的 Subject 。

什麼是 Subjects ？

Subject 既是 Observable ，又是 Observer 。

1. Observer - 擁有 next、error 和 complete 方法。
2. Observable - 擁有 Observable 的所有操作符，並且你可以訂閱它。

Subject 可以在源 Observable 和多個觀察者之間充當橋樑或代理，使得多個觀察者可以共享同一個 Observable 執行。

我們在第一個示例中來看下如何共享同一個執行:

const interval$ = Rx.Observable.interval(1000);nconst subject = new Rx.Subject();ninterval$.subscribe(subject);n

首先，我們創建了一個新的 Subject 。現在請記住， Subject 還是一個觀察者，那麼觀察者可以做什麼呢？它們可以使用 next()、error() 和 completed() 方法來監聽 Observables 。如果你將 subject 列印到控制台，你可以看到 subject 擁有如下這些方法。

所以在我們這個案例中，Subject 正在觀察 interval observable 。簡單點說，當你有新值的時候要讓我知道。

現在讓我們繼續下一部分。

subject.subscribe(val => console.log(`First observer ${val}`));nnsetTimeout(() => {n subject.subscribe(val => console.log(`Second observer ${val}`))n}, 2000);n

Subject 同時還是 Observable ，我們可以使用 Observables 做什麼呢？我們可以訂閱它們。

在這個案例中，我們訂閱了 Subject 。但 Subject 會給我們什麼值呢？

如果你還記得 Subject 正在觀察 interval Observables ，所以每次 interval 發送值給 Subject ，Subject 都會將值發送給它的所有觀察者。

所以 Subject 充當代理和橋樑的作用，正因為如此，才只有一個執行。

哦，我從 interval Observable 那得到一個新值，然後我將這個值傳遞給我的所有觀察者 (監聽者)

別忘了每個 Subject 同時還是一個觀察者，所以我們可以使用觀察者的方法: next()、error()、complete() 。我們來看個示例:

const input = document.querySelector(input[type=text]);nconst p = document.querySelector(p);nninput.addEventListener(input, event => {n subject.next(event.target.value);n});nnsubject.subscribe(val => {n p.textContent = val;n});n

我們可以訂閱 Subject ，並且我們還可以手動觸發 next() 方法。當你調用 next() 方法時，每個訂閱者都會收到值。(你還可以觸發 error() 和 complete())

我們已經學習了 Rx 中最簡單的 Subject 。還有更多類型的 Subjects，它們可以解決更複雜的情況。它們是 BehaviorSubject、AsyncSubject、ReplaySubject 。

最常用的是 BehaviorSubject ，你可以在我的最新文章中更多的了解它。

就這些了!