初识rxjs

初识rxjs

想理解rxjs我们就必须先理解Observable对象

想理解Observable我们先祭出官方文档的这个表格

	单个值	多个值
拉取	Function	Iterator
推送	Promise	Observable

有了参照系理解起来就更容易一点

然后我们对拉取和推送的概念再祭出一张表格

	生产者	消费者
拉取	被动的: 当被请求时产生数据。	主动的: 决定何时请求数据。
推送	主动的: 按自己的节奏产生数据。	被动的: 对收到的数据做出反应。

通过两张表格，我们可以建立起对Observable的第一个印象：

它好像是一个比较强大的promise

紧接着问题就来了，单个值和多个值是什么意思？Iterator可以借助for循环获得多个值，Obserable是怎么做的呢？

看示例

const observable = new Observable((observer) => {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  setTimeout(() => {
    observer.next(4);
    observer.complete();
  }, 1000);
  observer.next(5)
});

const subscription = observable.subscribe({
  next: x => console.log('got value ' + x),
  error: err => console.error('something wrong occurred: ' + err),
  complete: () => console.log('done'),
});

subscription.unsubscribe();

示例代码中包含了Observable对象的创建，还包含了作为subscribe方法实参的Observer对象，以及subscribe方法返回的Subscription对象——三个概念用一个例子都串起来了

除此之外还有一个Subject怎么理解呢？

官方文档给出的解释式：多播的 Observable

什么是多播？

体现在代码上就是，Subject 可以通过多次调用 subscribe 方法注册多个Observer，如下

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