一、RxJS是什么
是事件流处理库,可以把 RxJS 当做是用来处理事件的 Lodash
结合了 观察者模式、迭代器模式 和 使用集合的函数式编程,以满足以一种理想方式来管理事件序列所需要的一切。
二、RxJS 基本概念
RxJS 中用来解决异步事件管理的的基本概念是:
- Observable (可观察对象)
表示一个概念,这个概念是一个可调用的未来值或事件的集合,创建一个流。
- Observer (观察者)
一个回调函数的集合,它知道如何去监听由 Observable 提供的值。
- Subscription (订阅)
表示 Observable 的执行,主要用于取消 Observable 的执行。
- Operators (操作符)
采用函数式编程风格的纯函数 (pure function),使用像 map
、filter
、concat
、flatMap
等这样的操作符来处理集合。
- Subject (主体)
相当于 EventEmitter,并且是将值或事件多路推送给多个 Observer 的唯一方式。
- Schedulers (调度器)
用来控制并发并且是中央集权的调度员,允许我们在发生计算时进行协调,例如 setTimeout
或 requestAnimationFrame
或其他。
三、RxJS使用
import { Observable } from 'rxjs';
const now = new Date().getTime();
// 1.创建流
const stream$ = new Observable((subscriber) => {
setTimeout(() => {
subscriber.next([1, 2, 3]);
}, 1000);
setTimeout(() => {
console.log(1);
subscriber.next({ a: 1000 });
}, 2000);
setTimeout(() => {
console.log(2);
subscriber.next('end');
}, 3000);
setTimeout(() => {
console.log(3);
subscriber.complete();
}, 4000);
});
// 2. 创建流处理方法
const observer = {
complete: () => console.log('done'),
next: (v) => console.log(new Date().getTime() - now, 'ms stream1', v),
error: () => console.log('error'),
};
//3. 启动流类比就是订阅
const subscription = stream$.subscribe(observer);
// 停止流 流停止后里面的回调next不在执行,但是流里面的函数继续执行
setTimeout(() => {
subscription.unsubscribe();
}, 1000);
Subscription = Observable.subscribe(observer) observable: 随着时间产生的数据集合,可以理解为流,其subscribe方法可以启动该流 observer: 决定如何处理数据 subscription: 存储已经启动过的流,其unsubscribe方法可以停止该流
观察者模式,
迭代器模式