CODEWITHSUNDEEP
javascriptangularjs
John Steed
John Steed

Reputation: 629

How To Integrate Error Handling With Controller and Service

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.

Upvotes: 0

Views: 61

Answers (2)

georgeawg
georgeawg

Reputation: 48948

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 Docs1:

Deprecation Notice

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

Upvotes: 1

Oleg Imanilov
Oleg Imanilov

Reputation: 2751

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

Upvotes: 0

Related Questions