RxJS介绍
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例子:
[cc lang=”javascript” escaped=”true”]// 使用create创建一个 observable，并订阅
const source = rxjs.Observable.create(observable => {
observable.next(1)
})
source.subscribe(v => console.log(v)) // 1
// Pormise版本
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…[/cc]
更多RxJS详情，可以看官方文档：https://cn.rx.js.org/
来源：RxJS介绍