- 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()意思是“ 给我任意数量的值，无论是同步还是异步 ”
网友评论