Angularjs：承諾

Question

我正在做一些小練習來學習AngularJS，試圖了解如何使用promises。

在下面的練習中，我試圖獲取一些異步數據。 我可以在console.log中看到數據但是promise返回NULL。

• GET /條目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