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例子:
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.xuesongboke.cn/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介绍