Rxjs是JavaScript的一个扩展，基于观察者模式
观察者模式和发布订阅系统的区别
观察者模式定义了对象之间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知，中间没有第三方作为调度中心，依赖和被依赖方是直接“对话“的。
发布订阅系统有一个“中间商”，一般被称为调度中心或事件通道，用以过滤发布者的信息并维持发布者和订阅者之间的关系
Rxjs主要由三部分组成：
- Observable 被观察的对象
- subscription 监听Observable的变化
- Operators 一些函数，可以处理管道的数据
接下来我们创建一个简单的Observable—subscription关系
import { Observable } from 'rxjs' // new 一个observable对象,该对象的构造器接收一个回调函数用于发布内容 const observable = new Observable((subscribe) => { subscribe.next(1) subscribe.next(2) subscribe.next(3) // 支持异步写法 setTimeout(() => { subscribe.next(4) // complete方法指示通知完成,不支持传入参数 subscribe.compete() }, 2000) }) // observable上有一个subscribe方法,该方法接收一个配置对象 observable.subscribe({ // 所有next方法发布的内容都会按顺序被传到这个函数 next: (value) => { console.log(value) }, })
看看这个next，很像迭代器对吧？ ——小满zs
import { Observable, of, interval, take } from 'rxjs' // 这里subscribe接收一个回调函数，可以直接接收到发布的内容 interval(50).pipe(take(5)).subscribe(value => { console.log(value) })
函数 |
功能 |
of |
接收若干number类型参数，用next()方法分别将这些参数发布出去 |
interval |
类似循环定时器，接收一个number类型的参数指定next方法调用的时间间隔。序列从0开始发送，如果不施加外力会一直进行下去 |
take |
接收一个number类型的参数确定next方法调用的次数，通常和interval方法共用 |
除了上述API，管道中还可以添加其他处理函数实现不同功能
import { Observable, of, interval, take } from 'rxjs' import { filter, map } from 'rxjs/operators' const subs = interval(500).pipe(retry(3),map(v => ({ num:v })),filter(v => v.num % 2 == 0)).subscribe(value => { console.log(value) if(value.num == 10){ subs.unsubscribe() } })
函数 |
功能 |
map |
同JavaScript中的map，将返回值封装成一个数组后返回 |
filter |
同JavaScript中的filter，检查每个元素是否通过测试，通过则返回 |
retry |
接收一个number类型的参数，作用是如果pipe方法之前的代码抛出错误，retry会再次尝试执行n次出错的代码，通常在pipe之前的方法需要请求接口时使用 |
import { Observable, of, interval, take, fromEvent } from 'rxjs' import { filter, map, retry } from 'rxjs/operators' const click$ = fromEvent(document, 'click').pipe(map((v) => v.target)) click$.subscribe((e) => { console.log(e) })
fromEvent是一个用于监听DOM事件的函数，该函数接受两个参数，第一个是document对象，第二个是事件名。它返回一个事件观察者对象，可以通过这个对象的subscribe方法查看事件参数e。formEvent同样支持在管道流中进行逻辑处理
