rxjs 基础概念

基础概念

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

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

• Observable (可观察对象): 表示一个概念，这个概念是一个可调用的未来值或事件的集合。
• Observer (观察者): 一个回调函数的集合，它知道如何去监听由 Observable 提供的值。
• Subscription (订阅): 表示 Observable 的执行，主要用于取消 Observable 的执行。
• Operators (操作符): 采用函数式编程风格的纯函数 (pure function)，使用像 map、filter、concat、flatMap 等这样的操作符来处理集合。
• 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() 提供了“时间”的概念。在具体调度器上安排的任务将严格遵循该时钟所表示的时间。