rxjs操作符：of和from

感觉of操作符在快速创建Observable的时候挺方便的，使用from在进行一些转化的，对这两个操作符进行整理一下。

操作符`of`

public static of(values: ...T, scheduler: Scheduler): Observable<T>
```  
创建一个Observable，它会一次发出提供的参数，最后发出完成通知。

这个静态操作符用于创建简单的Observable，该Observable只发出给定的参数，在发送完这些参数后发出完成通知。它可以用来和其他的Observables组合比如说`concat`。默认情况下，使用`null`调度器，这意味着`next`通知是同步发出的，尽管使用不同的调度器可以决定这些通知何时送到。

例如：
``` js
of(1, 2, 3).subscribe(res => {
    console.log(res);
});
// 控制台依次输出：1， 2， 3

可以使用concat和其他Observable组合，例如：

const ofListObs = of(1, 2, 3);
const strObs = of('a', 'b', 'c');
const intervalObs = interval(500);
const resObs = concat(ofListObs, strObs, intervalObs);
resObs.subscribe(res => {
    console.log(res);
});

依次先发出1、2、3、a、b、c，然后一秒发出一个数字。

操作符 `from`

1	public static from(ish: ObservableInput<T>, scheduler: Scheduler): Observable<T>

从一个数组、类数组对象、promise、迭代器对象或者类Observable对象创建一个Observable。

几乎可以把任何东西都能转化为Observable。

将数组转化为Observable

从一般数组转化：

from([1, 2, 3]).subscribe(res => {
    console.log(res);
});
// 输出1， 2， 3

将Observable转化为Observable：

 from([of(1, 2, 3), of('a', 'b', 'c')]).pipe(
    concatAll(),
).subscribe(res => {
    console.log(res);
});
// 依次输出：1， 2， 3，a, b, c

将字符串转化为Observable

from('test').subscribe(res => {
    console.log(res);
});
// 依次输出test

将一个无限迭代器转化为Observable

创建一个无限迭代器：

 static * generateDoubles(seed) {
    let i = seed;
    while (true) {
        yield i;
        i = 2 * i;
    }
}

通过from转化迭代器为Observable（只取迭代器的前十个）：

const iterator = OfFromComponent.generateDoubles(3);
from(iterator).pipe(
    take(10),
).subscribe(res => {
    console.log(res);
});
// 依次输出 3 6 12 24 48 96 192 384 768 1536

从promise转化

1
2
3

from(new Promise(resolve => resolve('hello'))).subscribe(res => {
    console.log(res);
});

从集合中转化

const m = new Map();
m.set({a: '3'}, 'hi');
m.set({b: 4}, 'tony');
from(m).subscribe(res => {
    console.log(res);
});
// 依次输出：[{"a":"3"},"hi"], [{"b":4},"tony"]

扩展：fromPromise、fromEvent、fromEventPattern

除了通用的from操作符，还有fromPromise专门处理Promise转换Observable，以及fromEvent专门处理事件转换Observable。

fromPromise

1	public static fromPromise(promise: PromiseLike<T>, scheduler: Scheduler): Observable<T>

将promise转化为Observable.

返回一个仅仅发出Promise resolve过的值然后完成的Observable。

如果Promise resolve一个值，输出Observable发出这个值然后完成。如果Promise被rejected，输出Observable后发生相应的错误。

fromPromise(fetch('http://www.mxnzp.com/api/weather/current/%E6%B7%B1%E5%9C%B3')).subscribe(
    res => {
        if (res.status === 200) {
            res.json().then(r => {
                console.log(r);
            });
        }
    },
    err => {
        console.log('err', err);
    }
);

fetch方法比较特殊，返回一个Promise，然后json()后继续Promise.then()才可以拿到接口的返回值。

fromEvent

1	public static fromEvent(target: EventTargetLike, eventName: string, options: EventListenerOptions, selector: SelectorMethodSignature<T>): Observable<T>

创建一个Observable，该Observable发出来自给定事件对象的指定类型事件。

创建一个来自于DOM事件，或者Node的EventEmitter事件或其他事件的Observable。

通过给“事件目标”添加时间监听器的方式创建Observable，可能会是拥有addEventListener和removeEventListener方法的对象，一个Node.js的EventEmitter，一个jQuery式的EventEmitter，一个Dom的节点集合，或者Dom的HTMLCollection。Observable被订阅的时候事件处理函数会被添加，当取消订阅的时候会将事件处理函数移除。

名称	类型	属性	描述
target	EventTargetLike	必须	事件目标，事件处理的对象
eventName	string	必填	事件名称，从target发出
options	EventListenerOptions	可选	传递给addEventListener的参数
selector	SelectorMethodSignature	可选	函数处理的结果

fromEvent(document, 'click').subscribe(x => {
    console.log('click', x);
});
// 发出dom document上的点击事件，每次点击时，都会在控制台发出 MouseEvent

对上面的程序进行扩展，点击页面上的任何地方，出现一个小东西，0.5s后消失：

constructor(
        private render: Renderer2,
        private el: ElementRef,
) {
}
fromEvent(document, 'click').subscribe((event: MouseEvent) => {
    // 获得坐标
    const x = event.clientX;
    const y = event.clientY;

    const devDom = this.render.createElement('div');
    devDom.className = 'lover';
    this.render.setStyle(devDom, 'top', y + 'px');
    this.render.setStyle(devDom, 'left', x + 'px');
    this.render.appendChild(this.el.nativeElement, devDom);
    // 500毫秒后删除dom
    timer(500).subscribe( num => {
        this.render.removeChild(this.el.nativeElement, devDom);
    });
});

fromEventPattern

一个从基于addHandler/removeHandler方法的api创建Observable。目前感觉没什么用，先占个坑，后面用到了再细化。

整理了of操作符和from操作符的用法，以及相关的fromEvent和fromPromise操作符。

操作符of

操作符 from