Angular $ resource

Question

大家好:)这是问题所在。我正在制作一个角度应用程序：

一个工厂，用于访问带有$ http的api，从服务器检索一组对象

getObjectsFromApi : function(){
    return $http({
        url: 'http://path/to/the/api/',
        method: 'GET',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
        }
    })       
},

以及计算检索数据并将其注入控制器的服务

this.getObjectsFromService = function(){
    var objects = [];

    ObjectFactory.getObject()
    .success(function(data, status){
        console.log("Successfully got objects !");
        objects = data;
    })
    .error(function(data, status){
        console.log("Fail... :-(");
    });

    return objects;
};

问题在于，当我返回对象时，它不会返回任何数据。如何在此getObjectsFromService函数中返回$ http回调数据？

感谢您的帮助！

Answer 1

你必须使用承诺，这样的事情应该做的伎俩

this.getObjectsFromService = function(){
    var defer = $q.defer();

    ObjectFactory.getObject()
    .then(function(data){
        console.log("Successfully got objects !");
        defer.resolve(data);
    })
    .catch(function(data){
        console.log("Fail... :-(");
         defer.reject(data);
    });

    return defer.promise;
};

现在你可以在其他地方使用这个功能：

var foo = function() {
    var objects = [];
    this.getObjectsFromService().then(function(data) {
        objects = data;
        //do rest of your manipulation of objects array here
    });
}

没有其他方法可以返回对象，因为$ http是异步的，所以不可能。您将不得不重做其余代码并使其适应此

Answer 2

var req = ObjectFactory.getObject();

req.success(function(data) {...}
req.error(function(data) {...}

这将为你做

变量req将是从工厂发回的承诺。

修改

请记住，在解析承诺之前，您的数据不会发生变化，所以如果您在此之前尝试console.log（对象），它将为空。

Answer 3

http请求是异步的，这意味着它在之后完成，返回objects。返回承诺：

this.getObjectsFromService = function(){ return ObjectFactory.getObject().catch(function(){ console.log("Fail... :-("); }); }

然后

service.getObjectsFromService().then(function(resp) { console.log("Successfully got objects !", resp.data); });

Answer 4

您的代码是异步的。返回对象时，将返回初始的空数组。您不能直接返回您的对象，而是需要返回一个承诺（请参阅下面的3种可能性）

创建承诺

var deferred = $q.defer();

ObjectFactory.getObjectsFromApi()
    .success(function(data, status){
        console.log("Successfully got objects !");
        // Do stuff and resolve promise
        deferred.resolve(data);
     })
     .error(function(data, status){
         console.log("Fail... :-("));
         // Do stuff and reject promise
         deferred.reject(data)
     });

return deferred.promise;

你可以使用promise chaining（使用.then而不是.success和.error）：
注意：当使用成功和错误回调而不是成功和错误方法时，你只有一个参数是响应对象

return  ObjectFactory.getObjectsFromApi()
    .then(function(response){
        console.log("Successfully got objects !");
        // Do stuff and chain full response headers or data
        return responseHeaders;
        // or
        // return responseHeaders.data;
     }, function(responseHeaders){
         console.log("Fail... :-("));
         // Do stuff and chain error (full response headers or data)
         return $q.reject(responseHeaders)
         // return $q.reject(responseHeaders.data);
     });

或者，如果您没有业务逻辑，或没有理由干预您的工厂，只需直接返回您的$ http电话：

return  ObjectFactory.getObjectsFromApi();

Answer 5

Angular $ resource

厂

getObjectsFromApi : function(){
    return $resource('http://path/to/the/api/', {}, 
    {
        get: {
            method: 'GET',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
            } 
        }
    })       
},

服务

this.getObjectsFromService = function(){
    var objects = [];

    ObjectFactory.get().$promise.then(function(data) {
         objects = data;
         return objects;
    }).error(function(err) {
        throw err;
    });
};

AngularJS $ http成功回调数据返回

5 个答案:

Angular $ resource

厂

服务