什么是 angular 中的 observable、observer 和 subscribe？

Posted 2023-02-23

【中文标题】什么是 angular 中的 observable、observer 和 subscribe？

【英文标题】：What is observable, observer and subscribe in angular?

【发布时间】：2019-01-02 08:56:26

【问题描述】：

我正在学习 Angular，我对这些可观察的、观察者和订阅感到困惑 事物。所以请解释一下。

【参考方案1】：

这是一个简单的视觉效果，可以看出区别：

如上所示... Observable 是事件或数据流。它们通常从 Angular 方法返回，例如 http.get 和 myinputBox.valueChanges。

订阅“启动”可观察流。如果没有订阅（或异步管道），流将不会开始发出值。这类似于订阅报纸或杂志……在订阅之前您不会开始获得它们。

subscribe 方法接受一个观察者。观察者有三种方法：

每次从 observable 发出项目时处理的方法。

处理发生的任何错误的方法。

当观察者完成时清理任何东西的方法。最后一个在处理 Angular 的 observable 时很少使用。

希望这会有所帮助。

（我同意......试图通过文档的树木看到森林是一个相当大的挑战。我知道他们正在努力改进它们。）

【讨论】：

很好的解释

【参考方案2】：

尝试用一个非常简单的例子来解释：-

Observable 就像其他人的 youtube 频道。 （（它会不时上传新的视频（数据），因此它是您的数据源））

您的 youtube 帐户是观察者

您的 youtube 帐户（观察者） 只能收到有关其他人的 youtube 频道 （可观察） 是否上传了新视频（有新数据）的通知 或仅在您订阅该频道

的情况下进行直播（新活动）

（Observer 订阅 Observable 以监听新数据/任何事件）

其中 observable 是数据源，subscribe 就像方法/函数，Observer 一般在你身边

【参考方案3】：

Observable 可以被认为是各种数据源（例如：(userInputs)Events、HttpRequests 等）。

在这里创建我们的自定义 observable。

    var observable = Observable.create((observer: any)=>
       observer.next("Hii")
       observer.next("how are you")
       observer.complete()
    observer.next("This will not send to observer")
);

next() 用于向观察者发出值 complete() 表示通知 observable 完成。

Observer 基本上是订阅 Observable 的人。

observable.subscribe(
    (data: any) => console.log(data), // for handling data
    (error: any) => console.log(error), // for handling error
    () => console.log('completed'); // for handling completion

);

在这里您可以了解有关 Observable 的更多信息 http://reactivex.io/documentation/observable.html

【参考方案4】：

这里有一些要点：

1) 定义：“Observable and Observer”是一种从发布者到订阅者的消息传递模式。 2) 功能流程：

Observable 已创建

观察者订阅 Observable

Observable 可以将消息传递给观察者 每次，当 observable 传递一个 not 消息时，Observer 都会收到它

3) Observable 和 Observer 的实时使用

接收来自 AJAX 的响应时 在客户端（浏览器）中执行大型任务时