学习笔记——>RxJS 创建数据流
2019-07-06 本文已影响0人
吉林天师
在详细学习之前,先统揽全局吧
- 1.直接操作观察者(observer) ------> create
- 2.根据有限的数据产生同步数据流------>of
- 3.产生一个数值范围内的数据--------> range
- 4.以循环方式产生数据-------->generate
- 5.重复产生数据流中心的数据-------->repeat和repeatWhen
- 6.产生空数据流-------->empty
- 7.产生直接出错的数据流-------->throw
- 8.产生永不完结的数据流-------->never
- 9.间隔给定时间持续产生数据流-------->interval和timer
- 10.从数组等枚举类型数据产生数据流-------->from
- 11.从promise对象产生数据流-------->fromPromise
- 12.从外部事件对象产生数据流-------->fromEvent和FromEventPattern
- 13.从AJAX请求结果产生数据流-------->ajax
- 14.延迟产生数据流-------->defer
创建数据流
在RxJS的世界中,一切以数据流为中心,在代码中,数据流以Observable类的实例对象形式存在,创建Observable对象就是数据流的开始
创建类操作符
⚠️⚠️⚠️对于应用开发工程师,应该尽量使用创建类操作符,避免直接利用Observable的构造函数来创造对象,RxJS提供的创建类操作符覆盖了几乎所有的数据流创建模式,没有必要重复发明轮子。在很多场景下,开发者自己用构造函数创造Observable对象可能需要写很多代码,使用RxJS提供的创建类操作符可能只需要一行就能搞定
创建同步数据流
- create :毫无神奇之处(静态操作符)
直接调用Observable的构造函数
Observable.create = function(subscribr){
return new Observable(subscribe);
};
⚠️⚠️ create不需要到人任何其他模块,就可以直接使用(还有个pipe)
- of:列举数据(静态操作符)
使用打补丁方式
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/of';
const source$ = Observable.of(1,2,3);
source$.subscribe(
console.log;
null,
() => console.log('complete')
);
不使用打补丁方式
import {of} 'rxjs/observable/of';
const source$ = of(1,2,3)
of 产生的是Cold Observable
- range :指定范围(静态操作符)
const source$ = Observable.range(1,100);
range 第一个参数是数字序列开始的数字,第二个参数是数字序列的长度,产生的Observable 对象首先产生数字1,每次递增1,依次产生100个数字,然后完结
这样可以改变步长
const source$ = Observable.of(1,2,3).map(x => x * 2)
- generate 循环创建(静态操作符)
const source$ = Observable.generate(
2, // 初始值,相当于for 循环中的i
value => value < 10,//继续的条件
value => value + 2,//每次递增
value => value * value//产生的结果
)
-
repeat :重复数据的数据流(实例操作符)
倒入方式,打补丁方式
import 'rxjs/add/opeartor/repeat';
使用lettable 操作符
import {repeat} 'rxjs/operators/repeat';
repeat 只有在上游Observable对象完结之后才会重新订阅。因为在完结之前,repeat也不知道会不会有新的数据从上游被推送下来
传入参数为负整数表示无限重复订阅
const source$ =Observable.of(1,2,3)
const repeated$ = source$.repeat(10);
- 极简操作符
empty 直接产生一个完结的Observable对象
throw 产生的Observable对象什么也不做,直接抛出异常
never 直接产生一个Observable对象,既不吐出数据,也不跑错误,就这样待着直到永远
创建异步数据流
- interval 和timer 产生定时数据
⚠️⚠️⚠️:要解决复杂问题,应该用多个操作符的组合,而不是让一个操作符的功能无限膨胀
import 'rxjs/add/observable/interval'
const source$ =Observable.interval(1000); // 一秒钟产生一个
import 'rxjs/add/observable/timer'
const source$ =Observable.timer(1000); // 数值是毫秒数,Date类型就是明确的时间点
const source$ = Observable.timer(2000,1000) ;//
interval 是间隔时间参数相同时timer的一种简写
- from:可把一切转化为Observable