如何在 Angular 中进行 http 请求，并具有返回 Json 的所有元素或仅返回一个元素的函数？答案

【问题标题】：How can I do http request in Angular, and have functions that returns all elements of Json or just one?如何在 Angular 中进行 http 请求，并具有返回 Json 的所有元素或仅返回一个元素的函数？
【发布时间】：2016-01-06 11:27:12
【问题描述】：

我是 Angular 和 Ionic 的新手，我想建立一个从 googleapis 获取一个 Json 的工厂，并包含两个函数，一个返回所有元素，另一个返回参数中传递索引的元素。

我正在尝试这种方式：

工厂：

angular.module('starter.services', [])

.factory('Noticias', function($http,$q) {
  var deferred = $q.defer();                
        $http.get("http://ajax.googleapis.com/ajax/services/feed/load", { params: { "v": "1.0", "q": "http://www.furg.br/bin/rss/noticias.php", "num":"10" } })
          .success(function(data) {
              entries = data.responseData.feed.entries;
              deferred.resolve(entries);
          })
          .error(function(data) {
              console.log("ERROR: " + data);
          });

  var noticias =  deferred.promise;
  console.log(noticias);
  return {
    all: function() {
      return noticias;
    },
    remove: function(noticia) {
      noticias.splice(noticias.indexOf(noticia), 1);
    },
    get: function(noticiaId) {
      for (var i = 0; i < noticias.length; i++) {
        if (noticias[i].id === parseInt(noticiaId)) {
          return noticias[i];
        }
      }
      return null;
    }
  };
});

我在控制台中得到了这个，但我只想要控制器上的“值”。

Promise {$$state: Object, then: function, catch: function, finally: function}$$state: Object
status: 1
value: Array[10]
0: Object
1: Object
2: Object
3: Object
4: Object
5: Object
6: Object
7: Object
8: Object
9: Object
length: 10
__proto__: Array[0]
__proto__: Object
__proto__: Object

【问题讨论】：

显示用于工厂请求的控制器代码...您记录的是您创建的承诺。需要对数据使用 promise 回调

标签： json angularjs promise angular-promise angular-http

【解决方案1】：

noticias 是一个承诺。你所有的方法都像使用数组一样使用它。它不是。这是一个承诺。

所以，例如方法get应该是

get: function(noticiaId) {
    return noticias.then(function(array) {
        for (var i = 0; i < array.length; i++) {
            if (array[i].id === parseInt(noticiaId)) {
                return array[i];
            }
        }
        return null;
    });
}

get() 方法的用户应该像这样使用它：

service.get(i).then(function(element) {
    // do something with element
});

还要注意，您定义承诺的方式是一种反模式。如果 http 请求失败，noticias 承诺永远不会被拒绝。使用承诺链：

var noticias = $http.get("http://ajax.googleapis.com/ajax/services/feed/load", { params: { "v": "1.0", "q": "http://www.furg.br/bin/rss/noticias.php", "num":"10" } })
      .then(function(response) {
          return response.data.responseData.feed.entries;
      });

【讨论】：

【解决方案2】：

我相信你想这样做：

app.factory('Noticias', function($http, $q) {
    var http_get_success_callback = function(data) {
        var entries = data.responseData.feed.entries;
        return entries;
    };

    var jsonData = $q.when($http.get("http://ajax.googleapis.com/ajax/services/feed/load", { params: { "v": "1.0", "q": "http://www.furg.br/bin/rss/noticias.php", "num":"10" } }).then(http_get_success_callback));
    this.getAllNoticias = function() {
        return jsonData;
    }

    this.getIndexNoticia = function(index) {
        return jsonData[index];
    }

});

【讨论】：

【解决方案3】：

我的解决方案： 基于：https://stackoverflow.com/a/33023283/5424391

angular.module('starter.services', [])

.factory('Noticias', function($http,$q) {

  var noticias = $http.get("http://ajax.googleapis.com/ajax/services/feed/load", { params: { "v": "1.0", "q": "http://www.furg.br/bin/rss/noticias.php", "num":"20" } })
    .then(function(response) {
        return response.data.responseData.feed.entries;
    });

  return {
    all: function() {
      return noticias.then(function(array){
        return array;
      });
    },
    get: function(noticiaIndex) {
    return noticias.then(function(array) {
        return array[parseInt(noticiaIndex)];        
    });
  }
  };
});

【讨论】：