Make AngularJS service call async

Question

I have read about "promise" object and all the ways to get some sort of async call or wait until a http call is done, but I haven't been able to success. This is what I got and what I'm trying to do:

I need to get some json file from my server and use the data from that json in my code (js file) and not only as data for my HTML template.

I have a service that does the call to the json file:

mobilityApp.service('serveiWebservices', function($resource) {       
    return {        
        getWS: function($scope) {           
            var path = 'jsonWS/context.json';
            $resource(path).get(function (data) {                                                       
                console.log(data); //data is printed fine
                $scope.returnData = data; //just to test, it doesn't work neither
                return data;            
            });
        }
    };    
});

And from my controler I call it like this:

var data = serveiWebservices.getWS($scope);     
console.log(data); //undefined

any idea on how to work with the promise object that the funcion returns and perform actions as soon as it gets the requested data ? i Know that I could set a "success" function but I would like not to use callbacks.

Tnanks in advance !

Ross · Accepted Answer · 2014-05-06 16:49:36Z

This should work -

Service:

mobilityApp.service('serveiWebservices', function($http) {       
    return {        
        getWS: function() {           
            var path = 'jsonWS/context.json';
            return $http.get(path, function (response) {                                                       
                console.log(JSON.stringify(response, null, 4));
                return response.data;            
            });
        }
    };    
});

Controller:

serveiWebservices.getWS().then(function(data) {
    console.log(JSON.stringify(data, null, 4));
});

If you want to use $resource this should work too -

mobilityApp.service('serveiWebservices', function($resource) {       
    return {        
        getWS: function() {           
            var path = 'jsonWS/context.json';
            return $resource(path).get(function (response) {                                               
                console.log(JSON.stringify(response, null, 4));
                return response; // might just be response, no response.data
            });
        }
    };    
});

AlainIb · Accepted Answer · 2014-11-20 08:28:02Z

I was searching for a working solution from hours. thanks @Ross.

This also work , i modified the Ross example , and removed the first return :

mobilityApp.service('serveiWebservices', function($http) {       
    this.getWS = function() {           
        var path = 'jsonWS/context.json';
        return $http.get(path, function (response) {                                                       
            console.log(JSON.stringify(response, null, 4));
            return response.data;            
        });
    }
    this.getWS2 = function() {           
        var path = 'jsonWS2/context.json';
        return $http.get(path, function (response) {                                                       
            console.log(JSON.stringify(response, null, 4));
            return response.data;            
        });
    }
});

If i get a lot of function in this service should i use the Ross example with all the function in the return or this one ? thanks

Collectives™ on Stack Overflow

Make AngularJS service call async

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related