如何在Angular Promise請求中獲取結果數據？

Question

我正在研究Angular，我的代碼有問題。 我試圖通過使用Promise和Service創建一個Ajax請求。 我在ajax訪問中的輸出成功，但是無法在視圖中顯示。

這是我的一些代碼：

<div ng-app="promiseCall">      
    <div ng-controller="promiseCtrl">       
        <button tyle="button" class="btn btn-default" ng-click="promiseCallRequest()">Promise Call</button>     
        <table class="table table-bordered table-hovered">
            <thead>
                <tr>
                    <td class="text-center"><label>ID</label></td>
                    <td class="text-center"><label>TITLE</label></td>
                    <td class="text-center"><label>BODY</label></td>
                    <td class="text-center"><label>CREATED AT</label></td>
                    <td class="text-center"><label>UPDATED AT</label></td>
                </tr>
            </thead>
            <tbody>
                <!-- no output -->
                <tr ng-repeat="item in noteListing">
                    <td>{{ item.id }}</td>
                    <td>{{ item.title }}</td>
                    <td>{{ item.body }}</td>
                    <td>{{ item.created_at }}</td>
                    <td>{{ item.updated_at }}</td>
                </tr>
            </tbody>        
        </table>    
    </div>    
</div>


angular.module('promiseCall',[])
.controller('promiseCtrl', function($scope, $log, noteData) {       
    $scope.promiseCallRequest = function() {            
        var getPromiseCallData = noteData.getNoteData();            
        getPromiseCallData.then({
            function(payload) {                 
                console.log(payload); //no output :(                    
                //$scope.noteListing = payload.data;
            },
            function(errorPayload) {
                $log.error('Failure request in note', errorPayload);
            }
        });             
    }       
}).factory('noteData', function($http, $log, $q) {
    return {
        getNoteData: function() {               
            var deferred = $q.defer();              
            $http.get("<?php echo site_url('tutorial/getAjaxData'); ?>")
            .success(function(data){                    
                /*
                deferred.resolve({
                    id: data.id,
                    title: data.title
                });
                */                  
                //console.log('success'); -- ok                 
            })
            .error(function(msg, code){
                deferred.reject(msg);
                $log.error(msg, code);
                alert('there must be an error!');
            });             
            return deferred.promise;                
        }
    }
});

這是JSON輸出：

{"article_data":[{"id":"1","title":"sample updated 1","body":"sample 1","created_at":"2015-06-15 15:37
:28","updated_at":"2015-06-15 21:38:46"},{"id":"2","title":"sample 2","body":"sample 2","created_at"
:"2015-06-15 15:37:54","updated_at":"2015-06-15 15:37:54"}]}

Answer 1

嘗試刪除{}在getPromiseCallData.then({}); 。

例如

$scope.promiseCallRequest = function() {
    var getPromiseCallData = noteData.getNoteData();

    getPromiseCallData.then(
            function(payload) {

                console.log(payload); //no output :(

                //$scope.noteListing = payload.data;
            },
            function(errorPayload) {
                $log.error('Failure request in note', errorPayload);
            }
    );
};

希望能幫助到你。

Answer 2

試試下面的代碼：

....
getPromiseCallData.then(function(payload) {                 
        console.log(payload); //no output :(                    
        //$scope.noteListing = payload.data;
    }).catch(function(errorPayload) {
        $log.error('Failure request in note', errorPayload);
    });         

...
getNoteData: function() {                       
    return $http.get("<?php echo site_url('tutorial/getAjaxData'); ?>");   
    }

在getNoteData ，您所做的是一個承諾反模式，您已經有了一個承諾，無需為其創建另一個包裝。

編輯：

如果您想記錄服務的成功和錯誤，可以簡單地做，您仍然不需要額外的承諾：

getNoteData: function() {                       
    return $http.get("<?php echo site_url('tutorial/getAjaxData'); ?>").then(function(data){
        //some log
        return data;
    }, function(err){
        // log err
        return err;
    });   
}