angularjs handling $resource $promise errors

Question

Could somebody help me figure out how to return hard-coded data in my AngularJS factory if there is an error connecting to my API. My hard-coded data are located in another factory called "dataFactory". Appreciate the assistance.

service.factory("ScheduleFactory", ['$http', '$resource', '$q', 'dataFactory', function($http, $resource, $q, dataFactory) {
        var objFactory = {};

        objFactory.getDaysOfWeek = function(includeWeekends) {
            var days = [];
            var API  = $resource(restURL + '/daysOfWeek/');

            API.query()
                .$promise
                    .then(function(data) {
                        isEmpty = (data.length === 0);

                        if (!isEmpty) {
                            days    = data;
                        };
                    })
                    .catch(function(error) {
                        console.log("rejected " + JSON.stringify(error));

                        var data    = null;
                        days    = dataFactory.daysOfWeek;

                        console.log(days.length); // returns 5
                    });


            console.log("after promise " + days.length);  // returns 'after promise 0'

            return days;
        };

My dataFactory is defined as follows:

dataApp.factory("dataFactory", function() {
    objDataFactory  = {};

    objDataFactory.daysOfWeek = [
        {   dayName:        'Monday'
            , dayAbbrev:    'Mon'
            , index:        1
            , isSelected:   false
            , isWeekday:    true    }
        , { dayName:        'Tuesday'
             , dayAbbrev:   'Tue'
             , index:       2
             , isSelected:  false
             , isWeekday:   true    }
        , { dayName:        'Wednesday'
             , dayAbbrev:   'Wed'
             , index:       3
             , isSelected:  false
             , isWeekday:   true    }
        , { dayName:        'Thursday'
             , dayAbbrev:   'Thu'
             , index:       4
             , isSelected:  false
             , isWeekday:   true    }
        , { dayName:        'Friday'
             , dayAbbrev:   'Fri'
             , index:       5
             , isSelected:  false
             , isWeekday:   true    }
    ];

    return objDataFactory;
});

Solution 1

I'd like to think this is what you are looking for:

service.factory("ScheduleFactory", ['$http', '$resource', '$q', 'dataFactory', function($http, $resource, $q, dataFactory) {
     var objFactory = {};

     objFactory.getDaysOfWeek = function(includeWeekends) {
          var API  = $resource(restURL + '/daysOfWeek/'), defObj = $q.defer();

          var daysQuery = API.query();
          daysQuery.$promise.then(function(data) {
                    //you can add anything else you want inside this function
                    defObj.resolve(data);
               }, function(error) {
                    //you can add anything else you want inside this function
                    defObj.resolve(dataFactory.daysOfWeek);
               });

            return defObj.promise;
        };

I've skipped any data formatting and assignment details because you're liable to change them anyway. By wrapping your API query in an extra promise you gain the ability to manipulate what is returned. If your API can be reached, you return the data from it in the resolution of your outer promise. Otherwise, you return your hard-coded data from your other service in the resolution of your outer promise.

Solution 2

No catch block, use a regular error callback function:

   API.query()
        .$promise
            .then(function(data) {
                    isEmpty = (data.length === 0);

                    if (!isEmpty) {
                        days    = data;
                 },
                 function(error) { // removed catch here
                    console.log("rejected " + JSON.stringify(error));

                    var data    = null;
                    days    = dataFactory.daysOfWeek;

                    console.log(days.length); // returns 5
                ...

See in the docs:

then(successCallback, errorCallback, notifyCallback) – regardless of when the promise was or will be resolved or rejected, then calls one of the success or error callbacks asynchronously as soon as the result is available. The callbacks are called with a single argument: the result or rejection reason. Additionally, the notify callback may be called zero or more times to provide a progress indication, before the promise is resolved or rejected.

Comments

[helloMeWorld]

@shomz-Thanks for your feedback. Tried your solution and works upto console.log statement 'returns 5'. However, once it exits the promise call, "days" is still not populated. 'after promise' still shows 0.

[helloMeWorld]

@MBielski-Thanks for your feedback. Tried your solution but it's not returning anything either plus no errors except the 404 from API. I assigned varPromise = ScheduleFactory.getDaysOfWeek() in controller. Then did: varPromise.then(function(data) { $scope.days = data }); No success. Am I doing it wrong?

[Shomz]

And what does the error say? That's what I'd fix in the first place. Your question was about handling error, I honestly didn't check why does the service fail.

[MBielski]

Sorry, saw a copy/paste problem in my code (the second then clause) and removed it. Now it should be working correctly.

[helloMeWorld]

@shomz- There were no console errors returned except 404. Sorry if my question was not clear. The error I wanted to handle was when my API is not connecting. I've tried the error callback but to no avail-no records were being returned. MBielski's solution did the trick. Thanks for your assistance, though.

[Bergi]

Don't use the deferred antipattern!

[MBielski]

Interesting... I was not aware of this! Thanks for bringing it to my attention Bergi.