How To Integrate Error Handling With Controller and Service

Question

Please see below the structure of my angular application:

I have a page called 'firm.html' which contains a button. Clicking this button executes the code below.

Controller

The controller calls a Service function. The generationInProgress variable is used in an ng-show to toggle the visibility of a loading gif on the HTML page

    $scope.generationInProgress = true;

    firmService.processFirm(firmRequest).then(function(response) {      

        window.location.href = "firm/process";          
        $scope.generationInProgress = false;

    });

Firm Service

This is a service that handles the Firm operations with the following function called above

this.processFirm = function(firmRequest) {      
    return httpService.put('firm/process', firmRequest);
};

HTTP Service

This is a service that handles all calls to the service. It is used by multiple services, including the firmService above. Here is the put method as called above

this.put = function(url, data) {

    return promise = $http.post(url, data).success(function(response) { 
        return response;
    }).error(function(response) {
        console.log("error");
    });

};

If a HTTP error code is returned by the server, obviously the .error function is executed. If I had a dedicated error page, I could just redirect to that page.

However, I need to display the error on the 'firm.html' page while also setting the $scope.generationInProgress back to false so that the loading gif is no longer displayed. None of the code that does this can be located within the httpService because it is a common service used by many different components.

I am unsure how to propagate the error back to the controller in order to accomplish this. Do I just put return response; in both the .success and .error and use an IF statement in the controller to test for the HTTP code? Is there an alternative method?

Any advice is appreciated.

You have your answer below, but, seeing your code, I think you don´t totally understand promises; usually, you don´t define the success/error habndler if you are going to return it. So, your service should look like return $http.post(url, data); There is also some interesting stuff about this topic here: http://stackoverflow.com/questions/16385278/angular-httppromise-difference-between-success-error-methods-and-thens-a — sergio0983, Oct 13 '16 at 15:55

score 1 · Accepted Answer · answered Oct 14 '16 at 06:30

The .success and .error methods have been deprecated. Instead, use the .then and .catch methods.

To chain a successful promise, return data to the .then method. To chain a rejected promise, throw the error response:

this.put = function(url, data) {

    //Use .then method
    return promise = $http.post(url, data).then(function(response) {
        //return to chain success 
        return response;
    //Use .catch method
    }).catch(function(response) {
        console.log("error");
        //throw to chain rejection
        throw response;
    });

};

From the Docs¹:

Deprecation Notice

The $http legacy promise methods .success and .error have been deprecated. Use the standard .then method instead.

score 0 · Answer 2 · answered Oct 13 '16 at 15:41

You can handle rejected state in controller, than present it as you like in html.

$scope.generationInProgress = true;
$scope.error = "";

firmService.processFirm(firmRequest).then(function(response) {      
    window.location.href = "firm/process";          
    $scope.generationInProgress = false;

}, function(err) {
    $scope.generationInProgress = false;
    $scope.error = "Your customized error message. Caused by: " + err;
});

How To Integrate Error Handling With Controller and Service

2 Answers2

Deprecation Notice