AngularJS - Pass Error from Service to Controller

Question

Service.js

    myService.serviceName = function (userId) {
            return $http({
                method: 'POST',
                url: '/someUrl'
            }).then(function successCallback(response) {
                return response.data;
            }, function errorCallback(response) {
                console.log('Service errorCallback');
                console.log(response);
            });
    };

Controller.js

myService.ControllerName(data.id)
        .then(function successCallback(data) {
            //do processing here
        }, function errorCallback(response) {
            toaster.pop({
                type: 'error',
                title: 'Display Error Message!'
            });
        });

In service, we are getting error status code in console viz -1, -2 and based on that code we are displaying custom error message to the user.

How do I pass error (message/code) from service to controller ?

Aren't you getting same status code in error block of service call in controller? — Rakesh Chand
– Rakesh Chand, Commented Sep 16, 2016 at 10:53
You don't need use .catch(function (error) { throw error; }), because .catch(function (error) { toaster.pop({ type: 'error', title: 'Display Error Message!' }); }) can catch all http errors. — Stepan Kasyanenko
– Stepan Kasyanenko, Commented Sep 16, 2016 at 11:24
What I see in console when call is made from service to controller Service - statusCode="-1" Controller - Error: data is undefined Probably, in controller it goes into then instead of catch — Slimshadddyyy
– Slimshadddyyy, Commented Sep 16, 2016 at 11:34

EternalLight · Accepted Answer · 2016-09-16 11:47:02Z

1

The first thing that comes to my mind is to accept callbacks from the Controller.

myService.serviceName = function (userId) {
    return $http({
        method: 'POST',
        url: '/someUrl'
    })
};

And in your Controller:

myService.serviceName(123).then(function(response) {
    // Do the processing.
}, function(error) {
    // Check the error and change the UI accordingly. 
});

If you need to make the processing within the service, you might want to use the $q service. In this case, you would need to inject it into your Service.

myService.serviceName = function (userId) {
    var defer = $q.defer();
    $http({
        method: 'POST',
        url: '/someUrl'
    }).then(function (response) {
        // Do the processing.
        defer.resolve(response);
    }).catch(function (error) {
        defer.reject(error);
    });
    return defer.promise;
};

In your controller:

myService.serviceName(123).then(function(response) {
    // Indicate that everything went OK.
}, function(error) {
    // Check the error and change the UI accordingly.
});

answered Sep 16, 2016 at 11:47

EternalLight

1,3281 gold badge11 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Slimshadddyyy Over a year ago

I have updated my question by adding callback functions for success and error. Executing the new code, it first goes into Service successCallback and then Controller errorCallback and says response is not defined I am not sure what I am missing here. Pls guide.

EternalLight Over a year ago

That's because you're trying to attach callbacks twice for $http. Try using my snippet with $q.

Slimshadddyyy Over a year ago

Updated my code using $q. It says Error: $q is not defined. Guess $q dependency should be added in my service code

EternalLight Over a year ago

Sure, I wrote that you should inject $q before using it.

Slimshadddyyy Over a year ago

Gotcha. The return defer.promise; should be after defer.reject and not after catch block is closed. Pls validate me

|

Maarten Bicknese · Accepted Answer · 2016-09-16 11:35:58Z

0

You could add functionality to add callbacks to the service.

This way the controller can register its own callback method to the service. Which in its turn will call said callback method when the error occurs. Notifying the controller of the occurred error and desired message.

answered Sep 16, 2016 at 11:35

Maarten Bicknese

1,5681 gold badge14 silver badges27 bronze badges

2 Comments

Slimshadddyyy Over a year ago

Could you please post snippet in relation to the above posted code ?

Maarten Bicknese Over a year ago

Does EternalLight his answer help you out? Otherwise I'll add a snippet.

Collectives™ on Stack Overflow

AngularJS - Pass Error from Service to Controller

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related