Question

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

在我尝试控制存储在返回undefined的变量中的结果之后执行所有步骤之后这是提供者代码：

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);
            });
    });
  }
}

这是page / 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);
    });
}

我建议您阅读javascript中PROMISES的工作方式：）

在离子中调用api时出错

1 个答案: