AngularJS:在自定义服务中执行$ http请求并返回数据 [英] AngularJS: Performing $http request inside custom service and returning data

问题描述

我已经定义了一个自定义的http服务，其角度如下:

I have defined a custom http service in angular that looks like this:

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;
});

我可以在控制器中访问此服务，如下所示:

And I can access this service in my controller like so:

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

  var webService = 'getUser?u=3'

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

});

但是，我现在需要简化此过程，以使它全部包含在带有静态url的服务中，并且它仅返回数据.这样我就可以像这样在控制器中调用它:

However I now need to streamline this process so that it is ALL contained inside the service with a static url and it simply returns the data. So that I can just call it in the controller like so:

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

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

});

我似乎无法调整服务以获取此功能.有人知道正确的方法吗?

I can't seem to tweak the service to get this functionality. Anyone know the correct way to do it?

推荐答案

选项1-使用Promise API

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

控制器:

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;
    });

控制器:

 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;
});

控制器:

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);    
});

这篇关于AngularJS:在自定义服务中执行$ http请求并返回数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！