RxJS 可观察对象

在 RxJS 中， observable 是一个用于创建观察者并将其附加到预期值的来源的函数。例如，来自 DOM 元素或 Http 请求的点击、鼠标事件等都是 observable 的例子。

换句话说，你可以说观察者是一个带有回调函数的对象，当与 Observable 交互时会调用该回调函数。例如，源已交互，例如，单击按钮、Http 请求等。

Observables 也可以定义为多个值的惰性 Push 集合。让我们看一个简单的例子来理解如何使用 observables 来推送值。

看以下示例：

在上面的例子中，有一个 observable，它在订阅时立即同步地推送值 10、20、30，但是值 40 将在调用 subscribe 方法一秒钟后推送。

如果想调用 observable 并查看上述值，则必须订阅它。请参阅以下示例

输出

当我们执行上述程序时，我们将在控制台上看到以下结果

Observables 是函数的泛化

我们知道 observables 是充当点击、来自 DOM 元素的鼠标事件或 Http 请求等的函数，但 observables 既不像 EventEmitters，也不像 Promises，它们用于多个值。在某些情况下，observables 可能会像 EventEmitters 一样，即当它们使用 RxJS Subjects 进行多播时，但通常它们不像 EventEmitters 那样工作。

Observables 就像没有参数的函数，但将这些函数泛化以允许使用多个值。

让我们看一个例子来清楚地理解这一点。

一个简单的函数示例

输出

你将看到以下输出

"Hello World!"
123
"Hello World!"
123

让我们编写相同的示例，但使用 Observables

输出

你将看到与上面相同的输出

你可以看到这一点，因为函数和 Observables 都是惰性计算。如果你不调用该函数，则不会发生 console.log('Hello World!')。同样，对于 Observables，如果你不使用 subscribe“调用”它，则不会发生 console.log('Hello World!')。

Observable 的工作原理

Observable 有三个阶段

• 创建 Observables
• 订阅 Observables
• 执行 Observables

创建 Observables

有两种创建 observables 的方法

• 使用 Observable 构造函数方法
• 使用 Observable create() 方法

使用 Observable 构造函数方法

让我们使用 observable 构造函数方法创建一个 observable，并使用 Observable 内部可用的 subscriber.next 方法添加一条消息“This is my first Observable”。

testrx.js 文件

你也可以使用 Observable.create() 方法创建 Observable，如下所示

订阅 Observables

订阅 observable 就像调用一个函数。它提供了数据将交付到的回调函数。

你可以使用以下语法订阅 observable

语法

请参阅带有 subscribe 的上述示例

testrx.js 文件

输出

执行 Observables

当订阅 observable 时，会执行该 observable。观察者通常有三种被通知的方法

next(): 此方法用于发送值，例如数字、字符串、对象等。

complete(): 此方法不发送任何值。它表明 observable 已完成。

error(): 此方法用于通知错误（如果有）。

让我们看一个例子，在这个例子中，我们使用所有三个通知创建了 observable，并执行该示例

testrx.js 文件

仅当有错误时，才会调用错误方法。当你运行上述代码时，你将在控制台中看到以下输出。

输出