Angular 从 json api 返回空白 response.data答案

【问题标题】：Angular returns blank response.data from json apiAngular 从 json api 返回空白 response.data
【发布时间】：2018-06-13 14:23:01
【问题描述】：

ng-repeat 返回空白，我是 Angular 的新手。我检查了错误，但没有发现。我真的不知道这里出了什么问题。

(function() {

  var app = angular.module("testApp", []);

  app.controller("MainController", function($scope, $http) {
   $scope.search = function(username) {
  $http.get("https://api.github.com/users/" + username)
    .then(onUserComplete, onError);

  $http.get($scope.user.repos)
    .then(onRepos, onReposError);
};

var onUserComplete = function(response) {
  $scope.user = response.data;
};

var onRepos = function(response) {
  $scope.repos = reponse.data;
};
  });

}());

下面是 HTML，我想在 GitHub 上显示特定用户的存储库：

  <table>
    <thead>
      <tr>
       <th>Name</th>
       <th>Stars</th>
       <th>Language</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="repo in repos">
        <td>{{repo.name}}</td>
        <td>{{repo.stargazers_count }}</td>
        <td>{{repo.language}}</td>
      </tr>
    </tbody>
  </table>

【问题讨论】：

谢谢@rrd 我不知道他们是不同的

标签： javascript angularjs promise

【解决方案1】：

问题在于您正在执行的 HTTP 调用是异步的，因此当您执行第二个时，您还没有用户。您必须连接承诺。如果您不打算在任何地方使用用户，仅用于第二次调用，那么您可以简化代码：

$http.get("https://api.github.com/users/" + username)
     .then(function(response) {
         return $http.get(response.data.repos_url);
     })
     .then(function(response) {
         $scope.repos = reponse.data;
     }, 
     onError);

第一个then是在第一个get成功的时候执行的，所以我调用第二个get。然后第二个then在第二个HTTP调用成功时执行。这样我们就连接了两个 Promise。

我在JSFiddle写了一个完整的例子。

但是我已经在这里复制了完整的代码，所以它可能对其他人有用：

AngularJS

var myModule = angular.module('myModule', []);

myModule.controller('myController', ['$http', function ($http) {
    var $ctrl = this;
    $ctrl.username = null;
    $ctrl.repos = null;


    $ctrl.getRepositoryData = function () {   
        $ctrl.repos = null;
        $http.get('https://api.github.com/users/' + $ctrl.username)
             .then(function(response) {
                 return $http.get(response.data.repos_url);
             })
             .then(function(response) {
                 $ctrl.repos = response.data;
             }, 
             function (error) {
                 console.log('Error happened:', error);
             });
    };
}]);

HTML

<div ng-app="myModule">
    <div ng-controller="myController as ctrl">
        <div>
            <input type="text" ng-model="ctrl.username"/>
            <button type="button" ng-click="ctrl.getRepositoryData()">
                Get Repos
            </button>
            <p>User repositories: {{ctrl.repos}}</p>
        </div>
   </div>
</div>

【讨论】：

对不起，我不知道连接承诺意味着什么。一个例子将不胜感激
我的回答就是一个例子
仍然无法让它工作@Eduardo，谢谢你的帮助。也许更多的阅读会帮助我更好地理解你的贡献。谢谢
@DunkuMajor 我已经用一个完整的功能示例更新了我的答案。在 JSFiddle 上运行它并查看代码，以便您了解它是如何工作的。当然，请阅读 Promise 的工作原理，因为 $http.get 返回一个 Promise。
这点现在很清楚了。我遵循了推理，这是可以理解的。非常感谢@Eduardo。

【解决方案2】：

尝试调用 $http.get($scope.user.repos) .then(onRepos, onReposError);在 onUserComplete 函数内部。 Angular http 模块方法是 async 。因此，在进行 get 或 post 调用后，angular 会忘记它并继续执行。

【讨论】：