Angular 4从Firebase获取数据返回undefined问题求助

我来帮你搞定这个问题！你遇到的getUserData()返回undefined的情况，核心原因是异步操作的处理逻辑有误，咱们一步步拆解解决：

Firebase的once('value')是异步方法——它会在后台请求数据，等数据拿到后才会执行then里的回调函数。但你原来的getUserData()函数在这个异步请求完成前就已经执行结束了，根本没来得及返回数据，所以默认返回undefined。

咱们需要让getUserData()返回一个Promise，这样调用它的地方就能等待异步操作完成后拿到数据。

修复后的服务代码 #

getUserData(): Promise<any> {
  // 直接返回Firebase请求的Promise，把异步结果传递出去
  return firebase.database().ref('/users/').once('value').then(function(snapshot) {
    console.log("service UserData = " + JSON.stringify(snapshot.val()) );
    return snapshot.val();
  });
}

主页里的正确调用方式 #

方式1：用then链式调用 #

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { UserDataProvider } from '../../providers/user-data/user-data';
import * as firebase from 'firebase';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  userData: any;

  constructor(public navCtrl: NavController, private userDataProvider: UserDataProvider) {
    this.loadUserData();
  }

  loadUserData() {
    this.userDataProvider.getUserData()
      .then(data => {
        this.userData = data;
        console.log("Home Page UserData = ", this.userData);
      })
      .catch(error => {
        console.error("获取用户数据失败：", error);
      });
  }
}

方式2：用async/await（更简洁直观） #

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { UserDataProvider } from '../../providers/user-data/user-data';
import * as firebase from 'firebase';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  userData: any;

  constructor(public navCtrl: NavController, private userDataProvider: UserDataProvider) {
    this.loadUserData();
  }

  async loadUserData() {
    try {
      // await会等待Promise完成，直接拿到返回的数据
      this.userData = await this.userDataProvider.getUserData();
      console.log("Home Page UserData = ", this.userData);
    } catch (error) {
      console.error("获取用户数据失败：", error);
    }
  }
}

异步操作（比如网络请求、数据库查询）都不能直接在同步函数里返回结果，必须通过Promise或者回调来传递结果。async/await是ES6+的语法，能让异步代码看起来像同步代码一样好读，推荐使用这种方式。

内容的提问来源于stack exchange，提问作者malik_alrawahi