How to prevent action on failed $http.post in AngularJS

Question

In my factory I make a service call. If I get a response from that call I want to do an action in my controller, (ie call function doAction()). I need some help though. As my code is working now, it does actions in controller even though service call fails.

If service call fails, code goes into Catch-section in the factory, but still returns to the controller so that doAction()-method is reached.

How can I avoid that? Thank you for your time, and excuse a possible stupid question. I'm pretty new to Angular.

In my factory:

app.factory('myFactory', function ($http) {
    return {

        callService: function () {
            return $http.post("http://xxxxx", {}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
                .then(function(response) {
                    return response.data;
                })
                .catch(function(response) {
                    console.error(response.status, response.data);
                });
        },
    };
});

In my controller:

var app = angular.module('indexapp', ['ngRoute']);

app.controller('indexController', function($scope, myFactory) {

   $scope.makeServiceCall = function() {
        var data = myFactory.callService();
        data.then(function (result) {
            doSomeAction();
        });
    };    
});

Nikolaj Dam Larsen · Accepted Answer · 2017-10-14 11:01:20Z

2

This is because by catching the exception, you're actually swallowing it. You either need to not catch the error in your factory, or rethrow the error like this:

app.factory('myFactory', function ($http) {
    return {

        callService: function () {
            return $http.post("http://xxxxx", {}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
                .then(function(response) {
                    return response.data;
                })
                .catch(function(response) {
                    console.error(response.status, response.data);
                    throw response; // <-- rethrow error
                });
        },
    };
});

answered Oct 14, 2017 at 11:01

Nikolaj Dam Larsen

5,7246 gold badges37 silver badges46 bronze badges

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

Comments

Kaustubh Khare · Accepted Answer · 2017-10-14 10:59:45Z

2

Return promise from factory service.

Factory:

app.factory('myFactory', function ($http) {
    return {

        callService: function () {
            return $http.post("http://xxxxx", {}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}});                    

    };
});

Controller

var app = angular.module('indexapp', ['ngRoute']);

    app.controller('indexController', function($scope, myFactory) {

       $scope.makeServiceCall = function() {
            var data;
            myFactory.callService().then(function(response) {
                    data = response.data;
                    doSomeAction();
                })
               .catch(function(response) {
                    console.error(response.status, response.data);
                });
        };    
    });

answered Oct 14, 2017 at 10:59

Kaustubh Khare

3,5203 gold badges38 silver badges51 bronze badges

1 Comment

chichi Over a year ago

I have tried this Before (or something simular). I will try it again though since I Think this would be a nice solution.

Collectives™ on Stack Overflow

How to prevent action on failed $http.post in AngularJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related