如何从角度工厂的rest api返回http get请求?

时间:2015-09-30 01:49:59

标签: javascript angularjs

我正在尝试从工厂内的rest api url返回http get请求。但它不是返回数据而是返回功能。当我在控制器中使用控制台日志时,它会显示整个功能。

MyApp.factory('userFactory', function($http) {

    var factory = [];

    factory.users = function(){
        $http({
            url: '/test/users',
            method: 'GET'
        })
        .then(function successCallback(response) {
            factory.users = response;

        }, function errorCallback(response) {
            factory.users = response;
        });

        return factory.users;
    };

    return factory;

});

2 个答案:

答案 0 :(得分:1)

我在我的项目中做同样的事情。看看这里的回购: https://github.com/ahmadabdul3/mean-flapperNews/tree/master/public/Index/angular

httpService是我的http处理程序。然后你可以查看postsService,看看我的getAllPosts函数

基本上就像评论说的那样,你必须返回一个承诺并在控制器中处理它

所以你这样做:

function getAllPosts() {
        httpService.baseGet(httpUrls.posts)
        .then(function(data) {
            angular.copy(data, posts);
            posts.push({title: 'post test', link: '', upvotes: 3, comments: []});
        }, function(data) {
            httpService.handleError(data);
        });
    }

让http服务完成工作:

angular.module('httpService', [])
.factory('httpService', httpService);

httpService.$inject = ['$http', '$q'];

function httpService($http, $q) {
    var serv = this;
    var methods = {
        httpGet : 'GET',
        httpPost : 'POST',
        httpPut : 'PUT',
        httpDelete : 'DELETE'
    };
    function baseGet(url) {
        return $http.get(url).then(
                function (result) {
                    return result.data;
                },
                function (result) {
                    return $q.reject(result);
                }
                );
    }
    function httpWithParams(url, method, data) {

        return $http({
                url: url,
                method: method,
                params: data,
                dataType: "json",
                headers: {
                    "Content-Type": "application/json"
                }
            }).then(
                function (result) {
                    console.log(result.data);
                    return result.data;
                },
                function (result) {
                    return $q.reject(result);
                }
            );
    }
    function handleError(error) {
            console.log(error);
    }

    return {
        baseGet: baseGet,
        httpWithParams: httpWithParams,
        handleError: handleError,
        methods: methods
    }
}

答案 1 :(得分:1)

请参阅$ http docs - 它会返回一个承诺,因此您需要相应地处理此问题。你的变量命名似乎也有一些冲突,这对这个问题没有帮助。

我建议关注johnpapa's angular style guide - 在这种情况下是数据服务规则。你已经拥有了大部分内容。

您可以像下面那样处理控制器中的承诺 - 或者使用setter(工厂的getUser / setUsers在控制器/关注点之间共享)。

  MyApp.factory('userFactory', function($http) {
    // Expose public API first, use func notation
      return { 
          getUsers: getUsers,
      };

      function getUsers(){
          return $http.get('/test/users');
      }
 });

 MyApp.controller('UserController', function(userFactory) {
    // bindables up top
    vm.users = [];

    activate();

    //separate activation logic / promise resolution
    function activate(){
        userFactory.getUsers().then(function(users){
          vm.users = users.data;
        });
    }    
});