可以从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>