【问题标题】:Angular 6 - Observable explanation in plain EnglishAngular 6 - 用简单的英语解释
【发布时间】:2018-09-24 00:39:24
【问题描述】:

我正在寻找关于什么是 RXJS 中的 Observable 的简单英文解释。

它的用途,以及任何有用的解释,无论是视频链接、教程、用例、示例还是其他任何东西。

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

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

提前致谢。

【问题讨论】:

标签: angular observable


【解决方案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() 的工作原理。需要知道的重要一点是,许多 libraries 支持 Promises,并且可以为 http 请求等异步工作负载返回 Promise。

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

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

很酷的是,thencatch 还返回承诺,因此您可以像这样链接它们:

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

这里有一个问题:承诺只能解决或拒绝一次

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

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

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

欢迎使用响应式模式

简而言之:Promise 用于异步单个请求,Observable 用于异步流数据。

看起来像这样:

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

看起来类似于承诺模式,对吧?可观察对象和承诺之间的一个主要区别。 Observables 将数据“发射”到“订阅”中,而不是使用单一使用的 .then().catch() 处理程序。

Angular 的 http 客户端库默认返回 observables,即使您可能认为 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! )

处理复杂过程的一种非常优雅的方式!反应式编程是一个相当大的话题,但this 是一个很好的工具,可以尝试和可视化所有有用的方法,你可以使用 observables 来编写很酷的东西。

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

【讨论】:

  • 哇,这是很多信息。我会在早上读这个。谢谢
  • 这是一个很大的话题,但在我看来,理解为什么和什么一样重要。祝你好运!
  • 能解释一切的人。非常感谢您花时间详细解释这一点。也感谢其他人,各种不同的解释也有很大帮助。
【解决方案2】:

为了一笑而过,这个虚构的故事仅供像我这样的傻瓜理解:

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

“我会给你回电话,忙,继续努力。”所以 CALLBACK 是凯特在给 John 打电话时总是听到的声音,一呼一呼。虽然有时对 John 来说跟踪事情并不容易。

约翰爱凯特,他升级了措辞和处理方式,说“我承诺(一定要给凯特回电话)!” THEN Kate 再次感到高兴,她建立了一个安全网来CATCH 意外响应,这是一种比 Callbacks 更好的组织方式。

凯特对约翰很满意,但她的女朋友们还在八卦,尤其是科技在进步。所以他们都告诉凯特,“你最好观察他……”约翰现在对凯特来说是可观察的,她对她的宝贝开玩笑说她订阅他,意思是约翰现在可以连续响应,不再是一次,可以多次,响应可以流式传输! Yulp,而不是每个请求一个响应,他在他的桌子上设置了一个小摄像头,让她一直保持最新状态。例如,Kate 关心他的饮食,他会报告“亲爱的,我早餐刚吃了一块芝士蛋糕和一个苹果”,......“亲爱的,我吃了一顿美味的午餐......”可爱!

结束

【讨论】:

  • 感谢您的努力:P
  • 不错的一个!容易相关!
【解决方案3】:

这就像一个事件,通过订阅你说“当这种情况发生时让我知道......”......所以假设你做了一个 http 请求,你真的不知道需要多长时间,所以 observable 只是一个你可以订阅的占位符或事件,它表示当这种情况发生时,做某事。也就是说,当这个 http 请求返回时,只要发生这种情况,就读取该值。您订阅的功能将在它回来时运行。

【讨论】:

  • 所以我订阅了一些东西,当返回该值时,它会触发我制作的特定功能?你有任何机会有一个用例吗?我是编写主要使用的 Python 的新手,但我目前正在使用 Angular6,并且没有得到很多这些术语。
  • 嗨,Des,HTTP 请求就是一个很好的例子,因为您的程序不会坐等它回来。在其他语言/框架/等中,您可能需要做一些特殊的事情才能实现这一点,例如 l 多线程/等。但不是在这里,这是预期的。所以对于您快速设置的事件来说,observable 是一个奇怪的名称,并且subscribe 基本上是一个处理程序。编辑,让我补充一点,如果您是编程新手,Angular 可能不是最好的起点。无意在 Stack Overflow 上就此展开任何讨论,但首先是基础知识,至少坚持 1 语言。
  • 谢谢丹。嗯,我是编码新手,我的工作是初级 Angular 6 开发人员。在大学里,我做了一些 AngularJS(不喜欢它)、很多 Python3 Django(喜欢它)和 Javascript(不包括箭头函数或 Angular 2+)。所以 Python 和 Javascript 是我的两个偏好,而 Javascript/Typescript 是我对可预见未来的关注。现实世界的用例将帮助我理解,但没有经验的知识将帮助我理解。当奶酪被吃掉时,执行捕鼠器功能。像这样。
  • 祝你一路顺风!
【解决方案4】:

我对 Observable 的理解就像你问 Siri(或其他东西)“明天天气如何”。 Siri 肯定会给你答案,而 Siri 中包含答案的“项目”是“可观察的”。

以下链接可能会有所帮助 - 揭秘 Rxjs Observable

https://medium.com/@AnkurRatra/demystifying-rxjs-observable-467c52309ac

【讨论】:

  • 承诺也适合您的模型。不够具体
  • 中篇文章是我读过的最好的文章之一,我也一直在与这种模式作斗争,这很有帮助。
【解决方案5】:

Observables 就像 Twitter 帐户。如果我们关注(“订阅”),那么我们会收到未来更新的通知,如果我们取消关注(“取消订阅”),那么我们将不会收到未来更新的通知。

【讨论】:

    【解决方案6】:

    Observable 是 Angular 中用于处理异步数据的功能。

    让我们详细了解它们。

    Angular 使用发布者和订阅者模式。其中,有一个 Observable 会随着时间的推移发出数据流。数据可以是 HTTP 响应,也可以是单击按钮时的事件数据。还有订阅该数据的观察者(换句话说,它观察数据源)。

    我们可以通过 3 种方式处理 observable。首先,我们可以处理 observable 发出的正常数据。其次,我们可以处理错误。第三,我们可以处理 observable 的完成。

    注意:在观察者订阅它之前,Observable 不会发布数据。如果观察者不想再观察,它可以取消订阅 observable。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-09-02
      • 2017-10-12
      • 2021-10-14
      • 2012-05-14
      • 2012-01-18
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多