Angular 6 - 用简单的英语进行可观察的解释

Question

我正在寻找关于RXJS中Observable的简单英语解释.

它可以用于什么,以及任何有用的解释视频链接,教程,用例,示例,或任何真正的.

到目前为止,我在Udemy,Todd Motto,Youtube,Angular官方网站上找到的任何内容都没有找到我,我只是想要一个基本的解释,如果可能的话.

到目前为止,我所知道的是你可以用观察者订阅它们.它只是另一种变量吗？

提前致谢.

Answer 1

让我们从承诺开始吧

在Javascript中,Promises是用于优雅处理异步代码的常见模式.如果你不知道承诺是什么,那就从那里开始吧.他们看起来像这样:

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

重要的部分:

todoService.getTodos() // returns a Promise

让我们忘记getTodos()现在的工作方式.重要的是要知道很多库都支持Promises,并且可以为http请求等异步请求返回promise.

Promise对象实现了两个主要方法,可以轻松处理异步工作的结果.这些方法是.then()和.catch().then处理"成功"结果并且catch是一个错误处理程序.当then处理程序返回数据时,这称为resolvingpromise,当它向catch处理程序抛出错误时,会调用它rejecting.

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

很酷的是,then并且catch还返回承诺,所以你可以像这样链接它们:

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

这是捕获:Promises只能解决OR拒绝ONCE

对于像http请求这样的事情,这可以正常工作,因为http请求从根本上执行一次并返回一次(成功或错误).

当您想要一种优雅的方式来传输异步数据时会发生什么？想想视频,音频,实时排行榜数据,聊天室消息.能够使用promises来设置一个处理程序,以便在流入时继续接受数据,这将是很棒的:

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

欢迎来到反应模式

简而言之:Promise是异步单个请求,Observables是异步流数据.

它看起来像这样:

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

看起来类似于承诺模式吧？可观察与承诺之间的一个主要区别.Observable持续"发送"数据到"订阅"而不是使用单一用途.then()和.catch()处理程序.

Angular的http客户端库默认返回observable,即使您可能认为http更适合单一使用承诺模式.但是关于反应式编程(比如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! )

处理复杂过程的一种非常优雅的方式!反应式编程是一个相当大话题,但这个是尝试和可视化都可以使用观测组成很酷的东西有用的方式一个很好的工具.

注意:这是未经测试的伪代码,仅用于说明目的

Answer 2

笑死我了，这个虚构的故事，只有像我这样的傻瓜才能看懂：

结婚7年，精彩的约翰仍然爱着美丽的凯特，但凯特的女朋友们都告诉她要留意现在在办公室工作时间越来越长的约翰。

“我给你回电话，忙，忙吧。” 所以CALLBACK是 Kate 在给 John打电话时总是听到的，一呼一呼。尽管有时为约翰跟踪事情并不容易。

约翰喜欢凯特，他说升级的措辞和处理“我PROMISE（做呼叫凯特回来）！” 然后凯特再次感到高兴，她建立了一个安全网来捕捉意外的响应，这是比回调更好的组织方式。

凯特对约翰很满意，但她的女朋友们还在八卦这件事，尤其是科技在进步。所以他们都告诉凯特，“你最好观察他......”约翰现在可以观察凯特，凯特开玩笑说她订阅了他，这意味着约翰现在可以连续响应，不再是一次，并且可以多次响应，响应可以流式传输！Yulp，不是每个请求一个响应，他在办公桌上安装了一个小摄像头，让她随时了解最新情况。例如，凯特关心他的饮食，他会报告“亲爱的，我早餐只吃了一块芝士蛋糕和一个苹果”，......“亲爱的，我吃了一顿美味的午餐......”可爱！

结束