Question

我是firebase的新手，我正在使用新的控制台来演示保存，从firebase实时数据库中检索数据。在检索数据时，我将其连接到模型，以列表格式在屏幕上显示。但屏幕没有显示任何内容。我想使用promise等到我从firebase数据库获取数据。

app.factory('Authentication', ['$rootScope', function($rootScope) {
return {
     getUsers: function() {
        firebase.database().ref('/userInfo').on('value', function (snapshot) {
           return snapshot.val();
        });
     }
   }
}

如何使用promise等待获取数据。

app.controller('myController', function($scope, $rootScope, Authentication) {
   $scope.userData = Authentication.getUsers();
}

Answer 1

首先你应该安装q或下载并添加脚本

1）npm install q --save

2）将此添加到您的应用模块，例如添加'q'

3）将q添加到您的工厂并使用deffer

app.factory('Authentication', ['$rootScope','q', function($rootScope, q) {
return {
     getUsers: function() {
        var defer = q.defer();
        firebase.database().ref('/userInfo').on('value', function (snapshot) { //assuming you get snapshot value from the db
           defer.resolve(snapshot.val());
           //return snapshot.val();
        });
     return defer.promise;
     }
   }
}

4）然后将其添加到您的函数

app.controller('myController', function($scope, $rootScope, Authentication) {
   Authentication.getUsers().then(function(snap){
       $scope.userData = snap;
   });
}

您还可以添加延迟.reject以返回错误，并在代码中的其他函数中捕获它

例如

app.factory('Authentication', ['$rootScope','q', function($rootScope, q) {
return {
     getUsers: function() {
        var defer = q.defer();
        firebase.database().ref('/userInfo').on('value', function (snapshot) {
           if(!snapshot.val()){
                defer.reject('err no data');
           }else{
                defer.resolve(snapshot.val());
                //return snapshot.val();
           }
        });
     return defer.promise;
     }
   }
}

在这里你做

app.controller('myController', function($scope, $rootScope, Authentication) {
   Authentication.getUsers().then(function(snap){
       $scope.userData = snap;
   }, function(err){
       //do something with the error
   });
}

希望它有所帮助

注意

你知道js是异步的。因此，当我们需要等待响应时，需要时间js继续做他的事情。所以我们需要承诺确保在他们进入下一步之前得到回应（我们希望他去）

Javascript和AngularJS世界中的承诺保证我们将在未来的某个时刻获得行动的结果; 这就是解决和拒绝

了解更多信息阅读本文

promise

希望它能够解决问题

Answer 2

<强> Use AngularFire

您在屏幕上看不到任何内容，因为您尝试从异步功能返回。

此外，Angular使用脏检查系统来判断值何时发生更改并重新呈现屏幕。 Firebase库本身无法触发此脏检查系统。这就是您应该使用官方支持的AngularFire库的原因。

// Initialize Firebase
var config = {
  apiKey: "<your-api-key>",
  authDomain: "<your-auth-domain>",
  databaseURL: "https://<your-database-url>.firebaseio.com",
  storageBucket: "",
};
firebase.initializeApp(config);
angular.module('app', ['firebase'])
  .constant('FirebaseUrl', config.databaseURL)
  .controller('MyCtrl', MyController)
  .config(function($firebaseRefProvider, FirebaseUrl) {
     $firebaseRefProvider.registerUrl(FirebaseUrl);
  });

function MyController($scope, $firebaseRef, $firebaseArray) {
  var usersRef = $firebaseRef.child('userInfo');
  $scope.users = $firebaseArray(usersRef);
}

在angularJS中等待firebase的响应

2 个答案: