錯誤而離子

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的工作:)