Angular 6 - 通俗易懂的解释

Question

我正在寻找关于 RXJS 中 Observable 的通俗易懂的解释。

它的用途，以及任何有用的解释，视频链接、教程、用例、示例或任何其他内容。

到目前为止，我在 Udemy、Todd Motto、Youtube、Angular 官方网站上没有发现任何与我相关的内容，如果可能的话，我只想对上述内容进行基本解释。

到目前为止，我所知道的是您可以通过观察者订阅它们。它只是另一种变量吗？

提前致谢。

Answer 1

让我们从 promise 开始

在 Javascript 中，Promises 是一种用于优雅地处理异步代码的常用模式。如果您不知道什么是 promise ，请从这里开始。它们看起来像这样:

todoService.getTodos() // this could be any async workload
.then(todos => {
  // got returned todos
})
.catch(err => {
  // error happened
})

重要部分:

todoService.getTodos() // returns a Promise

让我们暂时忘记 getTodos() 是如何工作的。重要的是要知道很多 libraries支持 Promises 并可以为异步工作负载(如 http 请求)返回 promises。

一个 Promise 对象 implements两种主要方法可以轻松处理异步工作的结果。这些方法是 .then() 和 .catch()。 then 处理“成功”的结果，catch 是错误处理程序。当 then 处理程序返回数据时，这称为 resolving promise ，当它向 catch 处理程序抛出错误时，这称为 拒绝。

.then(todos => { // promise resolved with successful results })
.catch(err => { // promise rejected with an error }) 

很酷的是，then 和 catch 也返回 promise，因此您可以像这样链接它们:

.then(todos => {
  return todos[0]; // get first todo
})
.then(firstTodo => {
  // got first todo!
})

关键是:Promise 只能解决或拒绝一次

这对于像 http 请求这样的事情是可行的，因为 http 请求基本上执行一次并返回一次(成功或错误)。

当您想要一种优雅的方式来流 异步数据时会发生什么？想想视频、音频、实时排行榜数据、聊天室消息。如果能够使用 promises 来设置一个在数据流入时不断接受数据的处理程序，那就太好了:

// impossible because promises only fire once!
videoService.streamVideo()
.then(videoChunk => { // new streaming chunk })

欢迎使用响应式模式

简而言之:Promises 用于异步单个请求，Observables 用于异步流数据。

看起来像这样:

videoService.getVideoStream() // returns observable, not promise
.subscribe(chunk => {  // subscribe to an observable
   // new chunk
}, err => {
  // error thrown
});

看起来很像 promise 模式吧？ observables 和 promises 之间的一个主要区别。 Observables 将数据“发射”到“订阅”中，而不是使用一次性的 .then() 和 .catch() 处理程序。

Angular 的 http 客户端库默认返回可观察对象，即使您可能认为 http 更适合单次使用 promise 模式。但响应式(Reactive)编程(如 rxJS)的酷炫之处在于，您可以从其他事物(如点击事件或任意事件流)中创建可观察对象。然后，您可以将这些流组合在一起来做一些非常酷的事情。

例如，如果您想在每次点击刷新按钮时以及每 60 秒刷新一些数据，您可以这样设置:

const refreshObservable = someService.refreshButtonClicked(); // observable for every time the refresh button gets clicked
const timerObservable = someService.secondsTimer(60); // observable to fire every 60 seconds

merge(
  refreshObservable,
  timerObservable
)
.pipe(
  refreshData()
)
.subscribe(data => // will keep firing with updated data! )

处理复杂过程的一种非常优雅的方式!响应式编程是一个很大的话题，但是 this是一个非常好的工具，可以尝试和可视化您可以使用可观察对象来编写很酷的东西的所有有用方法。

注意:这是未经测试的伪代码，仅为说明目的而编写