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调用的结果解析为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。

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

1 个答案: