Rxjs初探 - 掘金

Rxjs是什么

Rxjs是一个库，通过使用observable序列来编写异步和基于事件的程序，Rxjs的核心类型就是Observable。下面我们先通过一个简单的例子来认识一下Rxjs。

import {Observable} from 'rxjs'
const observable = new Observable(subscribe => {
    subscribe.next('Hello');
    subscribe.next('Rxjs');
});
observable.subscribe(v => console.log(v));

// 输出结果
Hello
Rxjs

下面开始介绍Rxjs的相关API和使用

Observable(可观察对象)

Observable是Rxjs核心类型，可以通过Observable来生成可观察对象，然后进行订阅和分发。介绍具体使用之前，先介绍两个概念pull(拉取)和push(推送)，拉取和推送是两种不同的协议，用来描述数据生产者和数据消费者之间是如何通信的。

pull(拉取): 比如函数和客户端对服务端发出的http请求，是消费者决定何时去生产者获取数据。
push(推送): 比如Promise和socket，是生产者决定何时向消费者推送数据。

类型	生产者	消费者
pull(拉取)	被动：当被请求时产生数据	主动：决定何时产生数据
push(推送)	主动：按自己的节奏生产数据	被动：对接收的数据作出反应

而我们今天的主角Observable就是属于push(推送)类型的。

Observable创建

import {Observable} from 'rxjs';
const observable = new Observable(subscribe => {
   subscribe.next('value');
})

通过new关键字实例化Observable生成可观察对象Observable的实例，在实例化时传入一个回调函数，里面通过next调用(还可以调用error和complete)来通知订阅者或者说是数据消费者来执行，下面就是消费者的订阅：

Observable订阅

observable.subscribe(v => console.log(v))

通过subscribe来进行订阅，里面的回调函数就是数据消费者，每次订阅就会执行实例化时的回调函数，回调函数里每执行一次next，就会执行一次数据消费者，并将参数传递给数据消费者。subscribe订阅参数有两种类型：

函数: 内部会被赋值给next属性
对象:
- next: 实例化observable时，函数参数里调用next时，就会执行该属性值
- error: 实例化observable时，函数参数里调用error时，就会执行该属性值

上面提到实例化回调函数里可以执行除next之外还可以执行error和complete，其中执行error就会执行订阅者的error属性值，而执行complete就代表执行完成了，下面如果有next或者error的执行也不会通知到订阅者。

取消订阅

订阅函数subscribe返回一个订阅者对象，我们可以通过执行订阅者对象的unsubscribe方法来取消订阅：

const sub = observable.subscribe(v => console.log(v));
// 取消订阅
sub.unsubscribe();

同时还可以通过返回的订阅者对象的add方法把其他订阅添加到一个订阅中，一起进行取消，例如:

const sub1 = observable.subscribe(v => console.log(`sub1 ${v}`));
const sub2 = observable.subscribe(v => console.log(`sub2 ${v}`));
// 将sub2的订阅添加到sub1中
sub1.add(sub2);
setTimeout(() => {
	// 此时订阅sub1和sub2都会被取消订阅
	sub1.unsubscribe();
}, 2000);

Subject

上面介绍的observable是单播的，也就是我们订阅时，只会通知到订阅的这个，如下：

import {Observable} from 'rxjs';
const observable = new Observable(subscribe => {
	subscribe.next('111');
    subscribe.next('222');
})

observable.subscribe(v => console.log(`observable1 ${v}`));
observable.subscribe(v => console.log(`observable2 ${v}`));

输出结果是：

observable1 111
observable1 222
observable2 111
observable2 222

如果是多播的话会输出：

observable1 111
observable2 111
observable1 222
observable2 222

Subject是特殊的Observable类型，它允许将值多播到多个Observer。在Subject内部，subscribe不调用传递值的新执行，它是将观察者注册到注册列表中。类似于addEventListener工作方式，使用方式如下：

import {Subject} from 'rxjs';

const subject = new Subject();
subject.subscribe(val => console.log(`subject1 ${val}`));
subject.subscribe(val => console.log(`subject2 ${val}`));
subject.next(1);
subject.next(2);

输出结果:

subject1 1
subject2 1
subject1 2
subject2 2

由于主题是观察者即具有next、error等属性，可以像如下使用

import {Subject, from } from 'Rxjs';

const subject = new Subject();
subject.subscribe(v => console.log(v));
const observable = from([1,2,3]);
observable.subscribe(subject);

输出结果：

1
2
3

至此Rxjs基本的API和使用方法介绍完毕了。在实际工作中，会在Angular中进行使用，由于我本身是Vue技术栈，最近才开始接触Angular，发现Rxjs在Angular中使用还是很频繁的，就大致学习了一下。【好好学习，天天向上👆】