Angular 2 - 带有承诺返回未定义的 Http

Question

我是 Angular2 的新手，我正在尝试从 json 文件中获取数据。为此，我将 Http 与 Promise 一起使用，但是当我从我的 promise 变量中执行 console.log 时，它们返回 Undefined。

post.services.ts

import {Injectable} from '@angular/core';
import { Headers, Http, Response} from '@angular/http'; 
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/toPromise';
import {Post} from '../interfaces/post.interface';
@Injectable()
export class PostService{
    private url = 'myjson.json';
    constructor(private http: Http){ }
    private extractData(res: Response) {
      let body = res.json();
      console.log(body.data);
      return body.data || null;
    }
    getPosts(): Promise<Post[]>{
        return this.http.get(this.url)
            .toPromise()
            .then(this.extractData)
            .catch(this.handleError);
    }   
    private handleError(error: any) {
      console.error('An error occurred', error);
      return Promise.reject(error.message || error);
    }
}

posts.component.js

import { Component, OnInit } from '@angular/core';
import { Router }            from '@angular/router';
import {PostService} from '../services/post.service';
import {Post} from '../interfaces/post.interface';

@Component({
    selector: 'posts',
    template: 
    `
    <h1>Posts</h1>
    <form (submit)="addPost()">
        <label for="title">Title</label>
        <input type="text" [(ngModel)]="title" />
        <br />
        <label for="body">Body</label>
        <input type="text" [(ngModel)]="body" />
        <br />
        <input type="submit" value="Submit" />
    </form>
    <ul>
        <li *ngFor="let post of posts">
            {{1+1}}
            <h3>{{post.title}}</h3>
        </li>
    </ul>
    `,
})

export class PostsComponent implements OnInit{
    private posts:Post[];
    private title:string;
    private body:string;
    private newPost:Object;
    error: any;

    constructor(private _postService:PostService){}
    getPosts(){
        this._postService.getPosts().then(posts => this.posts = posts).catch(error => this.error = error);
    }
    ngOnInit() {        
        this.getPosts();
        console.log(this.posts);
    }
    addPost(){
        this.newPost={
            title:this.title,
            body:this.body
        }
    }
}

post.interface.ts

    export interface Post{
    id: number;
    userId: number;
    title:string;
    body:string;
}

请有人可以帮助我吗？谢谢。

Answer 1

这是因为 Promise / HTTP 请求是异步的。您需要在 HTTP 请求的 Promise 回调中添加 console.log。如果您在此回调之外执行此操作（即在执行请求后立即执行），则响应不再存在，因此您将有一个未定义的。

这是一个示例：

getPosts(){
    this._postService.getPosts().then(posts => {
      this.posts = posts;
      console.log(this.posts); // not null
    }).catch(error => this.error = error);
}

ngOnInit() {        
    this.getPosts();
    console.log(this.posts); // null
}

编辑

我认为问题出在您的extractData 方法中。除非您的 JSON 属性中有 data 属性，否则不应使用 body.data。

    private extractData(res: Response) {
      let body = res.json();
      console.log(body);
      return body || null; // <-------
    }