Angularjs 角度工厂依赖问题

我有两个工厂：ApiService和LocationService

在ApiService中，我希望从LocationService将使用的$http调用返回端点

但当控制器调用LocationService时，它似乎并不等待来自ApiService的响应。下面是一些代码片段，在ApiService中，当我最终使其工作时，我将缓存它，这样我就不需要每次进行服务器调用来获取端点：

    services.factory("ApiService", ["$location", "$http", function ($location, $http) {
    return {
        getEndpointUrl: function () {
            var endpoint;

            $http({
                method: 'GET',
                url: '/site/apiendpoint'
            }).then(function successCallback(response) {
                endpoint = response.data;
                console.log(endpoint);
                return endpoint;
            }, function errorCallback(response) {
                console.error('Error retrieving API endpoint');
            });
        }
    }
}]);

这是位置服务，它使用ApiService：

    services.factory("LocationService", ["$resource", "ApiService", function ($resource, apiService) {
    var baseUri = apiService.getEndpointUrl();
    return $resource(baseUri + '/location', {}, {
        usStates: { method: 'GET', url: baseUri + '/location/us/states' }
    });
}]);

---

当我的控制器尝试调用LocationService.usStates时，baseUri未定义。我做错了什么？

在

ApiService

中，您实际上并没有从

getEndpointUrl（）

返回值。您是否可以从

ApiService

返回一个承诺，然后在

LocationService

中以同步方式使用该承诺

services.factory("ApiService", ["$location", "$http", function($location, $http) {
    return {
        getEndpointUrl: function() {
            var endpoint;

            return $http({
                method: 'GET',
                url: '/site/apiendpoint'
            });
        }
    }
}]);

services.factory("LocationService", ["$resource", "ApiService", function($resource, apiService) {
    return {
        getLocations: function() {
            return apiService.getEndpointUrl().then(function successCallback(response) {
                var baseUri = response.data;

                return $resource(baseUri + '/location', {}, {
                    usStates: { method: 'GET', url: baseUri + '/location/us/states' }
                });

            }, function errorCallback(response) {
                console.error('Error retrieving API endpoint');
            });
        }
    };
}]);

然后在控制器中：

LocationService.getLocations().then(function(data) {
    $scope.statesResult = data.result.states;  
});

---

在

ApiService

中，实际上并没有从

getEndpointUrl（）

返回值。您是否可以从

ApiService

返回一个承诺，然后在

LocationService

中以同步方式使用该承诺

services.factory("ApiService", ["$location", "$http", function($location, $http) {
    return {
        getEndpointUrl: function() {
            var endpoint;

            return $http({
                method: 'GET',
                url: '/site/apiendpoint'
            });
        }
    }
}]);

services.factory("LocationService", ["$resource", "ApiService", function($resource, apiService) {
    return {
        getLocations: function() {
            return apiService.getEndpointUrl().then(function successCallback(response) {
                var baseUri = response.data;

                return $resource(baseUri + '/location', {}, {
                    usStates: { method: 'GET', url: baseUri + '/location/us/states' }
                });

            }, function errorCallback(response) {
                console.error('Error retrieving API endpoint');
            });
        }
    };
}]);

然后在控制器中：

LocationService.getLocations().then(function(data) {
    $scope.statesResult = data.result.states;  
});

---

原因是您的

getEndpointUrl

函数是异步的，并且没有返回值

由于您的

LocationService

使用$resource并依赖于

baseUri

，因此我建议将该数据与初始页面加载一起引导，并将其设置为常量，如：

angular.module('yourModule').constant('baseUrl', window.baseUrl);

然后您的服务将注入它以创建您的资源：

   services.factory("LocationService", ["$resource", "ApiService", "baseUrl", function ($resource, apiService, baseUrl) {
       return $resource(baseUrl + '/location', {}, {
          usStates: { method: 'GET', url: baseUrl + '/location/us/states' }
       });
   }]);

---

原因是您的

getEndpointUrl

函数是异步的，并且没有返回值

由于您的

LocationService

使用$resource并依赖于

baseUri

，因此我建议将该数据与初始页面加载一起引导，并将其设置为常量，如：

angular.module('yourModule').constant('baseUrl', window.baseUrl);

然后您的服务将注入它以创建您的资源：

   services.factory("LocationService", ["$resource", "ApiService", "baseUrl", function ($resource, apiService, baseUrl) {
       return $resource(baseUrl + '/location', {}, {
          usStates: { method: 'GET', url: baseUrl + '/location/us/states' }
       });
   }]);

---

您好，这将是完美的，但如何在第一次动态设置该常数？由于我必须从另一个端点获取端点，如果这有意义的话，该端点可能因环境而异。您使用的服务器端技术是什么？.NET MVC（返回API端点）和另一个Web API 2项目（即端点）。我最初的想法是根据他们所在的url（location.host（））设置端点，但我正在寻找更干净的东西，我的web.config中有这个设置。实际上，我在一个老问题上也建议了这种方法。这里有一个链接：这很完美，我只想序列化它并使用window.configuration。非常感谢。您好，这将是完美的，但如何在第一次动态设置该常数？由于我必须从另一个端点获取端点，如果这有意义的话，该端点可能因环境而异。您使用的服务器端技术是什么？.NET MVC（返回API端点）和另一个Web API 2项目（即端点）。我最初的想法是根据他们所在的url（location.host（））设置端点，但我正在寻找更干净的东西，我的web.config中有这个设置。实际上，我在一个老问题上也建议了这种方法。这里有一个链接：这很完美，我只想序列化它并使用window.configuration。非常感谢。