CODEWITHSUNDEEP
javascriptangularjshttp
Jonathan Szekely
Jonathan Szekely

Reputation: 207

How can I wrap the $http service and have the data it fetches used in a controller?

What I want to do is have the $http call wrapped so I can use it as a function everywhere in my app without using it directly. Also, according to what I receive from the server I want to display a message, or other general things and separate the logic. My problem is I can't reach the data sent by the server. What am I doing wrong?

This is my service I wrapped the $http in:

Application.service('test', ['$http', function ($http)
{
    this.test = function()
    {
        console.log('testttt');
    }

    this.fetchData = function(url, successCallback, errorCallback, parameters)
    {
        if (parameters)
        {
            $http.get(url, {params: parameters})
                .success(function (data) {
                    successCallback();
                })
                .error(function (data) {
                    errorCallback();
                })
                .finally(function(data){
                    console.log(data);
                });
        }
        else
        {
            $http.get(url)
                .success(successCallback)
                .error(errorCallback)
                .finally(function(data) {
                    console.log('finally');
                    console.log(data);
                    if (data.message)
                        console.log(message);
                });
        }

    }
}])

And the controller where I call it:

Application.controller('AccessLoggingController', ['$scope', '$http', 'initData', 'test', function($scope, $http, initData,test)
{
    test.fetchData('/jewelry-room/move-user.action', function(){}, function(){}, {user:2000, task:7});
... etc more code

Upvotes: 0

Views: 98

Answers (2)

Constantine
Constantine

Reputation: 3257

You do not really need to pass success and error callbacks, since $http.get returns a promise. From $http documentation:

The $http API is based on the deferred/promise APIs exposed by the $q service. While for simple usage patterns this doesn't matter much, for advanced usage it is important to familiarize yourself with these APIs and the guarantees they provide.

In order to understand deferred and promises please see this SO question.

fetchData function may look like:

this.fetchData = function(url, parameters) {
    return $http.get(url, {params: parameters}).then(
        function(response) {
            // do something 
            return response; // resolves a promise 
        }, 
        function(response) {
            // do something
            return $q.reject("Unable to fetch!"); // rejects a promise  
        });
}

Then you can use a service in controllers:

test.fetchData('/jewelry-room/move-user.action', {user:2000, task:7}).then(
    function(result) {
        // success callback
        $scope.action = result;    
    }, 
    function(result) {
        // error callback
        $window.alert(result); // alerts "Unable to fetch!"
    });

Alternatively, if you still want to pass callbacks for some reason:

this.fetchData = function(url, successCallback, errorCallback, parameters) {
    return $http.get(url, {params: parameters}).then(successCallback, errorCallback);
}

Upvotes: 2

manohar
manohar

Reputation: 155

I think your callbacks should take a data param i.e

test.fetchData('/jewelry-room/move-user.action', function(data){}, function(data){}, {user:2000, task:7});

And in fetchData method you should pass the data param i.e

successCallback(data);

Upvotes: 0

Related Questions