Angular RxJS入门笔记 （Observable可观察对象Subscribe订阅Observer观察者Subscription对象）

Posted 2021-07-17 Kabukiyo Lin

RxJS入门笔记，关于Observable可观察对象、Observer观察者、Subscribe订阅，Subscription

• Observable可观察对象
• Observer观察者
• 总结整体

本笔记可用于入门理解和记忆RxJS的基本概念和使用。

Observable可观察对象

官方文档对Observable的描述：

1. Observables 是使用 Rx.Observable.create 或创建操作符创建的
2. 并使用观察者Observer来订阅Subscribe它
3. 然后执行它并发送 next / error / complete 通知给观察者
4. 而且执行可能会被清理

主要得先眼熟几段代码，Observable可观察对象的创建、订阅、执行和清理。

一、创建Observables
代码也是文档里有的：

var observable = Rx.Observable.create(function subscribe(observer) {
  var id = setInterval(() => {
    observer.next('hi')
  }, 1000);
});

关于创建Observables，有几点需要先注意的：

1. 使用Rx.Observable.create或创建操作符去创建
2. 创建操作接收一个subscribe订阅函数作参数
3. subscribe函数接收一个Observer观察者作参数

这时候可能很疑惑了，要subscribe函数干什么，observer观察者又是什么？？

别急，先记着，创建Observables，就是按上面三点规则这么去创建的。

二、订阅Observables

好，第一步已经创建了Observables，那怎么样才能用这个可观察对象呢？得先订阅！
打个比方，就像消费者订阅某家报社一样：只有我（Observer观察者），决定要Subscribe订阅您家报社，那这家报社（Observables）才可以往我这发报纸（可观察对象向观察者推送数据）。

那怎么订阅呢~

observable.subscribe(observer);

这里的含义就是，括号里边的观察者observer，决定要订阅subscribe这家报社observable的报纸了。

再看看回顾一下第一步observables是怎么创建的，是不是有些东西是重合的（subscribe和observer是不是在哪儿见过）？

// 可观察对象observable 报社的建立！！
// 记住第一步创建Observables提到的三条规则
// 1.使用Rx.Observable.create或创建操作符去创建
// 2.创建操作接收一个subscribe订阅函数作参数
// 3.subscribe函数接收一个Observer观察者作参数
var observable = Rx.Observable.create(function subscribe(observer) {
  var id = setInterval(() => {
    observer.next('hi')
  }, 1000);
});

// 这家报社需要被订阅！
observable.subscribe(observer);

我们发现创建和订阅其实是有联系的，

1. 创建操作里面有subscribe函数；订阅操作就是用observable.subscribe实现对可观察对象的订阅
2. 创建操作中的subscribe函数的参数是observer观察者；订阅操作observable.subscribe(observer)，就说明了观察者要订阅。

接着往下看

三、执行Observables

啊，那创建了可观察对象Observables，又有观察者订阅了它，那到底要干什么呢？？执行的是什么呢？

看回第一步创建的代码：

var observable = Rx.Observable.create(function subscribe(observer) {
  var id = setInterval(() => {
    observer.next('hi')
  }, 1000);
});

其实就是要做subscribe函数里面的操作。

{
  var id = setInterval(() => {
    observer.next('hi')
  }, 1000);
}

关于执行有一点要特别注意的：

1. Observables执行，仅当被观察者订阅subscribe后，才会执行。即，你都不订阅我家报社，我干嘛给你报纸看？~

四、清理Observables
如果有那么一天，我不想要再订这一家报纸了。也就是观察者不再从可观察对象这接收新数据，那么就需要停止执行。

具体如何停止执行：在observer订阅之时，就返回了一个Subscription对象，调用该对象的unsubscribe()方法，即可停止执行。

// 订阅返回Subscription对象
var subscription = observable.subscribe(observer);
// 不要再推送数据给我了！
subscription.unsubscribe();

到此为止，我们都粗略了解了：什么是Observable可观察对象，它怎么创建、怎么被订阅Subscribe、怎么执行、怎么清理Subscription.unsubscribe()。但还不太了解里面的观察者是什么。

Observer观察者

官方定义：

1. Observer观察者是Observable可观察对象发送值的消费者，即接收可观察对象推送的data。
2. Observer观察者实际上是一组回调函数的集合

看看Observer观察者对象如何定义：

var observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

总结整体

也是官方的代码示例，虽然放在以上内容的前面，不过我觉得需要先了解以上内容，才可以更好理解这一套机制是怎么运作的。

一、首先创建Observables

var observable = Rx.Observable.create(function subscribe(observer) {
  observer.next(1);
  observer.next(2);
  observer.next(3);
  setTimeout(() => {
    observer.next(4);
    observer.complete();
  }, 1000);
});

PS：别忘了创建的三条规则

1. 使用Rx.Observable.create或创建操作符去创建
2. 创建操作接收一个subscribe订阅函数作参数
3. subscribe函数接收一个Observer观察者作参数

二、接着订阅Observables

通过subscribe()，observer订阅了observable

observable.subscribe(observer);

三、别忘了observer观察者对象也需要定义

在第一步创建里面有observer，在第二步订阅里面也有observer，那别忘了observer还没有定义！
observer是什么？是一组回调函数集合，决定了推送信息的方式。
只有定义了observer，在第一步创建和第二步订阅才是有效的。

var observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};

当然，也可以把observer对象丢到第二步订阅里：

observable.subscribe({
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
});