Observable入门

1．  什么是Observable和 Observer？

1.1 Observable

Observable是能向观察它的人（或外界）在一定时间段内推送值的实体。

Observable实体可能会一直推送下去，也可能在某时间点结束，也可能在某时间点抛出error

故Observable可能的行为为：

向observer推送值，告诉observer结束，告诉observer有异常（error）

 

例子：

Observale 实体：

第1步向观察它的实体（observer）推送值1

第2步向观察它的实体（observer）推送值2

第3步向观察它的实体（observer）推送值3

然后 等待10分钟

第4步向observer推送值4

第5步告诉observer结束了

 

实现为编程语言为：

observer.next(1);

observer.next(2);

observer.next(3);

setTimeout(()=>{

           observer.next(4);

           observer.complete();

}, 1000*60*10);

 

1.2 Observer

是观察Observable的行为后，对其行为进行响应的实体。

做出的响应有三类：

对于推送值的响应

对于结束的响应

对于observable抛出的error的响应

 

2．  http请求的Observable的例子

谁是observable？

HTTP的response是一个observable：它对观察它的实体在timeout时间内

推送值或抛出异常

 

谁是observer？

就是得到response后，做处理。

对推送值做处理 或者是 对error做处理

 

3．  如何生成Observable

3.1 自己把observable的动作序列编程实现，比如第一个例子

3.2 已有的返回observable的服务

比如http的get

 

3.3 rxjs库里，提供构造简单的observable实体的方法。

一个简单的observable是一个接一个的推送值，供推送n次

Rxjs提供的方法有：

Observable.of(x1,x2,…,xn);

或者

Observable.from([x1,x2,…,xn]);

 

4．  Observable的算符

【Old Observable】-- operator –> 【New Observable】

 

Map filter reduce pipe

4.1 map最简单

Observablex.map(x => 2*x) 则之前推送为10时，经过算符，推送20

4.2 filter也不难

Observablex.filter(x => x%2 === 0) 则推送是偶数时，接着推送；推送是奇数时，则不推送

 

4.3 todo

5．  理解Angular中对参数的操作

ngOnInit(){

this.hero$ =this.route.paramMap.pipe( switchMap((params:ParamMap)=>this.service.getHero(params.get('id'))));

}

注意：ParamMap类型不是Observable； this.route.paramMap返回的是Observable<ParamMap>

根本目的是 想做一个map，使得输入的每一个 params得到对应的 Hero。

即 params:ParamMap => Hero

但是，因为this.service.getHero 返回的是 Observable<Hero>

所以 需要把返回的flat化。

所以 当 函数的输入输出类型是  ClassA => ClassB 时，使用map

当 函数的输入输出类型是 ClassA=> Observable<ClassB>时，使用 switchMap