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

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

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

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

本质上，由于您不知道 getMoreData 函数何时 return 来自 http get 方法的值，您将 http get 的 returned 数据传递给回调函数。然后，您可以通过在主控制器中实现回调方法来利用 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.

中 return 编辑的

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

Answer 2

$http 的 .then 方法承诺 returns 一个 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。

---

更新

i read the doc but connecting to the subject the main problem i made is calling it a data instead of a response on the function right?

主要问题是 http promise 不解析 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;
    ...
  });

来自文档：

The response object has these properties:

• data – {string|Object} – The response body transformed with the transform functions.
• status – {number} – HTTP status code of the response.
• headers – {function([headerName])} – Header getter function.
• config – {Object} – The configuration object that was used to generate the request.
• statusText – {string} – HTTP status text of the response.
• xhrStatus – {string} – Status of the XMLHttpRequest (complete, error, timeout or abort).

A response status code between 200 and 299 is considered a success status and will result in the success callback being called. Any response status code outside of that range is considered an error status and will result in the error callback being called. Also, status codes less than -1 are normalized to zero. -1 usually means the request was aborted, e.g. using a config.timeout. Note that if the response is a redirect, XMLHttpRequest will transparently follow it, meaning that the outcome (success or error) will be determined by the final response status code.

— AngularJS $http Service API Reference.

另请注意，-1 状态通常是 CORS problem. The request being blocked because of a violation of Same Origin Policy 的症状。