阅读 513

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调用(还可以调用errorcomplete)来通知订阅者或者说是数据消费者来执行,下面就是消费者的订阅:

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,发现RxjsAngular中使用还是很频繁的,就大致学习了一下。 【好好学习,天天向上👆】

文章分类
前端
文章标签