如何在Angular promise请求中获取结果数据

How to get result data in Angular promise request?

本文关键字：获取结果数据请求 promise Angular 更新时间：2023-09-26

我正在学习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"}]}

尝试删除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);
            }
    );
};

希望能有所帮助。

尝试以下代码：

....
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中，您所做的是一个promise反模式，您已经有了promise，不需要为它创建另一个包装器。

编辑：

如果你想记录服务的成功和错误，你可以简单地做，你仍然不需要额外的承诺：

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