javascript - AngularJS:在自定义服务中执行 $http 请求并返回数据

Question

我在 Angular 中定义了一个自定义的 http 服务，如下所示:

angular.module('myApp')
  .factory('myhttpserv', function ($http) {

  var url = "http://my.ip.address/"

  var http = {
      async: function (webService) {
          var promise = $http.get(url + webService, { cache: true }).then(function (response) {
            return response.data;
        });
          return promise;
       }
  };
  return http;
});

我可以像这样在我的 Controller 中访问这个服务:

angular.module('myApp')
  .controller('myCtrl', function (myhttpserv) {

  var webService = 'getUser?u=3'

  myhttpserv.async(webService).then(function (data) {
      console.log(data);
  })

});

但是我现在需要简化这个过程，以便它全部包含在具有静态 url 的服务中，并且它只返回数据。这样我就可以像这样在 Controller 中调用它:

 angular.module('myApp')
  .controller('myCtrl', function ($scope, myhttpserv) {

      console.log(myhttpserv.var1);
      console.log(myhttpserv.var2);
      etc...

});

我似乎无法通过调整服务来获得此功能。有谁知道正确的做法吗？

Answer 1

选项 1 - 使用 promise API

angular.module('myApp').factory('myhttpserv', function ($http) {
  return $http.get('http://my.ip.address/getUser?u=3', { cache: true });
});

Controller :

angular.module('myApp').controller('myCtrl', function ($scope, myhttpserv) {
     myhttpserv.then(function(response){
         console.log(response.data);
     });     
});

选项 2 - 使用路由解析

angular.module('myApp', ['ngRoute']).config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/myCtrl', {
        templateUrl: 'myView.html',
        controller: 'myCtrl',
        resolve: {
        load: function (myhttpserv) {
            return myhttpserv;
        }
      });
  }]);

服务:

angular.module('myApp').factory('myhttpserv', function ($http) {
      var data = {};
      var url = "http://my.ip.address/";
      var promise = $http.get(url + 'getUser?u=3', { cache: true }).then(function (response) {
                data = response.data;
            });
      return data;
    });

Controller :

 angular.module('myApp')
  .controller('myCtrl', function ($scope, myhttpserv) {

      console.log(myhttpserv.data.var1);
      console.log(myhttpserv.data.var1);
      etc...

});

选项 3 - 使用 $interval 服务

angular.module('myApp').factory('myhttpserv', function ($http) {
  var data = {};
  var url = "http://my.ip.address/";
  var promise = $http.get(url + 'getUser?u=3', { cache: true }).then(function (response) {
            data = response.data;
        });
  return data;
});

Controller :

angular.module('myApp').controller('myCtrl', function ($scope, $interval, myhttpserv) {
      $scope.intervalPromise = $interval(function(){
          if (Object.keys(myhttpserv.data).length!=0)
          {
              console.log(myhttpserv.data);
              $interval.cancel($scope.intervalPromise);
          }
      }, 100);    
});