Question

我使用控制台日志返回从服务器获取的数据数组，但是当我在html上调用作用域时，我在控制台上得到一个未定义的错误。

app.service('blogpostservice', ['$http', function ($http) {
    this.getMoreData = function (pagecount) {
        return $http.get('/api/posts/' + pagecount);
    }
}]);
app.controller('MainController', ['$scope', 'blogpostservice',
    function ($scope, blogpostservice) {
        $scope.pagec = 1;
        this.getMoreData = function () {
            blogpostservice.getMoreData($scope.pagec).then(function (data) {
                $scope.posts = data;
                console.log($scope.posts);

            })
        }

        this.getMoreData();

    }]);

HTML

 <h1>{{pagec}}</h1>
    <h1>{{posts[1].Title}}</h1>
    <div id="posts" class="grid" ng-repeat="post in posts">
         <div class=" grid-item">
              <div class="blog-post">
                  <img src="https://placeimg.com/400/400/bbc" alt="">
                  <h3>{{post.Title}}</h3>
                  <img ng-src="{{post.Image}}" alt="">         
               </div>
          </div>
    </div>

Answer 1

.then承诺的$http方法返回response个对象，其中data是以下几个属性之一：

app.service('blogpostservice', ['$http', function ($http) {
    this.getMoreData = function (pagecount) {
        return $http.get('/api/posts/' + pagecount);
    }
}]);

app.controller('MainController', ['$scope', 'blogpostservice',
    function ($scope, blogpostservice) {
        $scope.pagec = 1;
        this.getMoreData = function () {
            blogpostservice.getMoreData($scope.pagec)
              ̶.̶t̶h̶e̶n̶(̶f̶u̶n̶c̶t̶i̶o̶n̶ ̶(̶d̶a̶t̶a̶)̶ ̶{̶
              .then(function (response) { 
                ͟v͟a͟r͟ ͟d͟a͟t͟a͟ ͟=͟ ͟r͟e͟s͟p͟o͟n͟s͟e͟.͟d͟a͟t͟a͟;͟
                $scope.posts = data;
                console.log($scope.posts);    
            })
              .catch(function(response) {
                console.log("Error: ", response.status);
                throw response;
            });
        };    
        this.getMoreData();    
    }      
]);

还要确保添加.catch处理程序以记录被拒绝的http请求。

有关详细信息，请参阅AngularJS $http Service API Reference。

更新

我阅读了文档，但是连接到主题我所提出的主要问题是将其称为数据而不是对函数的响应？

主要问题是http承诺无法解析data 。它会解析 response对象。 Data只是response对象的一个属性：

$http(...)
  .then(function onSuccess(response) {
    // Handle success
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    ...
  })
  .catch(function onError(response) {
    // Handle error
    var data = response.data;
    var status = response.status;
    var statusText = response.statusText;
    var headers = response.headers;
    var config = response.config;
    ...
  });

来自文档：

响应对象具有以下属性：


data - {string|Object} - 使用转换函数转换的响应主体。

status - {number} - 响应的HTTP状态代码。

标题 - {function([headerName])} - 标题获取功能。

config - {Object} - 用于生成请求的配置对象。

statusText - {string} - 响应的HTTP状态文本。

xhrStatus - {string} - XMLHttpRequest的状态（complete，error，timeout或abort）。


200到299之间的响应状态代码被视为成功状态，并将导致调用成功回调。任何超出该范围的响应状态代码都被视为错误状态，并将导致调用错误回调。此外，小于-1的状态代码归一化为零。 -1通常意味着请求被中止，例如使用config.timeout。请注意，如果响应是重定向，XMLHttpRequest将透明地跟随它，这意味着结果（成功或错误）将由最终响应状态代码确定。

— AngularJS $http Service API Reference

另请注意，状态为-1通常是CORS problem的症状。该请求因违反Same Origin Policy而被阻止。

Answer 2

使用回调重写getMoreData函数。请参阅下面的代码示例

app.service('blogpostservice', ['$http', function ($http) {
    this.getMoreData = function (pagecount,callback) {
        var result = $http.get('/api/posts/' + pagecount);
        if(callback){
                    callback(result);
        }
    }
}]);

本质上，因为你不确切知道getMoreData函数何时会从http get方法返回一个值，所以你将http get的返回数据传递给一个回调函数。然后，您可以通过在maincontroller中实现回调方法来利用http get中的数据，如下所示：

app.controller('MainController', ['$scope', 'blogpostservice',
    function ($scope, blogpostservice) {
        $scope.pagec = 1;
        this.getMoreData = function () {
            blogpostservice.getMoreData($scope.pagec,function(data){ $scope.posts = data; console.log($scope.posts); })
        }

        this.getMoreData();

    }]);

您还需要确保从$ scope.posts返回一个数组。

请注意，在您的html中，您正在插入{{post}}而不是{{posts}}

使用`.then`方法解析时未定义的$ http数据

2 个答案:

更新