RxJS 可观察对象

一、简介

RxJS 很难，但是在异步数据处理，响应式编程和函数式编程中扮演重要角色。可观察对象是 RxJS 中最为重要的内容，在进入复杂的操作符函数式编程之前，需要充分理解可观察对象 Observable。

可观察对象 Observable 是一个处理异步流数据的重要的部分。它包含了很多的概念：

数据生产者
异步处理
可观察数据序列
可取消
可订阅（可共享）
...

RxJS 有着背后的深厚的思想：观察者模式和迭代器模式，以及函数式编程。

二、实现最简单的可观察对象

ts 复制代码

class   {
    constructor(_subscribeFn) {
        this._subscribeFn = _subscribeFn
    }
    
    subscribe(observer) {
        this._subscribeFn({observer})
  }
}

这里我们实现一个简单的可观察对象，构造函数需要传递一个函数作为参数，实现 subscribe，然后进行参数传入 _subscribeFn 执行。当然这里是最简单可观察对象，方便理解我们没有实现取消订阅函数。

三、冷可观察对象

独立性的数据序列
新的订阅者发出数据
Observable 构造函数/of 等操作符

示例

Observable
of
from

ts 复制代码

import { Observable，of, from } from 'rxjs';

const customObservable = new Observable(observer => {
  observer.next('第一个数据');
  observer.next('第二个数据');
  observer.complete();
});

// 订阅
customObservable.subscribe({
  next: data => console.log('收到数据:', data),
  error: error => console.error('发生错误:', error),
  complete: () => console.log('Observable 完成')
 });

const valuesObservable = of(1, 2, 3, 4, 5);

// 订阅
valuesObservable.subscribe({
  next: data => console.log('收到数据:', data),
  error: error => console.error('发生错误:', error),
  complete: () => console.log('Observable 完成')
 });
 
const arrayObservable = from([1, 2, 3, 4, 5]);

// 订阅
arrayObservable.subscribe({
  next: data => console.log('收到数据:', data),
  error: error => console.error('发生错误:', error),
  complete: () => console.log('Observable 完成')
});

💢💢💢使用可观察对象一定要注意，必要时候一定要取消订阅，避免不必要的内存泄露。

四、热可观察对象

创建数据后发出（与订阅者无关）
新的订阅收到订阅之后发出的数据
Subject 主题/formEvent 事件

示例

Subject

ts 复制代码

import { Subject } from 'rxjs';

const subject = new Subject();

subject.next('第一个数据');
subject.next('第二个数据');

subject.subscribe(data => console.log('订阅者1收到数据:', data));
subject.next('第三个数据');

subject.subscribe(data => console.log('订阅者2收到数据:', data));
subject.next('第四个数据');

fromEvent

ts 复制代码

import { fromEvent } from 'rxjs';

const button = document.getElementById('myButton');
const clickObservable = fromEvent(button, 'click');

clickObservable.subscribe(event => console.log('订阅者1点击了按钮'));
clickObservable.subscribe(event => console.log('订阅者2点击了按钮'));

Subject 也存在一些变体，如 BehaviorSubject 和 ReplaySubject 等等。

五、可观察对象与创建型操作符

创建型可观察对象实现了多种js场景的业务场景，例如如：回调，事件，静态数据，数据请求，判断错误,延迟，定时器等。

操作符	功能
`ajax`	创建一个 Observable，发起 AJAX 请求并返回相应数据
`bindCallback`	将一个回调函数转换成 Observable
`bindNodeCallback`	将一个 Node 风格的回调函数转换成 Observable
`defer`	延迟 Observable 的创建，直到有订阅者订阅时才执行
`empty`	创建一个立即完成且不发出任何数据的 Observable
`from`	将数组、Promise、可迭代对象等转换为 Observable
`fromEvent`	将 DOM 元素的事件转换为 Observable
`fromEventPattern`	将符合特定模式的事件转换为 Observable
`generate`	生成一个基于条件和迭代器的 Observable
`interval`	创建一个每隔一段时间发出递增数字的 Observable
`of`	创建一个发出指定值序列的 Observable
`range`	创建一个发出指定范围内连续整数的 Observable
`throwError`	创建一个立即抛出错误的 Observable
`timer`	创建一个在指定时间后发出数据或定期发出数据的 Observable
`iif`	根据条件选择触发两个不同的 Observable

除去构造函数之外，RxJS 还额外提供了 15 个操作符用于创建可观察对象，方便创建各种可观察对象。

六、小结

本文问主要关注客观对象相关的概念和知识。RxJS 中提供构造函数 Observable 以及多大 15 个操作符用于创建可观察对象。可观察对象是一个数据的生产者，能够处理异步数据，可取消，可观察的数据序列。在 RxJS 可观察对象分为冷热两种类型，冷可观察对象具有独立性，热可观察对象具有共享性。