- RxJS官方教程(一) 概览
- RxJS官方教程(二) Observable
- RxJS官方教程(三) Observable剖析
- RxJS官方教程(四) Observer和Subscription
- RxJS官方教程(五) Subject
- RxJS官方教程(六) 算子
Observable 可观察对象
Observable是多个值的惰性Push集合。
单 | 多 | |
---|---|---|
拉 | Function |
Iterator |
推 | Promise |
Observable |
例 以下是一个可观察对象,当被订阅时,会立即推送1
,2
,3
,并且4
在一秒之后推送,然后完成:
var observable = Rx.Observable.create(function (observer) {
observer.next(1);
observer.next(2);
observer.next(3);
setTimeout(() => {
observer.next(4);
observer.complete();
}, 1000);
});
要调用Observable并查看这些值,我们需要订阅它:
var observable = Rx.Observable.create(function (observer) {
observer.next(1);
observer.next(2);
observer.next(3);
setTimeout(() => {
observer.next(4);
observer.complete();
}, 1000);
});
console.log('just before subscribe');
observable.subscribe({
next: x => console.log('got value ' + x),
error: err => console.error('something wrong occurred: ' + err),
complete: () => console.log('done'),
});
console.log('just after subscribe');
这在控制台上执行如下:
just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done
Pull & Push 拉与推
Pull和Push是两种不同的协议,描述了数据生产者如何与数据消费者进行通信。
什么是Pull?在Pull系统中,消费者会确定何时从数据生产者接收数据。生产者本身并不知道何时将数据传递给消费者。
每个JavaScript函数都是一个Pull系统。该函数是数据的生产者,调用该函数的代码通过从其调用中“拉出” 单个返回值来消耗它。
另一种类型的Pull系统是ES2015引入的生成器函数和迭代器(function*
)。调用的代码iterator.next()
是Consumer,从迭代器(Producer)“拉出” 多个值。
制片人 | 消费者 | |
---|---|---|
拉 | 被动:在请求时生成数据。 | 活动:决定何时请求数据。 |
推 | 活动:按照自己的节奏生成数据。 | 被动:对收到的数据做出反应。 |
什么是推?在Push系统中,生产者确定何时向消费者发送数据。消费者不知道何时会收到该数据。
Promise是当今JavaScript中最常见的Push系统类型。Promise(生产者)为已注册的回调(消费者)提供已解决的值,但与功能不同,Promise负责确定何时将该值“推送”到回调。
RxJS引入了Observable,一种新的JavaScript推送系统。Observable是多个值的生产者,将它们“推送”给Observer(消费者)。
- Function 惰性计算,同步返回单个值。
- generator 惰性计算,按迭代计算,同步返回零至(潜在地)无穷多的值。
- **Promise **可能(也可能不会)返回一个值。
- Observable 惰性计算,并可以同步或异步返回零至(潜在的)无穷多的值。
Observable概括
与流行的说法相反,Observables不像EventEmitters,也不像Promises的多值。当使用RxJS Subjects进行多播时,Observable 行为有点像EventEmitters,其他情况下和EventEmitters表现不一样。
Observable类似于零参数的函数,但是将它们概括为允许多个值。
考虑以下:
function foo(){
console.log('hello');
return 42;
}
var x = foo.call(); // same as foo()
console.log(x);
var y = foo.call(); // same as foo()
console.log(y);
我们希望看到输出:
"Hello"
42
"Hello"
42
您可以使用Observables编写相同的行为:
var foo = Rx.Observable.create(function (observer) {
console.log('Hello');
observer.next(42);
});
foo.subscribe(function (x) {
console.log(x);
});
foo.subscribe(function (y) {
console.log(y);
});
输出是一样的:
"Hello"
42
"Hello"
42
发生这种情况是因为函数和Observable都是惰性计算。如果你不调用该函数,console.log('Hello')
则不会发生。对于Observables,如果你没有“调用”它(with subscribe
),那么console.log('Hello')
就不会发生。另外,“调用”或“订阅”是一个独立的操作:两个函数调用触发两个单独的副作用,两个Observable订阅触发两个单独的副作用。与无论订阅者是否存在共享副作用并且急切执行的EventEmitters相反,Observables没有共享执行并且是懒惰的。
订阅Observable类似于调用函数。
有些人声称Observables是异步的。事实并非如此。如果您使用日志包围函数调用,如下所示:
console.log('before');
console.log(foo.call());
console.log('after');
你会看到输出:
"before"
"Hello"
42
"after"
这与Observables的行为相同:
console.log('before');
foo.subscribe(function (x) {
console.log(x);
});
console.log('after');
输出是:
"before"
"Hello"
42
"after"
这证明订阅foo
是完全同步的,就像一个函数。
Observable能够同步或异步传递值。
Observable和函数之间有什么区别?Observable可以随时间“返回”多个值,而函数则不能。你不能这样做:
function foo() {
console.log('Hello');
return 42;
return 100; // dead code. will never happen
}
函数只能返回一个值。但是,Observable可以这样做:
var foo = Rx.Observable.create(function (observer) {
console.log('Hello');
observer.next(42);
observer.next(100); // "return" another value
observer.next(200); // "return" yet another
});
console.log('before');
foo.subscribe(function (x) {
console.log(x);
});
console.log('after');
使用同步输出:
"before"
"Hello"
42
100
200
"after"
但您也可以异步“返回”值:
var foo = Rx.Observable.create(function (observer) {
console.log('Hello');
observer.next(42);
observer.next(100);
observer.next(200);
setTimeout(() => {
observer.next(300); // happens asynchronously
}, 1000);
});
console.log('before');
foo.subscribe(function (x) {
console.log(x);
});
console.log('after');
输出:
"before"
"Hello"
42
100
200
"after"
300
结论:
-
func.call()
意思是“ 同步给我一个价值 ” -
observable.subscribe()
意思是“ 给我任意数量的值,无论是同步还是异步 ”