在Angular Service中基於另一個JSON檢索JSON

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請求是異步的。 Angular使用一個Promise模式來處理來自$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函數的返回值是一個承諾，因此您還可以使用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
      }
    }]);