使用http攔截器（在Ionic 2中）發送重複http請求

Question

TL; DR;

爲什麼預訂至可觀察在HTTP攔截器產生重複HTTP請求到服務器？

示例代碼：

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; 
    } 

全部細節：

我使用HTTP攔截服務於我的離子2項目在全球範圍內發現錯誤，身份驗證，以及更多...

但是這樣做，我看到了對服務器的重複http請求。

我有一個小的測試應用程序從一個空白離子2模板開始：

，清楚地顯示在Firebug的問題：

• 第一個請求（它的確定，單）如果使用GET按鈕。
• 第二個請求（重複）使用「Get with interceptor」按鈕。

同時，訂閱部分中的代碼只執行一次，因爲它應該。

的home.ts代碼如下：

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= "???"; 
    } 

} 

Answer 1

它，因爲你並沒有真正攔截。您只需要詢問兩次。

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 
    } 

然後你再訂閱doGetWithInterceptor()到你的http請求。

如果你想記錄呼叫的細節，你可以使用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. 
     }); 
    } 

然後調用你的doGetWithInterceptor()