title: Angular 2 & RxJs catch function callback binding to 'this' causes http request to be repeated over and over
body: <p>I have a method for handle our errors from http requests and it looks like this</p>
  
  <pre><code>public handleError(err: any, caught: Observable&lt;any&gt;): Observable&lt;any&gt; {
  
    //irrelevant code removed
    this.logger.debug(err);//example of problem 
    return caught;
  }
  </code></pre>
  
  <p>It is invoked like this (example method, but shows the error)</p>
  
  <pre><code>  public makeHttpCall() {
      this.http.get("http://api.exmaple.com/getsomedata")
        .map(r=&gt; r.json())
        .catch(this.handleError);
    }
  </code></pre>
  
  <p>The problem with the above code is that when calling <code>this.logger.debug(err)</code> in the <code>handleError</code> method <code>this</code> no longer refers to the class the http call was made from but references the CatchSubscriber.</p>
  
  <p>See here:
  <a href="https://i.stack.imgur.com/9yCzI.png" rel="nofollow"><img src="https://i.stack.imgur.com/9yCzI.png" alt="example of this"></a></p>
  
  <p>So i change <code>.catch(this.handleError);</code> to <code>.catch(this.handlError.bind(this))</code>;</p>
  
  <p>This works, now when i call <code>this.logger.debug</code> <code>this</code> refers to the correct object. The problem is, the http request gets called over and over and over, 
  see here:</p>
  
  <p><a href="https://i.stack.imgur.com/3pxPj.png" rel="nofollow"><img src="https://i.stack.imgur.com/3pxPj.png" alt="enter image description here"></a></p>
  
  <p>This only happens after applying <code>.bind(this)</code></p>
  
  <p>I can't figure out why this is happening</p>
  
  <p>*********EDIT*********</p>
  
  <p>Change from <code>.catch(handleError)</code> to <code>.catch((a,b)=&gt;handleError(a,b))</code> fixes the reference of <code>this</code> but the http request just gets spammed over and over, but only when the request fails. If the request succeeds it only happens once.</p>