title: RxJs switchMap with angular HttpClient
body: <p>I have a use case whenever a new request is triggered, any http requests that are already in flight should be cancelled / ignored. </p>
  
  <p><strong><em>For eg</em></strong>: </p>
  
  <blockquote>
    <ul>
    <li>A request (say #2) comes in while the request #1 takes too long to respond / slow network connectivity. </li>
    <li>In this case #2 gets a very quick response from server then at any point even if the #1 comes back with a response the HTTP response
    observable should be ignored.</li>
    <li>The problem i face is, first the component displays response values from request #2 and gets updated again when req #1 completes (this should not happen).</li>
    </ul>
  </blockquote>
  
  <p>I figured that switchMap cancels obervables / maintains the order in which the observable values are emitted. </p>
  
  <p><strong>excerpt from my service.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>Obervable.of('myServiceUrl')
               .switchMap(url =&gt; this.httpRequest(url) )
                .subscribe( response =&gt; {
                     // implementation
                     /** Update an observable with the 
                         with latest changes from response. this will be 
                         displayed in a component as async */
                  });
  
  
  private httpRequest(url) {
          return this.httpClient.get('myUrl', { observe: 'response' });
  }
  </code></pre>
  
  <p>The above implementation doesn't work. Could some one figure out the correct implementation for this usecase. </p>