RxJS官方教程（二） Observable

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

官网 http://reactivex.io/rxjs/manual/overview.html#observable