当前位置: 代码迷 >> 综合 >> rxjs 基础概念
  详细解决方案

rxjs 基础概念

热度:98   发布时间:2023-12-17 02:16:41.0

基础概念

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

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

  • Observable (可观察对象): 表示一个概念,这个概念是一个可调用的未来值或事件的集合。
  • Observer (观察者): 一个回调函数的集合,它知道如何去监听由 Observable 提供的值。
  • Subscription (订阅): 表示 Observable 的执行,主要用于取消 Observable 的执行。
  • Operators (操作符): 采用函数式编程风格的纯函数 (pure function),使用像 mapfilterconcatflatMap 等这样的操作符来处理集合。
  • Subject (主体): 相当于 EventEmitter,并且是将值或事件多路推送给多个 Observer 的唯一方式。
  • Schedulers (调度器): 用来控制并发并且是中央集权的调度员,允许我们在发生计算时进行协调,例如 setTimeout 或 requestAnimationFrame 或其他。
  let observable = Observable.create(observer => {observer.next(1);observer.next(2);observer.next(3);observer.complete();observer.next(4);});console.log("just before subscribe ");observable.subscribe({next: x => console.log("next:" + x),error: err => console.log("error:", err),complete: () => console.log("done")});console.log("just after subscribe");
    // 创建 Observables 可观察对象var observable = Observable.create(function subscribe(observer) {var id = setInterval(() => {observer.next("hi");}, 1000);});//订阅 Observables 订阅 ,subscription相当于一个订阅者var subscription = observable.subscribe(x => console.log(x));setTimeout(() => {subscription.unsubscribe();}, 1000);subscription.unsubscribe();
 function multiplyTen(input) {let output = Observable.create(function subscribe(observer) {input.subscribe({next: v => observer.next(10 * v),error: err => observer.error(err),complete: () => observer.complete()});});return output;}var input = from([1, 2, 3, 4]);var output = this.multiplyTen(input);output.subscribe(x => console.log(x));

程序运行结果:10 20 30 40

 

Subscription(订阅者)

什么是订阅?订阅是表示可使用资源的对象,通常是可观察资源的执行。订阅有一个重要的方法,unsubscribe,它不接受参数,只处理订阅所持有的资源。在以前的RxJS版本中,订阅被称为“一次性”。

 

Subject (主体)

RxJS主题是一种特殊的可观测类型,它允许对许多观察者的值进行多播。可以同时订阅多个observe

import { Subject } from 'rxjs';const subject = new Subject<number>();subject.subscribe({next: (v) => console.log(`observerA: ${v}`)
});
subject.subscribe({next: (v) => console.log(`observerB: ${v}`)
});subject.next(1);
subject.next(2);// Logs:
// observerA: 1
// observerB: 1
// observerA: 2
// observerB: 2

 

 

Scheduler (调度器)

什么是调度器? - 调度器控制着何时启动 subscription 和何时发送通知。它由三部分组成:

  • 调度器是一种数据结构。 它知道如何根据优先级或其他标准来存储任务和将任务进行排序。
  • 调度器是执行上下文。 它表示在何时何地执行任务(举例来说,立即的,或另一种回调函数机制(比如 setTimeout 或 process.nextTick),或动画帧)。
  • 调度器有一个(虚拟的)时钟。 调度器功能通过它的 getter 方法 now() 提供了“时间”的概念。在具体调度器上安排的任务将严格遵循该时钟所表示的时间。