使用Promise从Angularjs中的JSON文件读取数据

我有一个factory在获取json文件时向我提供的承诺:

myapp.factory('topAuthorsFactory', function($http, $q) {
    var factory = {
        topAuthorsList: false,
        getList: function() {
            var deffered = $q.defer();
            $http.get('../../data/top_10_authors.json')
                .success(function(data, status) {
                    factory.topAuthorsList = data;
                }).error(function(data, status) {
                    deffered.reject('There was an error getting data');
                });
            return deffered.promise;
        }
    };
    return factory;
});

在我的controller我想要json在我的控制台上显示文件的内容如下:

myapp.controller('topAuthorsController', function($scope, topAuthorsFactory) {


  $scope.listAuthors = topAuthorsFactory.getList().then(function(topAuthorsList) {

      $scope.listAuthors = topAuthorsList;
      console.log('Testing...');

  }, function(msg) {
    alert(msg);
  });

  console.log($scope.listAuthors);
    }

但是在我的控制台中,我得到了这个:

那我怎么解决这个问题呢？为什么我在控制台中看不到"测试......"的消息？

收到回复后,您应该解决承诺.

deferred.resolve(data)

理想情况下,您不应该遵循您正在进行的方法,创建新的承诺被视为反模式,而您正在处理$http.get已经返回承诺本身,您可以利用该承诺.所以基本上你需要清理你的工厂.通过返回$http.get对象&.then功能在它,(也.success&.error方法已被弃用).当收到数据时,第一个函数将被调用,否则错误函数将被调用.基本上对于解析或拒绝承诺,您需要从promise返回数据,这将调用方法的后续.then函数caller.

厂

myapp.factory('topAuthorsFactory', function($http) {
  var factory = {
    topAuthorsList: false,
    getList: function() {
      //returning promise
      return $http.get('../../data/top_10_authors.json')
        .then(function(response) {
           var data = response.data;
           factory.topAuthorsList = data;
           //returning data to resolving promise
           return data;
        }, function(error) {
            return 'There was an error getting data';
        });
    }
  };
  return factory;
});

编辑

基本上你已经指定工厂方法调用topAuthorsFactory.getList()到$scope.listAuthors这里没有所需的方法,然后打印$scope.listAuthors变量,它显然有希望的对象.因此,您应该删除该分配,$scope.listAuthors并且将从该.then功能分配值.

调节器

//remove $scope.listAuthors assignment which is incorrect.
topAuthorsFactory.getList().then(function(topAuthorsList) {
   $scope.listAuthors = topAuthorsList;
   console.log('Testing...');

}, function(msg) {
    alert(msg);
});

它的异步将在异步调用完成时评估其功能.console.log声明