RxJS介绍

什么是RxJS

RxJS 是一个库,它通过使用 observable 序列来编写异步和基于事件的程序。它提供了一个核心类型 Observable,附属类型 (Observer、 Schedulers、 Subjects) 和受 [Array#extras] 启发的操作符 (map、filter、reduce、every, 等等),这些数组操作符可以把异步事件作为集合来处理。

可以把 RxJS 当做是用来处理事件的 Lodash 。

核心概念

在 RxJS 中用来解决异步事件管理的的基本概念是:
Observable (可观察对象):表示一个概念,这个概念是一个可调用的未来值或事件的集合。
Observer (观察者):一个回调函数的集合,它知道如何去监听由 Observable 提供的值。
Subscription (订阅):表示 Observable 的执行,主要用于取消 Observable 的执行。
Operators (操作符): 采用函数式编程风格的纯函数 (pure function),使用像 map、filter、concat、flatMap 等这样的操作符来处理集合。
Subject (主体): 相当于 EventEmitter,并且是将值或事件多路推送给多个 Observer 的唯一方式。
Schedulers(调度器):用来控制并发并且是中央集权的调度员,允许我们在发生计算时进行协调,例如 setTimeout 或 requestAnimationFrame 或其他。

Observable – 可观察对象

Observable被称为可观察序列,简单来说数据就在Observable中流动,你可以使用各种operator对流进行处理。

// 当订阅下面代码中的 Observable 的时候会立即(同步地)推送值1、2、3,然后1秒后会推送值4,再然后是完成流
  const observable = rxjs.Observable
      // 通过create方法创建一个Observable
      // 回调函数会接受observer参数,也就是观察者角色
      .create(observer => {
      observer.next(1);
      observer.next(2);
      observer.next(3);
      setTimeout(() => {
          observer.next(4);
          observer.complete();
      }, 1000);
  });

Observer – 观察者

观察者只是一组回调函数的集合,每个回调函数对应一种Observable发送的通知类型:next、error和complete。
要使用观察者,需要把它提供给Observable的subscribe方法。
Next – 表示数据正常流动,没有出现异常
Error – 表示流中出错,可能是运行出错,http报错等
Complete – 表示流结束,不再发射新的数据
在一个流的生命周期中,error和complete只会触发其中一个,可以有多个next(表示多次发射数据),直到complete或者error。

console.log('just before subscribe');
// Observe观察者
  // Observer 是一个对象,这个对象具有三个方法,分别是 next, error, complete
  // 要使用观察者,需要把它提供给 Observable 的 subscribe 方法
  const observe = {
      next: x => console.log('got value ' + x),
      error: err => console.error('something wrong occurred: ' + err),
      complete: () => console.log('done'),
  };

  // 订阅这个 observable
  // 只有在订阅之后,才会在流Observable变化的时候,调用observer提供的方法,并通知他
 observable.subscribe(observe);
console.log('just after subscribe');
// 输出
  /*just before subscribe
  got value 1
  got value 2
  got value 3
  just after subscribe
  got value 4
  done*/

Subscription - 订阅

Subscription是表示可清理资源的对象,通常是Observable的执行。Subscription有一个重要的方法,即unsubscribe,它不需要任何参数,只是用来清理由Subscription占用的资源。
Subscription基本上只有一个unsubscribe()函数,这个函数用来释放资源或取消Observable执行。

let subscription = observable.subscribe(observe);
  setTimeout(() => {
      subscription.unsubscribe();
  }, 1000);

Operators - 操作符

操作符是Observable类型上的方法,比如map()、filter()、merge()等等。当操作符被调用时,它们不会改变已经存在的Observable实例。相反,它们会返回一个新的Observable,它的subscription逻辑基于第一个Observable。
RxJS的操作符有点多,我们可以按照种类分为:组合、条件、创建、错误处理、过滤、多播、转换以及一些工具。可参考https://rxjs-cn.github.io/learn-rxjs-operators/operators/,使用时按需要寻找,其实部分操作符从功能来讲可能会觉得区别不太大,区分起来也比较困难,我们可以查阅它们的弹珠图来方便我们区分。我们之举一个简单的例子来展示一下。

const { from } = rxjs;
    const { filter, take, last, startWith, skip } = rxjs.operators;

    // 发出(1, 2, 3, 4, 5)
    const source = from([1, 2, 3, 4, 5]);
    const example = source.pipe(
      // 开头追加 6, 8 得 6, 8, 1, 2, 3, 4, 5
      startWith(6, 8),
      // 舍弃第一个 得 8, 1, 2, 3, 4, 5
      skip(1),
      // 只取偶数得 8, 2, 4
      filter(num => num % 2 === 0),
      // 再取前俩得 8, 2
      take(2),
      // 只取最后一个得 2
      last()
    );
    example.subscribe(val => {
      console.log(`The number: ${val}`)
    });

Subject – 主体

Subject是一个特殊类型的Observable,它允许将值多播给多个观察者,所以Subject是多播的,而普通的Observables是单播的(每个已订阅的观察者都拥有Observable的独立执行)。
每个Subject都是Observable。对于Subject,你可以提供一个观察者并使用 subscribe 方法,就可以开始正常接收值。从观察者的角度而言,它无法判断 Observable 执行是来自普通的 Observable 还是 Subject。
每个 Subject 都是观察者。Subject 是一个有如下方法的对象: next(v)、error(e) 和 complete() 。要给 Subject 提供新值,只要调用 next(theValue),它会将值多播给已注册监听该 Subject 的观察者们。

  const {take} = rxjs.operators;

  const source = rxjs.interval(1000).pipe(take(3));
  const subject = new rxjs.Subject();

  // observer 其实就是实现了next方法,error方法和complete方法的对象
  const observerA = {
    next: value => {
      console.log(`A:` + value )
    },
    error: error => {
      console.log('Error:', error);
    },
    complete: () => {
      console.log('complete');
    }
  };

  const observerB = {
    next: value => {
      console.log(`B:` + value)
    },
    error: error => {
      console.log('Error:', error);
    },
    complete: () => {
      console.log('complete');
    }
  };

  // 不会执行,相当于注册 observer,只是将给定的观察者注册到观察者列表中
  subject.subscribe(observerA);
  subject.subscribe(observerB);
//  setTimeout(() => {
//      subject.subscribe(observerB);
//  }, 2000)


  // 注释去掉才会执行
  // source.subscribe(subject);

Schedulers – 调度器

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

// 调度器可以让你规定 Observable 在什么样的执行上下文中发送通知给它的观察者。
    // https://www.jianshu.com/p/5624c8a6bd2b
    const observable = rxjs.Observable.create(observer => {
        observer.next(1);
        observer.next(2);
        observer.next(3);
        observer.complete();
    })
        // observeOn 作用
        // 改变通知的Notifications执行时机,即Observables中的Next,Error,Complete函数
        // 能够用于每个操作符的前面,即可以多次使用
        .observeOn(rxjs.Scheduler.async); // 设置为async
    console.log('just before subscribe');
    observable.subscribe({
        next: x=> console.log(`got value ${v}`),
        error: err => console.error(`something wrong occurred: ${err}`),
        complete: () => console.log('done')
    });
    console.log('just after subscribe');
    // 输出结果:
    /*just before subscribe
    just after subscribe
    got value 1
    got value 2
    got value 3
    done*/

由于调度器使用的不多,只简单的说明一下。
本篇主要是大致的介绍一下RxJS,让大家可以有个初步的概念,如果想研究更多更详细的,请参考RxJS中文文档。

你可能感兴趣的:(RxJS介绍)