http - 如何在 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 自己的 tutorial就此事。但无论出于何种原因，当我在我的组件中调用它时，它只返回一个没有 JSON 数据的可观察对象。我错过了什么？

Answer 1

在这个方法中:

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

在第一行，您将 API 调用的结果作为 JSON 解析为 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();
}

这应该能让事情正常进行。这是一个 working plunker .