使用服务通过$ http get获取AngularJs中的数据

时间:2018-02-04 13:15:20

标签: javascript angularjs

我正试图从我的服务中将数据传回我的控制器但没有成功。我可以从我的控制器调用我的服务,我知道服务本身是有效的,因为我可以控制从服务中记录响应(但不能回到控制器中)。

这是我的服务:

(function () {
angular
    .module('app')
    .service('testService', testService);

testService.$inject = ['$http'];

function testService($http, url) {
    var baseUrl = "http://getjsondata.com/" + url;

    this.getData = function (url) {
        $http({
            method: 'GET',
            url: baseUrl + url,
            headers: {'Content-Type': 'application/json'}
        })
            .then(function (response) {
                console.log(response); // THIS WORKS
                return response;
            })
            .catch(function (error) {
                return error;
            });
    };
}
}());

这是我的控制器内部:

vm.getTestData = function (url) {
    vm.response = testService.getData(url);
    console.log(vm.response);
};

我已经尝试将数据作为回调传递回testService.getData,但没有成功。我也尝试过使用工厂而不是服务,但是我无法在控制器中访问数据。我也尝试过不同地在服务中定义我的函数(getData:function()...)等等。

我猜测我在服务中的return语句的行为与我期望的方式不同。我将不胜感激任何帮助!

1 个答案:

答案 0 :(得分:1)

getData永远不会返回。在$ http前面添加return,并在你的控制器中使用.then。

this.getData = function (url) {
    return $http({
        method: 'GET',
        url: baseUrl + url,
        headers: {'Content-Type': 'application/json'}
    })
};

在ctrl中

vm.getTestData = function (url) {
    testService.getData(url).then(function (response) {
        vm.response = response; 
        return response;
    })
    .catch(function (error) {
        return error;
    });
};