title: Angular Http - How to cancel outdated request
body: <p>So basically I have a function that makes 2 HTTP requests to the server every time I receive a new data from signalR which will be fired so many times. So <code>getitemCount</code> function will be called so many times. Therefore It will hit the server so many times as well.</p>
  
  <p><code>getitemCount</code> is a promised because I used <code>toPromise()</code> operator to convert it from Observable.</p>
  
  <p>What I am trying to do is: when receiving an update from the server, If there are any <code>getitemCount</code> is going on. It will be canceled and make a new request instead.</p>
  
  <pre><code>export class LeftNavigationComponent implements OnInit, OnDestroy {
      typeACount: number = 0;
      typeBCount: number = 0;    
  
      constructor(
          private itemService: service.ItemService,        
          private signalR: service.SignalRService) { }
  
      ngOnInit(): void {
          this.subscriptions = [            
              this.signalR.itemCreated.subscribe(item =&gt; this.onUpdatingData()),
              this.signalR.itemUpdated.subscribe(item =&gt; this.onUpdatingData()),
              this.signalR.itemDeleted.subscribe(itemId =&gt; this.onUpdatingData())]
      }
  
      onUpdatingData() {
          Promise.all([
              this.itemService.getitemCount(APP_SETTING.TYPE_A),
              this.itemService.getitemCount(APP_SETTING.TYPE_B)])
              .then(response =&gt; this.gettingCountDone(response))
      }
  
      gettingCountDone(response) {
          this.typeACount = &lt;any&gt;response[0];
          this.typeBCount = &lt;any&gt;response[1];        
      }
  }
  </code></pre>
  
  <p>I have used <a href="https://angular-2-training-book.rangle.io/handout/http/search_with_switchmap.html" rel="nofollow noreferrer">switchMap</a> for implementing the search before, but still not be able to archive it on the current use case.</p>
  
  <p>Anybody can give me a suggestion. What I have done so far is using Observable instead of Promise and using folkJoin to combine the result. But it will behave the same as what I am having at the moment.</p>
  
  <pre><code>onUpdatingData() {
      Rx.Observable.forkJoin(this.itemService.getitemCount(APP_SETTING.TYPE_A), this.itemService.getitemCount(APP_SETTING.TYPE_B), (r1, r2) =&gt; {
  
      })
  }
  </code></pre>