RXJS入门

曾经终败给现在 2022-09-12 07:49 167阅读 0赞

# 主要目的 #

当我们介绍引入一个概念时，我们应该都会问，这个东西是用来干嘛的，作用是什么，那么同样的，RXJS也是一样，它是用来干嘛的呢？

**主要目的：** 有效管理非同步环境下的事件资料。

这句话是什么意思呢？这里举个栗子：假如你按顺序发出去12345这五个事件，那么你接收的时候一定是按顺序接收么？答案是不一定的，也就是所谓的异步。  
这个时候我们就可以使用rxjs，来进行有效的管理事件资料的顺序

# 定义 #

一组可用来处理**非同步**或**事件**的js函数库  
**非同步：**

*  AJAX/XHR
 *  Service Worker
 *  setTimeout
 *  Promise

**事件**

*  各式DOM事件
 *  css动画事件
 *  websockets等

# 核心名词 #

**Observable：** 可观察物件，代表着未来即将产生的事件资料，相当于流的起点  
**Observer：** 观察者，用来接收观察结果的物件，在观察这个东西的执行行为  
**Subscription：** 订阅事件资料的行为，代表在监听observable，可以取消observer的监听，这样observer就不会去监听observable了  
**Operators：** 在observer监听时对事件资料进行相关操作的操作符  
**Subject：** 主体物件，其实就是相当于一个喇叭，将一个observable发送给多个observer，它自己既是observable又是observer

**大白话环节：** 有一根水管，我往里面开始倒水，这个水就是observable，我自己就是observer，开始观察这个水的流动，水管外有一个盖子，它很神奇，可以插在水管中间，这个盖子，当我把它拿出来的时候，水就开始流动，放在管子中间，水就停止流动，这个盖子就相当于subscription。水流着流着我想往水里加点东西，或者过滤一下水又或者做点别的操作，这就相当于operators。此时我有个放大镜，我能通过这个放大镜看见这个水的流动，这时候小明小红observer走了过来，那我把放大镜给他们看，他们也就能看见水的流动。这个放大镜就相当于subject

# 举例 #

var subscription = Rx.Observable.interval(500).take(4).subscribe(function (x) {  console.log(x) });

**阐述：** Observable就是我们上面说的观察对象，我们每隔500毫秒去发送一个数字，发送四次，我们订阅这个观察对象(假如不订阅，那么即使有观察对象也是没用的)，将值打印在控制台上

# 举例2 #

//建立可观察的Observable物件
    var click$ = rxjs.fromEvent(document, 'click');
    //建立观察者物件（observer）
    var observer = { next: (x) => console.log(x) };
    //建立订阅物件
    var subs$ = click$.subscribe(observer);
    //取消订阅
    subs$.unsubscribe();

# 举例3 #

//建立主体物件
    var subject = new rxjs.Subject();
    //建立可观察observable
    var click$ = rxjs.fromEvent(document,'click');
    //设定最多取得两个事件资料就将observable设为完成
    click$ = click.pipe(take(2));
    //设定将click$全部交由subject进行广播
    click$.subscribe(subject);
    //最后再由subject去建立observable物件
    var subs1$ = subject.subscribe((x) => console.log(x.client));
    var subs2$ = subject.subscribe((x) => console.log(x.client));
    //取消订阅subscription物件
    subs1$.unsubscribe();
    subs2$.unsubscribe();