Wie wird ein API-Aufruf in Angular 2 durchgeführt?

Question

Es gibt schon viele Ressourcen da draußen, aber ich konnte keine finden, die aus dem einen oder anderen Grund funktioniert. Nehmen wir ein generisches Beispiel: Ich möchte die Antwort von http://swapi.co/api/people bekommen, die eine Liste von Leuten aus Star Wars sein wird.

import {Injectable } from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import {Observable} from 'rxjs/Observable'; 

import 'rxjs/add/operator/map'; 

@Injectable() 
export class OombaDataService { 
    constructor(private http: Http) {} 
    private usersUrl = 'http://swapi.co/api/people/'; 

    getData() { 
     return this.http.get(this.usersUrl) 
     .map(this.extractData) 
    } 

    private extractData(res: Response) { 
     let body = res.json(); 
     return body.data || { }; 
    } 
    private handleError (error: any) { 
     // In a real world app, we might use a remote logging infrastructure 
     // We'd also dig deeper into the error to get a better message 
     let errMsg = (error.message) ? error.message : 
        error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
     console.error(errMsg); // log to console instead 
     return Observable.throw(errMsg); 
    } 
} 

Eine Menge davon sollte korrekt sein, da es basiert auf Angular eigenen tutorial über die Angelegenheit. Aber aus welchem ​​Grund auch immer, wenn ich es in meinen Komponenten anrufe, gibt es nur ein beobachtbares Objekt ohne die JSON-Daten zurück. Was vermisse ich?

Answer 1

Bei dieser Methode:

private extractData(res: Response) { 
    let body = res.json(); 
    return body.data || { }; 
} 

In der ersten Zeile, analysieren Sie das Ergebnis des API-Aufrufs als JSON in ein JavaScript-Objekt. Dann geben Sie die Eigenschaft data dieses Objekts zurück, wenn es existiert. Wenn es nicht existiert, geben Sie ein leeres Objekt zurück ({ }).

Die Sache ist die, dass die API bei http://swapi.co/api/people/ keine Antwort bringen, die eine data Eigenschaft enthält, was bedeutet, dass die extractData() Verfahren immer eine beobachtbare eines leeren Objekt zurückkehr ({ }).

Abgesehen davon, das getData() wirklich gibt ein Observable, so seinen Wert zu erhalten, müssen Sie ihn abonnieren, wie zum Beispiel:

@Component({ 
    ... 
    providers: [OombaDataService] 
}) 
export class SomeComponent { 

    constructor(oombaDataService: OombaDataService) { 
    oombaDataService.getData().subscribe(
     x => { 
      console.log("VALUE RECEIVED: ",x); 
     }, 
     x => { 
      console.log("ERROR: ",x); 
     }, 
    () => { 
      console.log("Completed"); 
     } 
    ); 
    } 

} 

Und da, wie gesagt, dass die API Antwort hat keine .data Eigenschaft darin, sollte die extractData() wirklich sein (zumindest bis Sie herausfinden, was Sie wollen):

private extractData(res: Response) { 
    return res.json(); 
} 

das Arbeits Dinge sollten. Hier ist ein working plunker.