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
复制代码