Keine XHR-Anforderung wird ausgelöst, wenn http-Funktion aufgerufen wird

Question

Ich habe Schwierigkeiten, einen Dienst in angular2 einzurichten, der mit einem REST-Backend kommunizieren sollte.

Ich versuchte, ein minimales Beispiel einzurichten, das Anforderungen an ein Rest-Back-End senden und die Antwort verarbeiten sollte. Der Dienst wird korrekt aufgerufen und meine Konsole zeigt die Nachricht

"Aufruf der Star Wars api";

Das Problem ist, dass ich die xhr Registerkarte im Netzabschnitt der Browser-Entwickler-Tool war die Überprüfung und keine xhr Anfragen abgefeuert werden. Es scheint, als ob die Funktionen extractData und handleError anscheinend nicht aufgerufen werden, obwohl ich sie in map und catch definiert habe.

Fehle ich hier etwas? Warum wird keine xhr-Anfrage gesendet, wenn ich diesen Service anrufe?

Das ist mein Service:

import { Injectable } from '@angular/core'; 
import { Http, Response, Headers } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import { Token } from './token'; 

@Injectable() 
export class UserService { 
    constructor(private http: Http) { 
    } 

    getAll() : Observable<Token[]>{ 
    console.log('calling the star wars api'); 
    let people$ = this.http 
     .get('http://swapi.co/api/people', {headers: this.getHeaders()}) 
     .map(this.extractData) 
     .catch(this.handleError); 
    return people$; 
    } 
    private getHeaders(){ 
    let headers = new Headers(); 
    headers.append('Accept', 'application/json'); 
    return headers; 
    } 


    private extractData(res: Response) { 
    console.log('data extracted!'); 
    let body = res.json(); 
    return body.data || { }; 
    } 
    private handleError (error: Response | any) { 
    // In a real world app, we might use a remote logging infrastructure 
    console.log('an error ocurred'); 
    let errMsg: string; 
    if (error instanceof Response) { 
     const body = error.json() || ''; 
     const err = body.error || JSON.stringify(body); 
     errMsg = `${error.status} - ${error.statusText || ''} ${err}`; 
    } else { 
     errMsg = error.message ? error.message : error.toString(); 
    } 
    console.error(errMsg); 
    return Observable.throw(errMsg); 
    } 

} 

ich das Projekt, Komponenten und Service mit Winkel-cli eingerichtet. Ich benutze angular2 Version 2.4.0

Answer 1

Dank 0x2D9A3 Kommentare konnte ich das Problem lösen.

Das Problem war die Art, wie ich den UserService von meiner Komponente aufgerufen habe.

this.userService.getAll() 

nur der Dienst genannt, aber keine XHR-Anfrage ausgelöst.
Howewer,

this.userService.getAll().subscribe((result) => { 
     if (result) { 
     console.log('successfull xhr request'); 
     } 
} 

Hat die xhr Anfrage erfolgreich nennen, weil dies der Weg ist, wie ein beobachtbares verbraucht werden muss. Diese

ist aus dem Winkel docs

Denken eines beobachtbaren als einen Strom von Ereignissen von einer Quelle veröffentlicht. Um auf Ereignisse in diesem Stream zu warten, abonnieren Sie das Observable. Diese Subskriptionen geben die Aktionen an, die ausgeführt werden sollen, wenn die Webanforderung ein Erfolgsereignis (mit den Daten in der Ereignisnutzlast) oder ein Fehlerereignis (mit dem Fehler in der Nutzlast) erzeugt.