RxJS前言

it2025-05-06 25

碎碎念：知识点梳理归纳，如果有什么不对的感谢大家指正一起学习！

版本为6

什么是RxJS

一组用来处理非同步或事件的JavaScript函数库

非同步： ajax、setTimeout、promise等同步：各种dom事件（click、keyup）、webSockets

RxJS核心概念

Observable 可观察对象一组可调用未来值或事件的集合

Observer 观察者用来接收监听Observable提供的值。是一组回调函数的集合，包含三个属性（next、error、complete）

Subscription 订阅表示Observable的执行（可用来取消订阅）观察者去观察被观察者

Oprators 运算符处理一系列流对象的集合常见的map，filter，concat，flatMap，switchMap

Subject 主体用广播收到的事件给多位Observer（观察者）即是观察者也是被观察者将Observer送出的结果接收，然后转发给一个以上的观察者多播，一个对象被多个对象订阅

Schedulers 调度器用来控制并发并且是中央集权的调度员，允许我们在发生计算时进行协调，例如 setTimeout 或 requestAnimationFrame 或其他。

RxJS基本概念

RxJS中有一种特殊的对象，称为“流”（stream）,也称为“数据流”或者“Observable对象”。可以把“数据流”对象理解为一条河流，数据就是这条河流里面流淌的水连接Observable和observer的桥梁就是Observable对象的函数subscribeHot Observable Cold Observable一个Observable对象就是一个数据流，经过上游的数据，经过处理流到下游,返回的是新的Observable

静态操作符和实例操作符

导入路径不同，静态操作符导入路径为 rxjs，实例操作符导入为rxjs/operators无论哪种操作符都会返回一个Observable对象有些操作符既可以作为Observable对象的静态方法也可以作为实例方法

静态操作符：

内部不使用this关键字，完全依赖它的参数。只接受非Observable参数，比如数字，然后创建一个新的Observable,而不是将一个输入Observable转换为输出Observable。当作Observable类的静态方法调用就行

例：

interval(1000)

实例操作符:

调用某个具体Observable对象的成员方法例：

let source$ = of(1,2,3); source$.map(/*一些参数*/)

rxjs 运作流程

创建可以观察的Observable 创建观察者订阅取消订阅

例1：一个流被创建和订阅

let click$ = fromEvent(document, 'click'); click$.subscribe(x => console.log(x))

效果：总结：

fromEvent创建一个click事件的流通过subscribe订阅，每次在网页上点击就会有一条日志打印

例2：一个流被创建，使用操作符然后订阅

let click$ = fromEvent(document, 'click'); var sub = click$.pipe(filter((event: MouseEvent) => event.clientX < 100)) sub.subscribe(x => console.log(x))

效果：总结：

使用filter过滤符过滤掉 clientX大于100的click事件（clientX是当前网页可视区x轴坐标）当点击事件x轴超过100（clientX>100）不会被打印注意声明类型：event: MouseEvent

例3：多个操作符

let click$ = fromEvent(document, 'click'); var sub = click$.pipe( filter((event: MouseEvent) => event.clientX < 100), take(4) ) sub.subscribe(x => console.log(x))

总结： take(4)，过滤出clientX<100后，只取4个打印的值