RxJS是什么?

292 阅读1分钟

一、RxJS是什么

是事件流处理库,可以把 RxJS 当做是用来处理事件的 Lodash

结合了 观察者模式迭代器模式 和 使用集合的函数式编程,以满足以一种理想方式来管理事件序列所需要的一切。

二、RxJS 基本概念

RxJS 中用来解决异步事件管理的的基本概念是:

  1. Observable (可观察对象)

表示一个概念,这个概念是一个可调用的未来值或事件的集合,创建一个流。

  1. Observer (观察者)

一个回调函数的集合,它知道如何去监听由 Observable 提供的值。

  1. Subscription (订阅)

表示 Observable 的执行,主要用于取消 Observable 的执行。

  1. Operators (操作符)

采用函数式编程风格的纯函数 (pure function),使用像 mapfilterconcatflatMap 等这样的操作符来处理集合。

  1. Subject (主体)

相当于 EventEmitter,并且是将值或事件多路推送给多个 Observer 的唯一方式。

  1. Schedulers (调度器)

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

三、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方法可以停止该流

image.png 观察者模式,

image.png

迭代器模式

image.png