CODEWITHSUNDEEP
javascripttypescriptionic2observable
jrierab
jrierab

Reputation: 615

Duplicate http requests sent when using http interceptor (in Ionic 2)

TL;DR;

Why subscribing to an Observable in an http interceptor produces duplicate http requests to server?

Sample code:

  doGetWithInterceptor() {
    console.log("Http get with interceptor -> 2 http calls ?? Why?");
    this.http_interceptor_get("http://ip.jsontest.com/").subscribe(data => {
      console.log("But only one block of data received:", data);
      this.result= data.ip;
    });
  }

  http_interceptor_get(url : string)  {
    let req= this.http.get(url).map(res => res.json());

    req.subscribe((data) => {
      console.log("[HttpInterceptor]");
    });

    return req;
  }

Full details:

I use an http interceptor service in my Ionic 2 project to globally detect errors, authentication, and more...

But doing so, I am seeing duplicate http requests to the server.

I have an small test App starting from a blank Ionic 2 template:

Test App

Which clearly shows the problem in Firebug:

Meanwhile, the code in the subscription part is executed only once, as it should.

Interceptor produces 2 http requests

The home.ts code is as follows:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  result : string = "???";

  constructor(public navCtrl: NavController, public http: Http) {
  }

  http_get(url : string)  {
    return this.http.get(url).map(res => res.json());
  }

  http_interceptor_get(url : string)  {
    let req= this.http.get(url).map(res => res.json());

    req.subscribe((data) => {
      console.log("[HttpInterceptor]");
    });

    return req;
  }

  doGet() {
    console.log("Normal http get -> 1 http call");
    this.http_get("http://ip.jsontest.com/").subscribe(data => {
      console.log("One block of data received:", data);
      this.result= data.ip;
    });
  }

  doGetWithInterceptor() {
    console.log("Http get with interceptor -> 2 http calls ?? Why?");
    this.http_interceptor_get("http://ip.jsontest.com/").subscribe(data => {
      console.log("But only one block of data received:", data);
      this.result= data.ip;
    });
  }

  doClearResult() {
    this.result= "???";
  }

}

Upvotes: 0

Views: 1877

Answers (1)

Suraj Rao
Suraj Rao

Reputation: 29614

Its because you are not really intercepting. You are simply subscirbing to the request twice.

http_interceptor_get(url : string)  {
    let req= this.http.get(url).map(res => res.json());

    req.subscribe((data) => {   //1st subscription - 1st call
      console.log("[HttpInterceptor]");
    });

    return req; //return original request
  }

Then you are subscribing again in doGetWithInterceptor() to your http req.

If you want to log details of call, you can use do().

 http_interceptor_get(url : string)  {
            //return http call
  return this.http.get(url).map(res => res.json())
        .do(data=>{
        //do checks.
        return data; //be sure to return data so it is passed on to subscription.
         });
    }

Then call in your doGetWithInterceptor()

Upvotes: 1

Related Questions