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

Question

我有一个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);
    }

但在我的控制台中我得到了这个：

那么我该如何解决呢？以及为什么我在控制台中看不到“正在测试...”的消息？

Answer 1

您应该在收到回复时解决承诺。

deferred.resolve(data)

理想情况下，您不应该遵循您正在做的方法，当您处理已经返回 Promise 的 $http.get 时，创建新的 Promise 被视为反模式，您可以利用该 Promise。所以基本上你需要清理你的工厂。通过在其上返回$http.get 对象和.then 函数（also .success & .error methods are deprecated）。 then 的第一个函数将在收到数据时被调用，否则错误函数将被调用。基本上为了解决或拒绝承诺，您需要从承诺返回数据，这将调用caller 方法的后续.then 函数。

工厂

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 变量，该变量显然具有promise 对象。所以你应该删除那个赋值，&$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 语句

Answer 2

试试这个：

.success(function(data, status) {
    factory.topAuthorsList = data;
    deffered.resolve(data);
}).error(function(data, status) {
    deffered.reject('There was an error getting data');
});

你必须解决promise才能获取数据。

Answer 3

第一个问题是您立即记录承诺本身，而不是它的分辨率值。第二个是你甚至没有解决getList 中返回的承诺。试试这个：

getList: function() {
    return $http.get('../../data/top_10_authors.json').then(function(response) {
        return response.data;
    }, function() {
        throw 'There was an error getting data';
    });
}

// ...

$scope.listAuthors = null;
topAuthorsFactory.getList().then(function(topAuthorsList) {
    $scope.listAuthors = topAuthorsList;
    console.log('Testing...');
    console.log($scope.listAuthors);
}, function(msg) {
    alert(msg);
});

我注意到您在使用$http 时使用了explicit promise construction antipattern。 $http 已经返回了一个承诺，这比 success 和 error 回调更受欢迎。我改进了您的 getList 函数以使用承诺链。

你可以找到一些关于使用 Promise 的教程：

• An SO answer by myself
• promisejs.org
• toptal.com
• html5rocks.com