03RxJS Operators操作符(开篇）

Operators

之前讲函数式编程，这里要介绍的Operators就是一个个的函数，它具有函数式的特点:没有返回值且不会对原数据产生影响。

即:每个操作符（函数），在拿到原Observable对象后，经过处理返回一个新的Observable。

• map函数

map(source:Observable<string>, callback:(item:string) => string){
    return new Observable(observe => {
        return source.subscribe(
            value => {
                try{
                    observe.next(callback(value))
                }catch(e){
                    observe.error(e)
                }
            }
        )
    })
}
newObservable(){
    const people of('Jerry','Anna');
    const helloPlople = this.map(people, (item) => 'Hello, ' + item);
    helloPeople.subscribe(res => {
        console.log(res);
    })
}
//Hello, Jerry
//Hello, Anna

• 分类

• 管道操作符：filter,take……
• 创建类操作符：of,from……

• of

const people = of('Jerry', 'Anna');

相当于new了一个Observable操作，然后进行了两次next操作。

不管of中是数值，还是方法，它都会按顺序发出

const source = of(
    {name:'Brian'},
    [1,2,3],
    function hello(){}
    )
source.subscribe(val => console.log(val));

• mapTo

mapTo可以把传进来的值改成一个固定的值

map(result: number | string){
    let source$ = interval(1000);
    let newset$ = source$.mapTo(2);
    newest.subscribe(res => {
        console.log(res)
    })
}

from

将字符串、数组、promise或迭代器转换成observable

• 字符串

const result = from('ok');
result.subscribe(
    res => console.log(res);
    error => console.error(error);
)
//o
//k

• 转数组

const arraySource = from([1, 2, 3, 4, 5])
const subscribe = arraySource.subscribe(val => console.log(val))

• 转Promise

const promiseSource1 = from(Promise.resolve('Hello world'))
const promiseSource2 = from(Promise.reject(new Error('error promise')))
const subscribe1 = promiseSource.subscribe(
    val => console.log(val),
    error => console.error(error)
)
//Hello world

const subscribe2 = promiseSource.subscribe(
    val => console.log(val),
    error => console.error(error)
)
//error promise

• 转Map对象

const map = new Map([[1,'hi']]);
map.set(2,'rxjs');
const mapSource = from(map);
mapSource.subscribe(res => console.log(res));
// [1, "hi"]
// [2, "rxjs"]

• empty

不带任何数据的Observable,会立即执行complete回调

import {empty} from 'rxjs'
const result = empty();
result.subscribe(
  res => console.log(res),
  error => console.log(error),
  () => console.log('ok'),
)
//ok

• event事件

const source = fromEvent(document, 'click');
source.subscribe(val => console.log(val))

//MouseEvent {isTrusted: true, screenX: 242, screenY: 495, clientX: 242, clientY: 392, …}

const source = fromEvent(document, 'click');
const example = source.pipe(map(event => `Event time: ${event.timeStamp / 1000}`))
example.subscribe(val => console.log(val))
// 打印程序运行开始到当前点击事件触发的秒数

• timer

timer中的第一个值为控制延时多少时间第一次触发，第二个值为第一次触发后再间隔多久触发。当第二个参数为空时，相当于延时器。

const source = timer(5000, 1000)
const subscribe = source.subscribe(val => console.log(val));

• range

连续发出一定范围的数字

import {range} from 'rxjs'
//从0开始，发出4个数字
const numbers = range(4);
numbers.subscribe(x => console.log(x));
//0 1 2 3 

从2开始，发出3个数字

import {range} from 'rxjs'
const numbers = range(2,3);
numbers.subscribe(x => console.log(x));
//2 3 4

• iif

在被订阅时，根据条件决定，哪个Observable将被订阅

import {iif} from 'rxjs'
const random = Math.random();
const firstOrSecond = iif(
    () => random > 0.5,
    of('random>0.5'),
    of('random<0.5'),
);
firstOrSecond.subscribe(res => {
    console.log('res', res);
})

当iif中的条件(random的值>0.5)成立时，执行iif后的第一个of，否则执行第二个of

• throwError

创建一个立即触发error回调的Observable

import {throwError} from 'rxjs';
const err$ = throwError(new Error('fail'));
err$.subscribe(res =>{
    console.log('res',res)
},error => {
    console.log(error);
},() => console.log('complete'))
//Error: fail

• 大理石图Marble diagrams

异步往往是复杂的，尤其是多个异步结合在一起的逻辑，用文字难以表达，所以出现了一种叫Marble diagrams的图形表示法，协助理解各种operators