Verwenden Versprechen für Header in Angular 2 HTTP-Client-Wrapper

Question

Ich habe Probleme zu verstehen, wie diese Angular 2 HTTP-Wrapper Refactoring, so dass meine Header aus dem Speicher vor der Anforderung geladen werden.

ich derzeit Laden den Header im Konstruktor, aber manchmal dann aus dem Speicher Retrieval nicht abgeschlossen, bevor die Anforderung erlischt. Bis jetzt hatte ich noch kein Glück, die Header-Formation in ein Versprechen zu verwandeln, aber trotzdem das observable Request-Objekt zurückzugeben. Stattdessen wurde das Versprechen zurückgegeben, welches ich dann() zum Observable bekommen musste.

Jede Führung ist willkommen!

import { Injectable } from '@angular/core'; 
import { Http, Headers, Response, HTTP_PROVIDERS } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import { Storage, SqlStorage } from 'ionic-angular'; 


@Injectable() 
export class HttpClient { 
    headers : Headers; 

    constructor(private http: Http) { 

    this.headers = new Headers({ 
     'Accept': 'application/json', 
     'Content-Type': 'application/json; charset=utf-8' 
    }) 

    // Add auth token to headers 
    let storage = new Storage(SqlStorage); 

    storage.get("user").then(
     (u) => { 
     if(u){ 
      let user = JSON.parse(u); 
      this.headers.append('X-User-Email', user.email); 
      this.headers.append('X-User-Token', user.authentication_token); 
     }else{ 
      console.log("User not found in storage.") 
     } 
     } 
    ) 
    } 

    get(url) { 
    console.log("GET headers: ", this.headers) 

    // I want to add a promise here to load the header data 
    // from storage before sending this request. I still 
    // want to return this same Observable http request. 

    return this.http.get(url, { 
     headers: this.headers 
    }) 
    } 
} 

EDIT

Hier ist mein Versuch, die 'Promise<Observable<Response>>' kehrt statt Observable:

import { Injectable } from '@angular/core'; 
import { Http, Headers, Response, HTTP_PROVIDERS } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import { Storage, SqlStorage } from 'ionic-angular'; 

/* 
    A custom wrapper to include headers for API authentication. 
    Header info is stored in local storage. 
*/ 

@Injectable() 
export class HttpClient { 

    constructor(private http: Http) { 
    } 

    buildHeaders(){ 
    let headers = new Headers({ 
     'Accept': 'application/json', 
     'Content-Type': 'application/json; charset=utf-8' 
    }) 
    let storage = new Storage(SqlStorage); 

    return storage.get("user").then(
     (u) => { 
     if(u){ 
      let user = JSON.parse(u); 
      headers.append('X-User-Email', user.email); 
      headers.append('X-User-Token', user.authentication_token); 
      return headers; 
     } 
     } 
    ) 
    } 

    get(url) { 
    return this.buildHeaders().then(
     (headers) => { 
     return this.http.get(url, { 
      headers: headers 
     }) 
     } 
    ) 
    } 
} 

Hier wird der Anrufer ist, die Fehler zu erhalten:

this.http.get("http://localhost:3000/confirm_auth_token") 
.subscribe(
    data => console.log(data) 
) 

Welche i-Ergebnisse n:

Error TS2339: Property 'subscribe' does not exist on type 'Promise<Observable<Response>>'. 

Wie kann ich "auspacken", die innerhalb der get() -Methode des Httpclient versprechen?

Answer 1

Ihre HttpClient.get Funktion kehrt ein Promise, so benötigen Sie einen then auf die Observable<Response> zugreifen, wenn die Promise löst:

this.http 
    .get("http://localhost:3000/confirm_auth_token") 
    .then((observable) => { 
     observable.subscribe((response) => { console.log(response.text()); }); // or response.json() or whatever 
    }); 

Wenn Sie ein Observable von Ihrer get Funktion zurückkehren wollen, können Sie wie neu anordnen können Dinge dies:

get(url) { 
    return Observable 
     .fromPromise(this.buildHeaders()) 
     .switchMap((headers) => this.http.get(url, { headers: headers })); 
} 

Ihr get Anruf wäre dann so etwas wie dieses:

this.http 
    .get("http://localhost:3000/confirm_auth_token") 
    .subscribe(response => { console.log(response.text()); }); // or response.json() or whatever