web前端2020还有人在用Angular吗

angular-rxjs的Subject和Observable的

2020-11-30  本文已影响0人  姜治宇

rxjs是个独立的库,里面涉及的东西挺多,其中比较常见的除了Observable,还有Subject。
Subject是一种广播机制,多人可以订阅一个Subject,然后Subject发布一条信息,全体订阅者都可以接收到,或者你可以理解成微信公众号(subject)和用户(subscribe)的关系,在微信公众号发布一条消息,全体用户都可以接收到,这就是Subject要实现的事情。
下面演示一下具体用法。

import { Subject } from 'rxjs';
var subject = new Subject();
subject.subscribe({
    next: (v) => console.log('observerA: ' + v)
});
subject.subscribe({
    next: (v) => console.log('observerB: ' + v)
})

subject.next(1);
subject.next(2);

执行结果:

observerA: 1
observerB: 1
observerA: 2
observerB: 2

可以看到,当subject发布一条消息后,A和B都收到了。
那Subject和Observable有啥区别呢?
Subject和Observable最大的不同之处在于,Observable只能玩一对一,而Subject是一对多。

import { Subject, Observable } from 'rxjs';

    let ob = new Observable((observer) => {

      setTimeout(() => {
        observer.next({ msg: 'Observable发布消息啦' }) // 发布消息
      }, 1000)
    })

    //Observable无论何时订阅都可以哦~~

    setTimeout(() => {
      ob.subscribe(res => {
        console.log('2s后,订阅者A:', res);
      })
    }, 2000)
    setTimeout(() => {
      ob.subscribe(res => {
        console.log('3s后,订阅者B:', res);
      })

    }, 3000);



    let subject = new Subject();
    //Subject发布了消息,但是如果你延后订阅,就收不到消息
    setTimeout(() => {
      subject.next({ msg: 'Subject发布了一条消息' });
    }, 1000);
    //下面的这俩哥们一个都没执行到
    setTimeout(() => {
      subject.subscribe({
        next: (v) => console.log('订阅者AA>>> ' + v)
      });
    }, 2000);

    setTimeout(() => {
      subject.subscribe({
        next: (v) => console.log('订阅者BB>>> ' + v)
      })
    }, 3000);

执行结果:

2s后,订阅者A: {msg: "Observable发布消息啦"}
3s后,订阅者B: {msg: "Observable发布消息啦"}

Observable是发布者和订阅者必须配对,订阅者无论何时订阅发布者都可以执行到;而Subject不是,一旦发布了消息,如果你延时接收,那对不住,一旦错过就接收不到了。

上一篇下一篇

猜你喜欢

热点阅读