-

RxJS介绍

WEB前端

RxJS 是 Reactive Extensions for JavaScript 的缩写,是一个基于可观测数据流的响应式编程的库。它是基于订阅-发布模式、观察者模式与迭代器实现的,Vue项目中的 eventbus 就是基于订阅-发布实现的。响应式编程是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将变化的值通过数据流进行传播。下面雷雪松给大家介绍一下RxJS。

RxJS核心概念
Observable(可观察对象)
可被观察对象,提供三个方法:next,返回一个值,观察者可以接收到;error,发布一个异常的信号;complate,发布一个处理完成的信号。

Observer (观察者)
观察者,支持三个回调:next,处理被观察者发布的值;error,处理被观察者发布的异常;complate,处理被观察者发布完成的信号。

Subject(订阅)
一个特殊的Observable实现,既可以做为被观察者又可以作为观察者。因为Observable被订阅时,每一个订阅它的都会独立运行。而subject则更像是一个真正的订阅管理的维护者,它搜集所有的订阅者,统一发送给他们。有点类似于dom中的addEventListener

operators(操作符)
RxJS内部的一些操作数据量的方法工具,比如创建、合并、过滤、转换等等。

Scheduler(调度器)
它相当于rxjs中的调度器,可以改变rx内部时间上的行为。

调度器 目的
null 不传递任何调度器的话,会以同步递归的方式发送通知。用于定时操作或尾递归操作。
Rx.Scheduler.queue 当前事件帧中的队列调度(蹦床调度器)。用于迭代操作。
Rx.Scheduler.asap 微任务的队列调度,它使用可用的最快速的传输机制,比如 Node.js 的 process.nextTick() 或 Web Worker 的 MessageChannel 或 setTimeout 或其他。用于异步转换。
Rx.Scheduler.async 使用 setInterval 的调度。用于基于时间的操作符。

RxJS例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// 使用create创建一个 observable,并订阅
const source = rxjs.Observable.create(observable => {
observable.next(1)
})
source.subscribe(v => console.log(v)) // 1

// <a href="https://www.leixuesong.com/3816">Pormise</a>版本
const promise = function () {
return new Promise(resolve => resolve(1))
}
promise.then(v => console.log(v)) // 1

// 多个的情况Promise就处理不了了
const source = rxjs.Observable.create(observable => {
observable.next(1)
observable.next(2)
})
source.subscribe(v => console.log(v))
// 1
// 2

对于观察者中 error 与 complate的回调:
const source = rxjs.Observable.create(observable => {
observable.next(1)
observable.next(2)
observable.complete()
})
source.subscribe({
next (v) {
// ...
},
error () {
// 处理错误情况...
},
complete () {
// 完成的情况...
}
})

// 将数据流 a 与 b 组合在一起
const a = rxjs.of({a: 1})
const b = rxjs.of({b: 2})
const c =rxjs.combineLatest(a, b).pipe(rxjs.operators.map(([a, b]) => {
return {...a, ...b}
}))
c.subscribe(v => console.log(v)) // {a: 1, b: 2}

// 过滤可以整除2的数据
const { interval } = rxjs
const { filter } = rxjs.operators
const source = interval(1000).pipe(filter(val => val % 2 === 0))
source.subscribe(v => console.log(v)) // 0 2 4 6 8...

更多RxJS详情,可以看官方文档:https://cn.rx.js.org/

来源:RxJS介绍

发表评论

电子邮件地址不会被公开。 必填项已用*标注