zoukankan      html  css  js  c++  java
  • [RxJS] BehaviorSubject: representing a value over time

    When an Observer subscribe to a BehaviorSubject. It receivces the last emitted value and then all the subsequent values. BehaviorSubject requires that we provide a starting value, so taht all Observers will always receive a value when they subscribe to a BehaviorSubject.

    Imagine we want to retreve a remote file and print its contents on an HTML page, but we wnat placeholder text while we wait for the contents. We can use a BehaviorSubject for this.

    var subject = new Rx.BehaviorSubject('Waiting for content');
    subject.subscribe(
    function(result) {
      document.body.textContent = result.response || result;
    },
    function(err) {
      document.body.textContent = 'There was an error retrieving content';
    }
    );
    Rx.DOM.get('/remote/content').subscribe(subject);

    Example 2:

    var subject = new Rx.BehaviorSubject(0);
    
    var observerA = {
      next: function (x) { console.log('A next ' + x); },
      error: function (err) { console.log('A error ' + err); },
      complete: function () { console.log('A done'); },
    };
    
    subject.subscribe(observerA);
    console.log('observerA subscribed');
    
    var observerB = {
      next: function (x) { console.log('B next ' + x); },
      error: function (err) { console.log('B error ' + err); },
      complete: function () { console.log('B done'); },
    };
    
    subject.next(1);
    subject.next(2);
    subject.next(3);
    
    
    /*
    0---1---2---3---------------
     0..1...2...3...
                          3.....
    */
    
    setTimeout(function () {
      subject.subscribe(observerB);
      console.log('observerB subscribed');
    }, 2000);
    /*
    
    "A next 0"  <-- Always get the init value
    "observerA subscribed"
    "A next 1"
    "A next 2"
    "A next 3"
    "B next 3" <-- Because A & B share the same observer, B will receive last emit value
    "observerB subscribed"
    
    */
  • 相关阅读:
    Linux下截图工具
    Vue学习——router路由的实现原理
    Vue学习——vue的双向数据绑定原理
    JavaScript学习——面向对象(一)——创建对象(工厂模式和构造器模式)
    子组件给父组件的传值
    Vue组件
    JavaScript学习——事件对象Event
    JavaScript学习——事件处理程序
    JavaScript技巧——轮播图
    javascript——let关键字
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5784167.html
Copyright © 2011-2022 走看看