文章目录
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()方法之后才能完成。
调度程序
调度程序控制何时启动和通知订阅的执行。