在服务上发出http请求，在控制器中获得响应

Question

我正在使用服务向本地JSON文件发出http请求。 我正在尝试将来自成功HTTP请求的数据存储在控制器中，但该部分无法正常工作。 但是，http请求在服务上似乎确实成功。

var myModule = angular.module("MyApp", [])

  .controller('MyController', function(Utilities){

     //this is not working
     self.socialArr = Utilities.getData("data.json");

   }).service('Utilities', function($http) {

     var self = this;

     self.getData = function(jsonData) {
       $http.get(jsonData)
        .then(function(response) {
            //First function handles success
            var theData = response.data;
            console.log(theData); //this works (data is logged)
            return theData;
        }, function(response) {
            //Second function handles error
            console.log("Error loading JSON data");
        });
     };
 });

Answer 1

您不会从service方法返回任何东西。 返回$http承诺，并在控制器中使用then()将返回的数据分配给控制器属性。 你也没有在控制器中定义self

angular.module("MyApp", [])

.controller('MyController', function(Utilities) {
  // store reference of "this"
  var self = this;
  // call service method
  Utilities.getData("data.json").then(function(data) {
    // assign data after promise resolves
    self.socialArr = data;
  });


}).service('Utilities', function($http) {

  var self = this;

  self.getData = function(jsonData) {
    // return the promise
    return $http.get(jsonData).then(function(response) { 
        return response.data;
      }, function(response) {
        //Second function handles error
        console.log("Error loading JSON data");
      });
  }
});

Answer 2

我认为您应该使用promise。因为您正在拨打异步电话。

 self.getData = function(jsonData) {
var deferred = $q.defer();
       $http.get(jsonData)
        .then(function(response) {

            if (response.data) {
      deferred.resolve(response);
    } else {
      deferred.reject(response);
    }

        }, function(response) {
            deferred.reject(response);
        });
 return deferred.promise;
     };

然后在控制器中

 Utilities.getData("data.json").then(function(res)
{
   self.socialArr=res;
},function(e){

});

Answer 3

您应该在$ http.get（）。then（successCallback）之后返回一个承诺。

返回语句

 return theData;

在您的代码中被限制并“作用域”到成功回调。 因此，为了获得它的句柄，您需要返回与successCallback一起存在的承诺。

         self.getData = function(jsonData) {

         // store the promise
         var promise = $http.get(jsonData)
        .then(function(response) {
            //First function handles success
            var theData = response.data;
            console.log(theData); //this works (data is logged)
            return theData;
        });

        // return the promise, which can get you the successCallback's    returned data.
        return promise;
      };        

console.log输出表示已执行代码，但是如果没有与之关联的承诺，则返回的theData是无用的。

在控制器中：

          Utilities.getData("data.json").then(function(socialArr){
            $scope.socialArr = socialArr;
            // this should print
            console.log($scope.socialArr);
          });

这里工作的朋克

Answer 4

var myModule = angular.module("MyApp", [])

.controller('MyController', function(Utilities){

     Utilities.getData("data.json").success(function(responce) {
         self.socialArr = response.data;
     })

 })
.service('Utilities', function($http) {

    var self = this;

    self.getData = function(jsonData) {
       return $http.get(jsonData).error(function(responce) {
           console.log("error!");
       })
    };
});