Question

使用AngularJS，我正在尝试实现一个简单的服务，该服务从REST服务返回clients列表，然后在控制器中可用。

我陷入困境，想知道如何正确地将数据传递给控制器。以下是我的服务，它可以很好地提取数据。我已经确认数据存在

app.service('clientsService', ['$http', function ($http) {

    var serviceBase = 'http://localhost:56879/api/';

    this.getClients = function () {

        return $http.get(serviceBase + 'clients').then(function (results) {
            console.log(results.data);
            return results.data;
        });
    };
}]);

接下来我尝试在控制器中使用它

app.controller('clientsController', ['$scope', 'clientsService', function ($scope, clientsService) {
    this.clients = clientsService.getClients();

    console.log(this.clients);
}]);

在此控制器中，this.clients不包含数据，它只包含 try-catch 块

Object {then: function, catch: function, finally: function}
catch: function (a){return this.then(null,
finally: function (a){function b(a,c){var d=e();c?d.resolve(a):d.reject(a);return d.promise}function d(e,g){var f=null;try{f=(a||c)()}catch(h){return b(h,!1)}return f&&P(f.then)?f.then(function(){return b(e,g)},function(a){return b(a,!1)}):b(e,g)}return this.then(function(a){return d(a,!0)},function(a){return d(a,!1)})}
then: function (b,g,h){var m=e(),u=function(d){try{m.resolve((P(b)?b:c)(d))}catch(e){m.reject(e),a(e)}},F=function(b){try{m.resolve((P(g)?g:d)(b))}catch(c){m.reject(c),a(c)}},v=function(b){try{m.notify((P(h)?h:c)(b))}catch(d){a(d)}};f?f.push([u,F,v]):k.then(u,F,v);return m.promise}
__proto__: Object

我还无法理解我是否错误地将数据从服务实际传递到控制器。

Answer 1

这是因为getClients方法返回promise，而不是数据。 promise将解析为返回回调中的数据。您在控制台中看到的方法是service方法返回的promise对象的方法。因此，您应该对承诺的then方法注册回调： -

 var _that = this;
 clientsService.getClients().then(function(data) { //Runs when promise is resolved
   _that.clients = data;
 }).catch(function(){ //<-- Runs if the promise is rejected 

 });

Answer 2

您可以查看非常容易使用的ngResource服务。它基于$ http，但有一点抽象：

https://docs.angularjs.org/api/ngResource/service/ $资源

了解控制器和服务交互

2 个答案: