AngularJS $resource Error Handing with Callback

Question

I have a factory that has multiple services for querying a custom API I built. The callbacks all work, but I'm wondering how I can have any error handling while fetching.

.factory('customApiService', function ($resource) {
      return {
          yelp: function (businessId, callback) {
              var api = $resource('../../api/Yelp/:businessId', {
                  businessId: businessId
              }, {
                  fetch: 'JSONP',
                  'query': { isArray: false }
              });

              api.fetch(function (response) {
                  callback(response);
              });
          },
          tripAdvisor: function (hotelId, callback) {
              var api = $resource('../../api/TripAdvisor/:hotelId', {
                  hotelId: hotelId
              }, {
                  fetch: 'JSONP',
                  'query': { isArray: false }
              });

              api.fetch(function (response) {
                  callback(response);
              });
          }
      }
  });

And an example of using this factory in a controller:

.controller('yelpCtrl', [
  '$scope', 'customApiService', function ($scope, customApiService) {

      customApiService.yelp("yelpIdHere", function (d) {
          //On successful callback run code
      });

      customApiService.tripAdvisor("tripAdvisorIdHere", function (d) {
          //On successful callback run code
      });
   }
])

Currently if there is any bad response (404, 500, 504, etc), the callback is not fired.

possible duplicate of How to handle $resource service errors in AngularJS — lucuma
– lucuma, Commented Jul 29, 2014 at 16:25

Community · Accepted Answer · 2017-05-23 12:23:23Z

Had to change my Factory to return an errorCallback as well as a successful callback:

.factory('customApiService', function ($resource) {
  return {
      yelp: function (businessId, callback, errorCallback) {
          var api = $resource('../../api/Yelp/:businessId', {
              businessId: businessId
          }, {
              fetch: 'JSONP',
              'query': { isArray: false }
          });

          api.query(function (response) {
              callback(response);
          },
          function (error) {
              errorCallback(error);
          });
      },
      tripAdvisor: function (hotelId, callback, errorCallback) {
          var api = $resource('../../api/TripAdvisor/:hotelId', {
              hotelId: hotelId
          }, {
              fetch: 'JSONP',
              'query': { isArray: false }
          });

          api.query(function (response) {
              callback(response);
          },
          function (error) {
              errorCallback(error);
          });
      }
  }
});

So now in the controller, I have a second function as a parameter to my factory calls which will handle any errors:

.controller('yelpCtrl', [
  '$scope', 'customApiService', function ($scope, customApiService) {

      customApiService.yelp("yelpIdHere", function (d) {
          //On successful callback run code
      },
      function(e){
          //Do error handling here
      });

      customApiService.tripAdvisor("tripAdvisorIdHere", function (d) {
          //On successful callback run code
      },
      function(e){
          //Do error handling here
      });
   }
])

This answer seemed to help

Dan Doyon · Accepted Answer · 2014-07-29 16:32:49Z

1

The solution probably is to use $promise. ngResource instances and collections both have $promise so instead of working with the $resource object use the promise which comes with success, error, finally methods. see $q doc on angular site

answered Jul 29, 2014 at 16:32

Dan Doyon

6,7302 gold badges33 silver badges40 bronze badges

Collectives™ on Stack Overflow

AngularJS $resource Error Handing with Callback

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related