如何在Angular 2中进行API调用？

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

其中很多都应该是正确的,因为它基于Angular自己的关于此事的教程.但无论出于何种原因,当我在我的组件中调用它时,它只返回一个没有JSON数据的可观察对象.我错过了什么？

Answer 1

在这种方法:

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

在第一行,您将API调用的结果解析为JavaScript对象.然后返回该data对象的属性(如果存在).如果它不存在,则返回一个空对象({ }).

问题是http://swapi.co/api/people/上的API 没有带来包含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();
}

那会让事情变得有效.这是一个工作的plunker.