美文网首页web前端2020还有人在用Angular吗
angular-rxjs的Subject和Observable的

angular-rxjs的Subject和Observable的

作者: 姜治宇 | 来源:发表于2020-11-30 16:45 被阅读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不是,一旦发布了消息,如果你延时接收,那对不住,一旦错过就接收不到了。

    相关文章

      网友评论

        本文标题:angular-rxjs的Subject和Observable的

        本文链接:https://www.haomeiwen.com/subject/wzdrwktx.html