javascript - 无法访问返回的 promise

Question

AngularJS 新手。

我正在尝试通过 $http 和 $q 从 JSON 文件中获取数据并将数据附加到 View 。

但是我做不到。只创建了 3 个 li 元素，而 JSON 数据有 6 条记录。

我想使用 promise 来做到这一点，但它不起作用。

这Plunker演示了这个问题。

HTML :

<div class="container" ng-controller="dataCont">        
    <input type="text" name="text-field" id="text-field"/>
    <ul>
        <li ng-repeat="msg in messages">                
            {{ msg.name }}
        </li>
    </ul>
</div>

App.js :

"use strict";
var App = angular.module('app', []);

App.controller('dataCont', function($scope, messageData) {
    $scope.messages = messageData.getMessageData();
    // console.log($scope.messages);
})

服务.js:

App.factory('messageData', function($http, $q) {
    return {
        getMessageData: function() {
            var deferred = $q.defer();

            $http({method: 'GET', url: 'data.json'})
            .success(function(data, status, headers, config) {
                deferred.resolve(data);
            })
            .error(function(data, status, headers, config) {
                deferred.reject(status);
            })

            return deferred.promise;
        }
    }
});

提前致谢。

Answer 1

您需要使用 then() 访问已解析 promise 中的数据...

messageData.getMessageData().then(function (data) {
    $scope.messages = data;
}, function (errorStatus) {
    $scope.errorStatus = errorStatus;
});

您还可以通过使用 $http... 返回的 promise 来稍微简化服务

App.factory('messageData', function($http) {
    return {
        getMessageData: function() {
            return $http({method: 'GET', url: 'data.json'})
                .then(function(response) {
                    return response.data;
                }, function(errorResponse) {
                    throw errorResponse.status;
                });
        }
    }
});