RxJS的学习之路三（创建一个Observable）

Observer和Observable是什么

在RxJS中Observable是可以被订阅（subscribe）的一个流对象，而observer是订阅Observable的物件，理解这两者的区别和联系是很重要的。

用RxJS官网上给的一个例子来说明

var Obsec = Rx.Observable.create(function (observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  observer.complete();
});
observable.subscribe(
  value => console.log(value),
  err => {},
  () => console.log('this is the end')
);

如上所示，用create的方式（创建Observable的一种方式）创建了一个Observable，这个Observable由observer(观察者)的方法组成的流的顺序步奏，从而构建了一个完成的Observable观察者对象。

观察者（observer）的方法有：

observer.next(value): 类似于promise的then，表示接下来的传入或操作；
observer.complete(): 表示观察者对象的流结束，complete()触发后，next将不再起作用；
observer.error(): 当报错是执行，并结束流；

以上三个方法放在流对象后面的subscribe函数中可以简写

ob.subscribe({
    next: d => console.log(d),
    error: err => console.error(err),
    complete: () => console.log('end of the stream')
})

通常subscribe对象中仅传入一个函数的时候视为next函数执行。

如何创建一个Observable

RxJS有很多的创建Observable的方法，基于这些方法，RxJS做到了万物皆可流式操作。

最基础的创建方式creat

和之前的例子一样，create方法的创建和promise有点相似，next()函数中可以传入任何东西，包括另外一个observable对象。

var observable = observable
	.create(function(observer) {
		observer.next('lina'); 
		observer.next('pom');
		observer.next('luna');
	})

订阅这个observable它会依次送出‘lina’,‘pom’,‘luna’，另外值得注意的一点是，这样的创建是同步执行的，这样就达到了rxjs可以同时处理同步和非同步行为的特性。

of

在实际项目中，我们往往可以直接引入操作符，就不用observable.的麻烦操作了

import { of } from 'rxjs';

of('lina', 'pom', 'luna').subscribe(res => console.log(res))
// lina
// pom
// luna

of是一种创建observable的简便方法

from

from是将数组转化为observable的方法

import { from } from 'rxjs';

const arr = ['lina', 'pom', 'luna'];
from(arr).subscribe(res => console.log(res));
// lina
// pom
// luna

fromEvent

fromEvent可以将时间监听转化为流

import { from } from 'rxjs';

let eventListener = fromEvent(document.body, 'click');
eventListener.subscribe(() => console('click'))

在点击页面后会打印出‘click’。

interval, timer

interval创建一个每间隔指定时间发出一次事件的observable

import { interval } from 'rxjs';

interval(1000).subscribe(res => console.log(res))
    // 0
    // 1
    // 2
    // ...

timer和interval相似，有两个参数，第一个代表首个元素发出的时间，第二个参数代表后面元素发出的间隔时间。

 timer(1000, 5000).subscribe(res => console.log(res))
    //间隔一秒
    // 0
    //间隔5s
    // 1
    //间隔5s
    // 2
    // ...

第一个参数还可以设置为Date，表示在指定的日期时间开始

empty，never, throw

来说几个比较特殊的操作符.

empty创建一个空的observable，监听即完成。
never创建一个永不结束的observable，永远不会完成。
throw创建一个立即抛出错误的observable，创建即报错。

不过这些都没有用到过。。。

退订

想要让observable对象中指，除了用以后会介绍到的操作符之外，还有一种办法。

订阅的subscribe（）是一个Subscription对象，该对象有一个unsubscribe方法可以满足退订的要求。

import { interval } from 'rxjs';

let subp = interval(1000).subscribe(res => console.log(res))
setTimeout(() => {
    subp.unsubscribe() // 停止订阅
}, 4000);
    // 0
    // 1
    // 2
    // 3