异步加载数据问题 AngularJS 和 Firebase

Asynchronous loading data issue AngularJS and Firebase

本文关键字：Firebase AngularJS 问题 加载 数据 异步      更新时间：2023-09-26

我在将数据从Firebase加载到我的AngularJS工厂和控制器时遇到困难。

基本上我有以下工厂：

.factory('usersList', ['fbutil', function(fbutil) {
   return {
    all: function() {
           return fbutil.syncArray('users');
    },
    get: function(userId) {
        fbutil.syncArray('users').then( function(result) {
            window.alert(result.length) // FIRST ALERT
            var x = 0;
            for (var i = 0, len = result.length; i < len; i++) {
                if (result[i].uid == userId) {
                window.alert("fount id") // SECOND ALERT
                x = i;
                } else {
                window.alert("nope"); // THIRD ALERT
                }
            }
            return result[x];
        }) // then
    } // get
    } // return
 }]); // usersList

我的控制器看起来像：

 .controller('OverviewCtrl', ['$scope', 'fbutil', 'usersList', function($scope, fbutil, usersList) {
    $scope.usersList = usersList.all();
    $scope.testUser = usersList.get("simplelogin:29");
    // OTHER CODE
    };
  }])

在我的 HTML 文件中，当我调用{{usersList}}时，它会产生结果： 

[{"color":"#CC0066","email":"a@a.com","name":"Eva","uid":"simplelogin:27"},{"color":"#009933","email":"b@b.com","name":"Semko","uid":"simplelogin:28"},{"color":"#CC0066","email":"c@c.com","name":"Caroline","uid":"simplelogin:29"}]

但是testUser不会加载，只是在索引文件中显示{{tesUser}}。

有谁知道如何正确处理这个问题？如果不使用 then（在这个例子中也不起作用），我从第一个警报中发现result.length等于 0，这给了我正在处理异步加载的建议。这就是为什么我试图.then()处理它，但显然它不起作用。

在angularjs中处理承诺的最佳方式是使用延迟值，因为它允许您在返回数据之前处理它，同时保持所有内容不阻塞。有了$http我会像这样处理： 

function get(id) {
  var deferred = $q.defer();
  var url = "anUrlwithid";
  $http.get(url).success(function(data, status) {
        logger.logDebug('Successful GET call to ' + url + ''n, results ' + status + ': ' + data);
           deferred.resolve(function(data){
             //do something to your data then return
           });
      }).error(function(data, status) {
        logger.logDebug('Failed GET call to ' + url + ''n, results ' + status + ': ' + data);
        deferred.reject(data);
      });
  return deferred.promise;
}

并在控制器中处理它： 

get(1).then(function(data){//update scope or do something with the data processed});

你应该能够将它与你的fbutil一起使用，因为我认为它会返回一个承诺。希望对你有帮助

有关Q模块的更多详细信息，请点击此处：https://docs.angularjs.org/api/ng/service/$q

PS：记录器是我的个人服务之一，只需使用控制台.log

相关文章：