Rxjs创建数据流

前言

Rxjs是使用Observable实现响应时编程的库，它使js在处理异步或回调逻辑时更优雅简便。本文是学习的Rxjs的笔记记录。

创建类操作符

在使用Rxjs时，可以使用new 关键词来定制Observale构造函数。但是在响应式编程领域有固定的模式，Observable对象的创建也有固定的若干种模式，根据这些可以重复利用的创建模式，有了创建类操作符。

同步数据流

在rxjs世界中，rxjs的一切操作都是在处理数据流。

• create
  Create是最简单的创建操作符，就是直接调用Observable的构造函数创建数据流。

Observable.create = function (subscribe) { 
	return new Observable(subscribe); 
};

• of
  使用Of这个操作符可以轻松创建指定数据集合的Observable对象。

import { of } from 'rxjs/observable/of'; 
const source$ = of(1, 2, 3);

• range
  创建一个范围的连续的序列。

const source$ = Observable.range(1, 100); 

Range第1个参数是数字序列开始的数字，第2个参数是数字序列的长
度，产生的Observable对象先产生数字1，每次递增1，依次产生100个数
字，然后完结。

• generate
  创建循环序列。

const source$ = Observable.generate( 
	2,
	value => value < 10, 
	value => value + 2,
	value => value * value 
);

• repeate
  创建重复的数据流。

const source$ = Observable.of(1, 2, 3); 
const repeated$= source$.repeat(10);

source产生的Observable对象会产生1、2、3三个数 据，这个Observable对象是repeated的上游，利用repeat这个操作符， repeated会重复source中的内容10遍，共产生30个数据之后才完结。

异步数据流

Rxjs的最大特点就是处理异步操作。

• interval和timer

import 'rxjs/add/observable/interval'; 
const source$ = Observable.interval(1000); 
import 'rxjs/add/observable/timer'; 
const source$ = Observable.timer(1000); 

interval接受1个数值类型的参数，代表产生数据的间隔毫秒数，返回
的Observable对象就按照这个时间间隔输出递增的整数序列，从0开始。

• from
  把一切转化为observable。

import 'rxjs/add/observable/from'; 
const source$ = Observable.from([1, 2, 3]);

• fromPromise
  如果from的参数是Promise对象，那么这个Promise成功结束，from产生
  的Observable对象就会吐出Promise成功的结果，并且立刻结束。

const promise = Promise.resolve('good'); 
const source$ = Observable.from(promise); 
source$.subscribe( 
	console.log, 
	error => console.log('catch', error), 
	() => console.log('complete') 
);

• fromEvent
  fromEvent最常见的用法就是 把DOM中的事件转化为Observable对象中的数据。

const event$ = Rx.Observable.fromEvent(document.querySelector('#app'), 'click'); 
	event$.subscribe( 
	() => { 
	document.querySelector('#text').innerText = ‘ceshi’
	} 
);

• fromEventPattern
  fromEventPattern接受两个函数参数，分别对应产生的Observable对象
  被订阅和退订时的动作，因为这两个参数是函数，具体的动作可以任意定
  义，所以可以非常灵活。

import {Observable} from 'rxjs/Observable'; 
import EventEmitter from 'events'; 
import 'rxjs/add/observable/fromEventPattern'; 
const emitter = new EventEmitter(); 
const addHandler = (handler) => { 
	emitter.addListener('msg', handler); 
};
const removeHandler = (handler) => { 
	emitter.removeListener('msg', handler); 
}
const source$ = Observable.fromEventPattern(addHandler, removeHandler); 
const subscription = source$.subscribe( 
	console.log, 
	error => console.log('catch', error), 
	() => console.log('complete') 
);
emitter.emit('msg', 'hello'); 
emitter.emit('msg', 'world'); 
subscription.unsubscribe(); 
emitter.emit('msg', 'end'); 

总结

对于同步数据流，关心的只是产生什么样的数据，已经产生数据的顺序关系，数据之间没有时间间隔，所 以不需要考虑异步的情况。对于异步数据流，除了要考虑产生什么样的数 据，还要考虑产生数据之间的间隔，也就是产生数据的节奏。