Angular 2 HTTP服务不返回承诺答案

【问题标题】：Angular 2 HTTP Service not returning promiseAngular 2 HTTP服务不返回承诺
【发布时间】：2017-02-21 21:25:33
【问题描述】：

我正在尝试获取 Angular 2 服务来从 HTTP 请求中检索数据并将其作为承诺返回。当我在组件中使用服务时，我从服务传递的数据返回为未定义。

这是我的服务

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

@Injectable()

export class RecordService {
  constructor(private http: Http) {}
  getPosts(): Promise<any> {
    return this.http
      .get('https://jsonplaceholder.typicode.com/posts')
      .toPromise()
      .then((response: Response) => response.json().data)
      .catch(this.handleError);
  }

  private handleError(error: any): Promise<any> {
    console.error('An error occurred', error);
    console.log('ERROR');
    return Promise.reject(error.message || error);
  }
}

这是我的组件

import { Component, OnInit } from '@angular/core';
import { RecordService } from './record.service';
import { Router } from '@angular/router';

@Component({
    selector: 'record-view',
    template: '<h1>This is the record creation page</h1>',
    providers: [RecordService]
})

export class RecordComponent implements OnInit{
    message: string;
    error: any;

    constructor(private recordService: RecordService) { 

    }

    ngOnInit() {
        this.recordService.getPosts()
            .then(data => console.log(data))
            .catch(error => console.log(error));
    }
}

任何想法为什么数据未定义？

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

从 response.json().data 删除 .data 并添加 || {} 如果正文为空

最后：

.then((response: Response) => response.json() || {})

【讨论】：

【解决方案2】：

当您response.json() 时，结果就是您请求响应的确切内容。

在这种情况下，https://jsonplaceholder.typicode.com/posts 返回一个数组（如果在浏览器中打开 url，您将看到该数组）：[{...}, {...}, ...]。

【讨论】：

JSON 也可以是数组。

【解决方案3】：

response.json() 已经将响应的数据对象返回为 JSON，因此请删除 .data 属性访问权限。

【讨论】：

谢谢！这比我预期的要简单得多！