Angularjs：承诺

Question

我正在做一些小练习来学习 AngularJS，目前试图了解如何使用 Promise。

在下面的练习中，我试图让一些数据异步。我可以在 console.log 中看到数据，但是 promise 返回 NULL。

• GET /entries 200 OK
• 承诺已解决：null

任何有经验的人都可以给我一些建议，以了解我做错了什么？感谢收看！

angular.module('questions', [])

.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        controller: 'MainCtrl',
        resolve: {
            'MyServiceData': function(EntriesService) {
                return EntriesService.promise;
            }
        }
    })
})

.service('EntriesService', function($http) {

    var entries = null;

    var promise = $http.get('entries').success(function (data) {
        entries = data;
    });

    return {
        promise: promise,
        all: function() {
            return entries;
        }
    };
})

.controller('MainCtrl', ['$scope', 'EntriesService', function($scope, EntriesService) {

  console.log('Promise is resolved: ' + EntriesService.all());

  $scope.title = "Q&A Module";

  $scope.entries = EntriesService.all() || [];

  $scope.addMessage = function() {
    $scope.entries.push({
        author: "myAuthor",
        message: $scope.message
    });
  };

}]);

/******感谢大家迄今为止的帮助** ***/

在听取了@bibs 的建议后，我想出了以下解决方案，使用 ngResource 很清楚：

angular.module('questions', ['ngResource'])

.factory('EntriesService', function($resource){
  return $resource('/entries', {});
})

.controller('MainCtrl', ['$scope', 'EntriesService', function($scope, EntriesService) {

  $scope.title = "Q&A Module";

  $scope.entries = [];

  EntriesService.query(function(response){
    $scope.entries = response;        
  });

  $scope.addMessage = function() {
    $scope.entries.push({
        author: "myAuthor",
        message: $scope.message
    });
  };

}]);

Answer 1

您应该访问回调中的数据。由于entries 可能在数据到达之前为空，因此all() 函数在这种情况下并不是很有用。

试试这个，你应该可以将then()方法链接到同步获取数据。

.service('EntriesService', function ($http) {
    var services = {
        all: function () {
            var promise = $http.get('entries').success(function (data) {
                entries = data;
            }).error(function (response, status, headers, config) {
                //error
            });
            return promise;
        },

        someOtherServices: function(){
            var promise = ....
            return promise;
        }

        return services;
    }
});

$scope.entries = [];
EntriesService.all().then(function(data){
    $scope.entries = data;
});

Answer 2

如果您希望服务器返回的数据立即反映在您的视图中：

.service('EntriesService', function($http) {

    var entries = [];

    var promise = $http.get('entries').success(function (data) {
        for (var i = 0; i < data.length; i++) {
            entries[i] = data[i];
        }
    });

    return {
        promise: promise,
        all: entries
    };
})

.controller('MainCtrl', ['$scope', 'EntriesService', function($scope, EntriesService) {

  $scope.title = "Q&A Module";

  $scope.entries = EntriesService.all;

  $scope.addMessage = function() {
    $scope.entries.push({
        author: "myAuthor",
        message: $scope.message
    });
  };

您可能需要查看$resource 为您执行此操作：http://docs.angularjs.org/api/ngResource.$resource