角度工厂中的一次异步数据加载 - 约定?

时间:2014-09-17 15:03:49

标签: javascript angularjs

我正在编写一个简单的应用程序来显示(只读)员工信息。我想只从JSON加载一次信息。不确定角度工厂的惯例是什么。

我知道一个解决方案是将jSON文件放在javascript文件中并将其加载为js文件(但我希望将文件保留为JSON)。

我想我也可以将http调用包装在一个promise中,并相应地更改返回值。

有没有办法在不改变回报的情况下这样做?阻止员工负担?

 .factory('Employees', ['$http', function($http) {

  var employees = $http.get('res/employees.json').then(function(response){
        return response.data;  // This is async so won't return right away
    });

  // This way works (since not async)
  // var employees = [
  //   {
  //       "id": 232,
  //       "name": "Bob"
  //   }];

  return {
    all: function() {
      return employees; // This will return empty before employees is loaded
    }
  }
}]);

2 个答案:

答案 0 :(得分:4)

这是promise模式的错误实现。您的“员工”服务应返回已初始化的承诺,然后在后续请求时返回相同的已解决承诺。像这样:

.factory('Employees', ['$q', '$http', function($q, $http) {

  var _deferred = $q.defer();

  $http.get('res/employees.json')
        .success(function(data, status, headers, config) {
           // this callback will be called asynchronously
           // when the response is available

           _deferred.resolve(data);

         })
        .error(function(data, status, headers, config) {
           // called asynchronously if an error occurs
           // or server returns response with an error status.

           _deferred.reject("Error");
        });
     };

  return {
    getEmployees: function(){
      return _deferred.promise;
    }
  }

}]);


.controller('MyController', ['$scope', 'Employees', function($scope, Employees) {
	
	$scope.employees = [];

	$scope.employees = Employees.getEmployees();

}]);

$ scope.employees最初将是一个空数组,直到解析了promise。此外,此代码没有错误恢复。

答案 1 :(得分:1)

可能适用于您的一种可能解决方案是使用附加的valueservice获取的数据来获取数据和 manually bootstrap 您的应用程序。已经为此类问题构建了解决方案,一个称为angular-deferred-bootstrap,另一个是我一个月前制作的 solution 。两者都在使用angular.bootstrap()手动引导应用程序时使用AngularJS生命周期。请注意,当您手动引导应用程序时,需要删除ng-app指令。