RxJS小记

Observable

Observable是创建观察者并将其附加到源目标的函数。
Observable是具有回调函数的对象，当与Observable发生交互时即会被调用。

创建可观察对象

可以使用Observable构造函数和Observable create方法并通过将subscription函数作为参数传递给Observable来创建Observable。

• 构造函数的方式

import { Observable } from 'rxjs';

var observable = new Observable(
   function subscribe(subscriber) {
      subscriber.next("我的第一个可观察对象")
   }
);

• create方法

import { Observable } from 'rxjs';

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

订阅可观察对象

可以按照以下方式订阅可观察对象。

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() -此方法将发送错误（如果有）。

运算符

运算符是RxJS的重要组成部分。运算符是一个纯函数，它以可观察对象作为输入，而输出也是可观察对象。

运算符使用

要和运算符一起使用，我们需要一个pipe()方法。

import { of } from 'rxjs';
import { map, reduce, filter } from 'rxjs/operators';

let test1 = of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

let case1 = test1.pipe(
   filter(x => x % 2 === 0),
   reduce((acc, one) => acc + one, 0)
)

case1.subscribe(x => console.log(x)); // 30

在上面的示例中，我们使用 of 方法创建了一个可观察对象。使用了filter运算符，该函数对偶数进行过滤，接下来，我们使用了reduce()运算符，该运算符将对偶数求和，并在订阅时给出结果。

运算符种类

种类很多，列举几个如下。

• 创建可观察对象的运算符
  有：ajax，from，fromEvent，of 等等
• 数学运算符
  有：count，max，min，reduce 等等
• 联结运算符
  有：concat，forkJoin，merge，race等等

Subjects

Subjects是可以多播（即与许多观察者交谈）的可观察对象。比如带有事件监听器的按钮，每次用户单击按钮时，都会执行监听事件的回调方法的功能，这和主题的功能是类似的。主题相当于一个事件中心。

创建一个主题

要处理主题，我们需要导入主题，您可以如下创建主题对象：

import { Subject } from 'rxjs';

const subject_test = new Subject();

该对象是具有三种方法的观察者（obsever)：

• next(v)
• error(e)
• complete()

订阅主题

可以在主题上创建多个订阅，如下所示：

subject_test.subscribe({
   next: (v) => console.log(`From Subject : ${v}`)
});

subject_test.subscribe({
   next: (v) => console.log(`From Subject: ${v}`)
});

数据传递给主题

可以使用next()方法将数据传递给创建的主题。同事数据会传递到在主题上添加的所有订阅。

subject_test.next("A");

完整实例：

import { Subject } from 'rxjs';

const subject_test = new Subject();

/* a.js */
subject_test.subscribe({
   next: (v) => console.log(`From Subject : ${v}`)
});

/* b.js */
subject_test.subscribe({
   next: (v) => console.log(`From Subject: ${v}`)
});

subject_test.next("A");
subject_test.next("B");

通过调用新的Subject()创建subject_test对象。 subject_test对象引用了next()，error()和complete()方法。上面示例的输出如下所示。

Observable和Subjects的关系

可观察者对象可与订阅者一对一通信。只要您订阅可观察对象，执行将从头开始。

行为主题

行为主题将在调用时为您提供最新值，包括初始值。

重播主题

重播主题类似于行为主题，但是，它可以缓冲值并将其重播给新的订阅者。

异步主题

在AsyncSubject的情况下，最后一个调用的值将传递给订阅者，并且只有在调用complete()方法之后才能完成。

调度程序

调度程序控制何时启动和通知订阅的执行。