Как сделать вызов API в Angular 2?

Question

Есть уже много ресурсов, но я не смог найти тот, который работает по той или иной причине. Возьмем общий пример: я хочу получить ответ от http://swapi.co/api/people, в котором будет список людей из «Звездных войн».

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

Много это должно быть правильным, так как она основана на Угловое собственного tutorial по этому вопросу. Но по какой-либо причине, когда я называю это в своих компонентах, он просто возвращает наблюдаемый объект без данных JSON. Что мне не хватает?

Answer 1

В этом методе:

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

В первой строке разбора результат вызова API как JSON в объект JavaScript. Затем вы возвращаете свойство data этого объекта, если оно существует. Если он не существует, вы возвращаете пустой объект ({ }).

Дело в том, что API в http://swapi.co/api/people/ не приносит ответ, который содержит data свойства, которое означает, что метод extractData() всегда возвращается наблюдаемый пустой объект ({ }).

Кроме того, getData() действительно возвращает Observable, поэтому, чтобы получить его значение, вы должны подписаться на него, такие как:

@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"); 
     } 
    ); 
    } 

} 

И, поскольку, как было сказано, реакция этого API, не имеет какого-либо .data свойства в нем, extractData() действительно должно быть (по крайней мере, пока вы не выяснить, что вы хотите):

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

Это должно все заработало. Вот working plunker.