错误而离子

Question

调用API我很离子和角度很新，我遵循所有的步骤，离子 提供在博客上配置API http://blog.ionic.io/10-minutes-with-ionic-2-calling-an-api/

遵循所有的步骤之后，当我试图安慰结果是存储在变量返回这里未定义 是提供商的代码：

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 
import 'rxjs/add/operator/map'; 
@Injectable() 
export class ApiServiceProvider { 
    link = 'https://randomuser.me/api/'; 
    data :any; 
    constructor(public http: Http) { 
    console.log('Hello ApiServiceProvider Provider'); 

    this.load(); 
    } 
load() { 
    if (this.data) { 
     return Promise.resolve(this.data); 
    } 
    return new Promise(resolve => { 
     this.http.get(this.link) 
      .map(res => res.json()) 
      .subscribe(data => { 
       this.data = data.results; 
       resolve(this.data); 
      }); 
    }); 
    } 
} 

这里是页面的代码/ home.ts

import { Component } from '@angular/core'; 
import { NavController ,ActionSheetController , AlertController } from 'ionic-angular'; 
import { ResultPage } from '../result/result'; 
import { ApiServiceProvider } from '../../providers/api-service/api-service'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html', 
    providers: [ApiServiceProvider] 
}) 
    export class HomePage { 
    users: any; 
    constructor(public navCtrl: NavController, public alertCtrl:AlertController, public actionCtrl:ActionSheetController,public apiProvider:ApiServiceProvider) { 
    this.getUsers(); 
    } 
    getUsers() { 
    this.apiProvider.load() 
    .then(data => { 
     this.users = data; 
    }); 
    console.log(this.users); 
} 

任何帮助表示赞赏。 thanku

Answer 1

内load()的代码是异步的，这意味着它需要一定的时间才能完成。当这些代码正在工作时，下一个语句将被执行。在你的情况，下面的语句是console.log(this.users)。

这导致console.log(this.users)完成load()之前被执行，this.users将为此是undefined。

通过移动console.log内的then回调是这样解决这个问题：

getUsers() { 
    this.apiProvider.load() 
    .then(data => { 
     this.users = data; 
     console.log(this.users); 
    }); 
} 

我建议你如何PROMISES在JavaScript的工作:)