可以從rxjs中觀察到

Question

根據這個主題： Promises和Observables有什么區別？

據許多用戶說，Observable就像一個流。 我真的很難理解，例如這個特定端點如何：

https://jsonplaceholder.typicode.com/posts

可以隨時間返回許多值。 由於它是http請求，因此無論是成功還是失敗，都會返回單個resposne。

Answer 1

你是對的，http請求在與observable一起使用時仍然只會返回一個事件。 因此，如果您正在執行的唯一異步操作是單個http請求，那么使用可觀察的承諾就沒有任何好處。

當您開始將多個可觀察流組合在一起時，RxJS和observable的功能就出現了。 這可以通過mergeMap，switchMap，forkJoin，combineLatest等運算符完成。當你開始這樣做時，你可以通過將http請求作為可觀察對象獲得很多好處。

以輪詢為例，創建一個每10秒觸發一次的事件流，然后使用http請求輪詢服務器，這是一個使用observable進行http請求的用例。

Answer 2

當我們想要隨時間管理和/或組合多個事件時，Observable非常有用。

讓我們假設我們有一個方法將返回該JSON的承諾：

const dataPromise = fetchData('https://jsonplaceholder.typicode.com/posts');

另外，假設我們正在跟蹤當前頁面上的用戶狀態：

const userLeavePromise = trackUserPresence();

現在讓我們繪制數據提取和用戶離開事件的時間表。 這里o代表事件，及時發生：

            1s  2s  3s  4s  5s
data        ------------o
userLeave   --------o

例如，數據將在第4秒獲取，而我們不安分的用戶將在第3頁離開頁面。 在這種情況下，我們要取消讀取操作和所有的后處理的回調（在承諾方面，所有的.then -ned功能）。

對於這種（以及更多）情況，RxJS提供了許多運算符，讓我們可以隨時間組合事件。

在這種特殊情況下，我們將獲取數據， 直到用戶離開頁面：

// Observable for data
const data$ = fetchData('https://jsonplaceholder.typicode.com/posts');

// Observable for user leave
const userLeave$ = trackUserPresence();

data$
  .takeUntil(userLeave$)
  .subscribe(data => console.log(data))

Answer 3

通過promise和observable比較http請求沒有太大的不同，因為一旦請求完成，observable就會完成，因此它不是一個長期可觀察的。 但是每次單擊按鈕時都會發出以下一個。

 const { fromEvent } = rxjs; fromEvent(document.getElementById('clickMe'), 'click').subscribe(() => { console.log('clicked button'); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.4.0/rxjs.umd.min.js"></script> <button id="clickMe">Click me</button>