title: Deferred pattern with RxJS 5 observables
body: <p>For arbitrary promise implementation, the deferred pattern (not to be confused with <a href="https://github.com/petkaantonov/bluebird/wiki/Promise-anti-patterns#the-deferred-anti-pattern">antipattern</a>) may may look like:</p>
  
  <pre><code>const deferred = new Deferred;
  ...
  // scopes where `deferred` object reference was passed before promise settlement
  deferred.promise.then((result) =&gt; { ... }, (error) =&gt; { ... });
  ...
  deferred.resolve(...);
  // doesn't affect promise state
  deferred.reject();
  ...
  // after promise settlement
  deferred.promise.then((result) =&gt; { ... }, (error) =&gt; { ... });
  </code></pre>
  
  <p><code>deferred</code> object holds unsettled promise that can be passed to other function scopes by reference. All promise chains will be executed on promise settlement, it doesn't matter if <code>deferred.promise</code> was settled before chaining with <code>then</code> or after. The state of promise cannot be changed after it was settled.</p>
  
  <hr>
  
  <p>As the answer suggests, the initial choices are <code>ReplaySubject</code> and <code>AsyncSubject</code>.</p>
  
  <p>For the given setup (<a href="http://plnkr.co/edit/dYC1yrLW1wwuBZS2cNjv">a demo</a>)</p>
  
  <pre><code>var subject = new Rx.AsyncSubject;
  var deferred = subject.first();
  
  deferred.subscribe(
    console.log.bind(console, 'Early result'),
    console.log.bind(console, 'Early error')
  );
  
  setTimeout(() =&gt; {
    deferred.subscribe(
      console.log.bind(console, 'Late result'),
      console.log.bind(console, 'Late error')
    );
  });
  </code></pre>
  
  <p>This results in desirable behaviour:</p>
  
  <pre><code>subject.error('one');
  subject.next('two');
  </code></pre>
  
  <blockquote>
    <p>Early error one</p>
    
    <p>Late error one</p>
  </blockquote>
  
  <p>This results in undesirable behaviour:</p>
  
  <pre><code>subject.error('one');
  subject.next('two');
  subject.complete();
  </code></pre>
  
  <blockquote>
    <p>Early error one</p>
    
    <p>Late result two</p>
  </blockquote>
  
  <p>This results in undesirable behaviour:</p>
  
  <pre><code>subject.next('two');
  subject.complete();
  subject.next('three');
  </code></pre>
  
  <blockquote>
    <p>Early result two</p>
    
    <p>Late result three</p>
  </blockquote>
  
  <p>The results from <code>ReplaySubject</code> differ but are still inconsistent with expected results. <code>next</code> values and <code>error</code> errors are treated separately, and <code>complete</code> doesn't prevent the observers from receiving new data. This may work for single <code>next</code>/<code>error</code>, the problem is that <code>next</code> or <code>error</code> may be called multiple times unintentionally.</p>
  
  <p>The reason why <code>first()</code> is used is because <code>subscribe</code>s are one-time subscriptions, and I would like to remove them to avoid leaks.</p>
  
  <p>How should it be implemented with RxJS observables?</p>