等待 angularJS 中来自 firebase 的响应

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) 然后将 then 添加到您的函数中

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

您还可以将 defer .reject 添加到 return err 并在代码的其他函数中捕获它

例如

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

您在屏幕上看不到任何内容，因为您正在尝试从异步函数 return。

此外，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 的响应

Waiting for response from firebase in angularJS

angularjs

firebase

firebase-realtime-database