📌  相关文章
📜  RxJS-Observables

📅  最后修改于: 2020-10-20 05:34:46             🧑  作者: Mango

可观察到的是，创建一个观察者，并将其附加到从预期值的源，例如，点击，从DOM元素或HTTP请求的鼠标事件等的函数

Observer是具有回调函数的对象，当与Observable发生交互时即会被调用，即，源已经交互了示例按钮单击，Http请求等。

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

  • 创建可观察的
  • 订阅可观察
  • 执行可观察

创建可观察的

可以使用observable构造函数以及observable create方法并通过将subscription函数作为参数传递给observ来创建observable，如下所示-

testrx.js

import { Observable } from 'rxjs';

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

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

我们还可以使用Observable.create（）方法创建Observable，如下所示-

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));

订阅观察者后，它将开始执行Observable。

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

订阅可观察

执行可观察

观察对象在订阅时被执行。观察者是具有三种方法的对象，这些方法会被通知，

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"));

在上面的代码中，我们添加了下一个complete和error方法。

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

要执行下一步，完成和错误，我们必须调用如下所示的subscribe方法：

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

仅当出现错误时，才会调用error方法。

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

执行可观察