为什么我的服务没有返回任何东西

Question

我正在使用 Ionic Framework 7 AngularJS 构建应用程序

$ ionic info

Your system information:

Cordova CLI: 6.2.0
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Framework Version: 1.2.4
Ionic CLI Version: 1.7.16
Ionic App Lib Version: 0.7.3
OS: Distributor ID: LinuxMint Description:  Linux Mint 17.1 Rebecca 
Node Version: v0.12.2

我正在构建的页面检索教堂服务列表并将它们显示在主详细信息列表中。所以我按照以下代码将 $http 代码放入服务中：

services.js：

.service('ServicesService', ['$http', '$sce', function($http, $sce){

var services = [];

$http.get('http://demo0194057.mockable.io/services').then(function(response) {
        services = response.data;
        window.q = services; //checking value of services var

}, function(error) {
    console.error("Error loading Services Endpoint! " + error);
});

return {
    getAllServices: function() {
        console.log('from inside return obj ' + services);
        window.p = services; // checking value of services var
           return services;
    }

}

}])

controller.js：

.controller('servicesCtrl', function($scope, $http, ServicesService, InfoService) {
$scope.services = [];

$scope.services = ServicesService.getAllServices();
window.r = $scope.services;

 $scope.doRefresh = function() {
                $http.get('http://demo0194057.mockable.io/services').success(function(response) {
                $scope.services = response;
            })
            .finally(function() {
                // stop the ion-refresher from spinning
                $scope.$broadcast('scroll.refreshComplete');
            });
            }


})

所以我的问题是服务返回一个空数组，而不是来自 JSON REST API 的对象数组。我在代码中放入了一些调试变量，我可以从控制器中看到，服务正在返回一个空数组（var window.r）。在服务中，window.p 也是空的，但是 window.q 具有正确的对象数据，这意味着 API 调用工作正常。我无法弄清楚数据在哪里丢失，因此无法从服务中成功返回。

请帮忙

Answer 1

试试这样：

服务

.service('ServicesService', ['$http', '$sce', function($http, $sce){
    var services = [];

    return {
        getAllServices: function() {
            return $http.get('http://demo0194057.mockable.io/services').then(function(response) {
                    services = response.data;
                    return services;
            }, function(error) {
                console.error("Error loading Services Endpoint! " + error);
            });
        }

    }
}]);

控制器

.controller('servicesCtrl', function($scope, $http, ServicesService, InfoService) {
    $scope.services = [];
    $scope.doRefresh = function() {
        ServicesService.getAllServices().then(function (response) {
            $scope.services = response;
        });
    });
});

Answer 2

在您的服务中，您需要在getAllServices 方法的主体内执行$http.get 请求。否则，get 请求的 then 子句会在控制器调用 getAllServices 后执行，这就是 services 变量此时未初始化的原因。

Answer 3

$http.get('http://demo0194057.mockable.io/services').then(function(response) {
        services = response.data;
        window.q = services; //checking value of services var

}, function(error) {
    console.error("Error loading Services Endpoint! " + error);
});

这是异步函数。所以 services = response.data 会在稍后执行。

$scope.services = ServicesService.getAllServices();这将在 angular 上升之后调用，并且可能在您的异步 get 将被执行。

所以。如果你不想得到你的服务，你必须包装你的 ServicesService.getAllServices();作为您将等待您的第一个请求的承诺。但似乎存在一些架构问题......尝试将您的代码推开一段时间并重新设计它。