RxJS 函数响应式编程

声明式
纯函数
数据不可变性

创建类
转化类
过滤类
合并类
多播类
错误处理类
辅助工具类
条件分支类
数字和合计类
创建数据流
创建同步数据流

of 列举数据

1
2
Rx.Observable.of(1,2,3)
.subscribe(console.log) // => (1,2,3) -------->

range 指定范围

1
2
Rx.Observable.range(1,100)
.subcribe(console.log) // => (1,2,···,100) ------>

generate 循环创建

1
2
3
4
5
6
Rx.Observable.generate(
0, // 初始的值 相当于for中的 i = 0
v => v < 10, // 继续的条件 for 中的条件判断
v => v + 1, // 每次递增的值
v => v * v // 对值进行操作
).subscribe(console.log) // => 0,1,4,9, ... ,81

repeat 重复数据的数据流

1
2
3
Rx.Observable.of(1,2,3)
.repeat(10)
.subscribe(console.log) // => 1,2,3 ... 1,2,3 ... 1,2,3 ... ->10次

创建异步数据流

interval 类似js 的定时器

1
2
Rx.Observable.interval(1000)
.subscribe(console.log) // 每隔一秒输出 0---1---2---3---4---5--------->

timer 类似JS的 timeout

1
2
3
4
5
Rx.Observable.timer(1000)
.subscribe(console.log) // => 1000毫秒后 输出
//还能接受第二个参数
Rx.Observable.timer(2000,1000)
.subscribe(console.log) // => 第一次数据还是 按第一个时间来吐出,接着按第二个参数时间循环下去的吐出

from 转化为Observable

1
2
3
// 可以将 数组,字符串,promise 事件 转化成Observable
Rx.Observable.from([1,2,3])
.subscribe(console.log) // => 1,2,3

fromPromise 异步处理

1
2
3
Rx.Observable.fromPromise(fetch('https://www.lvsebeiying.cn/api/get'))
.map(Response => Response.json()) // Promise {<resolved>: Array(60)}
.subscribe(x => x.then(x => console.log(x))) //打印出结果

fromEvent 网页的事件操作

1
2
3
Rx.Observable.fromEvent(document.querySelector('button'),'click')
.map(e => e.target.innerHTML)
.subscribe(console.log) // 点击的时候输出 button中内容

ajax请求

1
2
3
Rx.Observable.ajax('https:www.lvsebeiying.cn/api/get',{ responseType : 'json' })
.map(x => x.response )
.subscribe(console.log) // 返回结果

defer 代理Observable

1
2
3
4
const ajax = () => Rx.Observable.ajax('https:www.lvsebeiying.cn/api/get',{ responseType : 'json' })
const ajax$ = Rx.Observable.defer(ajax)
// 只有被订阅的时候 才会发起请求
ajax$.subscribe(console.log)

合并数据流

concat 首尾相连

1
2
3
4
5
6
const source1$ = Rx.Observable.of(1,2,3)
const source2$ = Rx.Observable.of(4,5,6)
const source3$ = Rx.Observable.of(7,8,9)

Rx.Observable.concat(source1$,source2$,source3$)
.subscribe(console.log) //1,2,3,4,5,6,7,8,9 ------------->

merge 先到先得快速通过

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 
1.运用在同步数据流中 和concat 是一样的
2.merge 最后一个参数可选number 限定数据流的个数 如下方 第三个数据流不会进入的
3.谁先完成 谁就会优先输出 0A->0B->1A->1B------->
*/
const source1$ = Rx.Observable.timer(0,1000).map( x => x + 'A')
const source2$ = Rx.Observable.timer(500,1000).map( x => x + 'B')
const source3$ = Rx.Observable.timer(1000,1000).map( x => x + 'C')

Rx.Observable.merge(source1$,source2$,source3$,2)
.subscribe(console.log)

//merge 应用场景如:
const click$ = Rx.Observable.fromEvent(element,'click');
const touchend$ = Rx.Observable.fromEvent(element,'touchend');
Rx.Observable.merge(click$,touchend$)
.subscribe(console.log) // 这样就可以兼容 不管是pc 点击 还是移动touch 用一个方法

zip 拉链式组合

1
2
3
4
5
6
7
8
9
10
11
// 会将数据进行1-1的组合数据
const source1$ = Rx.Observable.of(1,2,3);
const source2$ = Rx.Observable.of('a','b','c');
Rx.Observable.zip(source1$,source2$)
.subscribe(console.log) //[1,'a'],[2,'b'],[3,'c']
// 用定时器 但是并不会一直走下去,当拉链无法匹配的时候就会听住
const source1$ = Rx.Observable.of(1,2,3);
const source2$ = Rx.Observable.interval(1000);
Rx.Observable.zip(source1$,source2$)
.subscribe(console.log) // [1,0],[2,1],[3,2]
// 可以有任意多的流 但是一定要根据拉链这个原则对应上去 当对不上就会结束