How to do error handling when fetching data in angularjs service

Question

This code fetches categories and give them to controller.

sampleApp.factory('SCService', function($http, $q) {

    var SuperCategories = [];
    var SCService =  {};

    SCService.GetSuperCategories = function() {
        var req = {
            method: 'POST',
            url: SuperCategoryURL,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            data: "action=GET"
        };
        if ( SuperCategories.length == 0 ) {
            return $http(req).then(function (response) {
                SuperCategories = response.data;
                return SuperCategories;
            });
        }else {
            return $q.when(SuperCategories);
        }
    }

    return SCService;
});

I think code is perfect until there is no error in http request.

My query is how to do error handling (try catch or something like that), in case if server have some issue or may be cgi-script have some issue and not able to server the request.

Magus · Accepted Answer · 2015-10-05 10:45:51Z

1

Angular promises use a method catch for that.

return $http(req).then(function (response) {
    SuperCategories = response.data;
    return SuperCategories;
}).catch(function(error) {
    // Do what you want here
});

You should use also finally :

return $http(req).then(function (response) {
    SuperCategories = response.data;
    return SuperCategories;
}).catch(function(error) {
    // Do what you want here
}).finally(function() {
    // Always executed. Clean up variables, call a callback, etc...
});

answered Oct 5, 2015 at 10:45

Magus

15.1k4 gold badges40 silver badges52 bronze badges

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

2 Comments

Devesh Agrawal Over a year ago

Thanks for the response. Just wanted to understand which is good option? Using try catch or success/error call backs?

Magus Over a year ago

Keep in mind that a "classic" try {} cath(...) {} will have a different behavior with the $exceptionHandler. Read this article : medium.com/@bluepnume/…

Arun · Accepted Answer · 2015-10-05 10:48:14Z

1

Write like

 return $http(req).then(function (response) {
               //success callback
            },
 function(){
//Failure callback
});

answered Oct 5, 2015 at 10:48

Arun

1,1839 silver badges15 bronze badges

Comments

Vaibhav Shah · Accepted Answer · 2015-10-05 10:57:19Z

0

Use callback methods from controller Like

Controller.js

service.GetSuperCategories(function (data) {console.log('success'},function (error){console.log('error'});

service.js

sampleApp.factory('SCService', function($http, $q) {

    var SuperCategories = [];
    var SCService =  {};

    SCService.GetSuperCategories = function(successMethod,errorMethod) {
        var req = {
            method: 'POST',
            url: SuperCategoryURL,
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            data: "action=GET"
        };
        return $http(req).then(successMethod(data),
errorMethod(error));
    }

    return SCService;
});

answered Oct 5, 2015 at 10:57

Vaibhav Shah

5283 silver badges17 bronze badges

Comments

jsNovice · Accepted Answer · 2015-10-05 11:01:58Z

0

You can use the .success and .error methods of $http service, as below

$http(req).success(function(data, status, headers){
    // success callback:  Enters if status = 200
}).error(function(status, headers){
    // error callback: enters otherwise
});

answered Oct 5, 2015 at 11:01

jsNovice

6467 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to do error handling when fetching data in angularjs service

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related