Question

我是Angular的新手，我不知道如何完成看似简单的任务。我想使用$ http.get检索JSON文件，然后使用该数组中的项创建URL以检索要显示的更多JSON文件。我知道我的代码不正确，但我认为有助于展示我想要完成的任务。

app.factory('posts', ['$http', function($http) {

  var topStor = $http.get('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty');

  var stor = $http.get('https://hacker-news.firebaseio.com/v0/item/' 
    + topStor[0] + '.json?print=pretty');

  return stor

  .success(function(data) {
    return data;
  })
  .error(function(err) {
    return err;
  });
}]);

Answer 1

HTTP requests are async by default. Angular uses a promise pattern to handle the asynchronous response from $http。

var topStor = $http.get(...); // topStor is now the promise and not the value

请求成功时，将在返回的promise上调用success方法。所以从原始请求中获取数组：

$http.get(URL).success(function(data, status) {
  // data is the array from the response
});

然后可以根据从原始请求收到的数据进行嵌套请求。

$http.get(URL).success(function(data, status) {
  $http.get(UTL + data[0]).success(function(innerData, innerStatus) {
    // celebrate with innerData
  }).error(function(errData, errStatus) {});
}).error(function(errData, errStatus) {});

注意：success和error是添加到Angular使用的$q服务的特殊方法。

由于调用$ http函数的返回值是一个promise，你也可以使用then方法注册回调，这些回调将接收一个参数 - 一个表示响应的对象。有关更多详细信息，请参阅API签名并在下面输入信息。

200到299之间的响应状态代码被视为成功状态，并将导致调用成功回调。请注意，如果响应是重定向，XMLHttpRequest将透明地跟随它，这意味着不会为此类响应调用错误回调。

Answer 2

试试这个：

app.factory('posts', ['$http', function($http) {

  var topStor = $http.get('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty');
  return topStor
     .success(function(){
          var stor = $http.get('https://hacker-news.firebaseio.com/v0/item/' 
    + topStor[0] + '.json?print=pretty');

        return stor

         .success(function(data) {
            return data;
         })
         .error(function(err) {
            return err;
         });
      })
      .error(function(){

      });  
 }]);

Answer 3

你可以在这里使用$ q。返回使用您所追踪的数据解决的承诺：

    app.factory('posts', ['$http', '$q', function($http, $q) {

      function getStory() {
        var deferred = $q.defer();

        $http.get('https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty')
        .success(function(data, status, headers, config) {
          $http.get('https://hacker-news.firebaseio.com/v0/item/' 
            + data[0] + '.json?print=pretty')
            .success(function (data, status, headers, config) {
              deferred.resolve(data);
            })
            .error(function(data, status, headers, config) {
              deferred.reject('There was a problem getting the story');
            });
        })
        .error(function(data, status, headers, config) {
          deferred.reject('There was a problem getting the top stories');
        });

        return deferred.promise;
      }

      return {
        getStory: getStory
      }
    }]);

基于Angular Service中的另一个JSON检索JSON

3 个答案: