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

Question

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

score 2 · Accepted Answer · edited May 23 '17 at 11:44

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);
}

i see what you mean, but i need to treat the response in my fetchData function first, and then pass the data further, because i need to send some kind of feedback to the user when the server messes up — Jonathan Szekely, Aug 26 '15 at 10:42
Since `then` returns a promise as well, you can chain them. [$q](https://docs.angularjs.org/api/ng/service/$q) documentation has some explanation of the promise chaining. Please see my edited answer. — Constantine, Aug 26 '15 at 10:49
the functions in then are its respective success and error callbacks? — Jonathan Szekely, Aug 26 '15 at 12:35
Exactly. It is `then(successCallback, errorCallback, notifyCallback)`. — Constantine, Aug 26 '15 at 12:51
things finally start to make sense. thank you for your help mr constantine — Jonathan Szekely, Aug 26 '15 at 12:56

score 0 · Answer 2 · answered Aug 26 '15 at 10:28

0

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);

answered Aug 26 '15 at 10:28

manohar

155
1
9

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

2 Answers2