RxJS - 可观察对象

可观察对象是一个函数，它创建一个观察者并将其附加到源，源可以从中获取值，例如，点击、来自 dom 元素的鼠标事件或 Http 请求等。

观察者是一个具有回调函数的对象，当与可观察对象发生交互时，即源已与按钮点击、Http 请求等发生交互时，将调用该函数。

我们将在本章中讨论以下主题 −

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

创建可观察对象

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

testrx.js

import { Observable } from 'rxjs';

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

我们创建了一个可观察对象，并使用 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，我们必须调用 subscribe 方法，如下所示 −

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

只有出现错误时才会调用 error 方法。

这是浏览器中看到的输出 −