RxJS - 可观察对象 (Observables)

可观察对象是一个函数，它创建一个观察者并将观察者附加到预期值来源的地方，例如DOM元素的点击、鼠标事件或HTTP请求等。

观察者是一个包含回调函数的对象，当与可观察对象交互时，它将被调用，即，例如按钮点击、HTTP请求等来源已交互。

本章我们将讨论以下主题：

创建可观察对象
订阅可观察对象
执行可观察对象

创建可观察对象

可观察对象可以使用可观察对象构造函数创建，也可以使用 `Observable.create()` 方法创建，并将订阅函数作为参数传递给它，如下所示：

testrx.js

import { Observable } from 'rxjs';

var observable = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

我们创建了一个可观察对象，并使用可观察对象内部的 `subscriber.next` 方法添加了消息“我的第一个可观察对象”。

我们也可以使用 `Observable.create()` 方法创建可观察对象，如下所示：

testrx.js

import { Observable } from 'rxjs';
var observer = Observable.create(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);

订阅可观察对象

您可以如下订阅可观察对象：

testrx.js

import { Observable } from 'rxjs';

var observer = new Observable(
   function subscribe(subscriber) {
      subscriber.next("My First Observable")
   }
);
observer.subscribe(x => console.log(x));

当观察者被订阅时，它将开始执行可观察对象。

这是我们在浏览器控制台中看到的：

执行可观察对象

可观察对象在其被订阅时执行。观察者是一个具有三个方法的对象，这些方法会收到通知：

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

complete() - 此方法不会发送任何值，并指示可观察对象已完成。

error() - 此方法将发送任何错误。

让我们创建一个包含所有三个通知的可观察对象并执行它。

testrx.js

import { Observable } from 'rxjs';
var observer = new Observable(
   function subscribe(subscriber) {
      try {
         subscriber.next("My First Observable");
         subscriber.next("Testing Observable");
         subscriber.complete();
      } catch(e){
         subscriber.error(e);
      }
   }
);
observer.subscribe(x => console.log(x), (e)=>console.log(e), 
   ()=>console.log("Observable is complete"));

在上面的代码中，我们添加了 `next`、`complete` 和 `error` 方法。

try{
   subscriber.next("My First Observable");
   subscriber.next("Testing Observable");
   subscriber.complete();
} catch(e){
   subscriber.error(e);
}

要执行 `next`、`complete` 和 `error`，我们必须调用订阅方法，如下所示：

observer.subscribe(x => console.log(x), (e)=>console.log(e), 
   ()=>console.log("Observable is complete"));

只有在发生错误时才会调用 `error` 方法。

这是在浏览器中看到的输出：

打印页面