Angular 2 - Http with promise return Undefined - Angular 2 - Http with promise return Undefined 小贝子编程网

我是Angular2的新手，正在尝试从json文件中获取数据。为此，我使用了带有Promise的Http，但当我从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
        }
    }
}

后接口.ts

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

有人能帮我吗？非常感谢。

这是因为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; // <-------
    }

Angular 2 - Http with promise return Undefined

相关内容

最新更新

热门标签：