Get $http response error status on AngularJS

Question

I follow an online course in AngularJS and I am on the first steps of learning it.

I am trying to call an API after a form submission and based on the API response, show and hide some data.

What I try to do first is to check the status response in case it returns 500 error for invalid API call. However, it seems I cannot do it.

Part of my service file:

  service.getMenuItem = function (shortName) {

    return $http.get(ApiPath + '/menu_items/' + shortName + '.json')
    .then(function successCallback(response) {
      return response.data;
    }, function errorCallback(response) {
      return response.status;
    })
  };

And on my controller:

SignupController.$inject = ['MenuService'];
function SignupController(MenuService) {
  var signupCtrl = this;

  signupCtrl.submit = function () {
    signupCtrl.response = MenuService.getMenuItem(signupCtrl.user.favouritedish);
    if ( signupCtrl.response == 500 ) {
      signupCtrl.dishError = true;
    }
  };
}

If I don't have any error on the $http call, everything work as it should. However, with the 500 error, it seems that it doesn't. I tried to log the signupCtrl.response on my controller and the value: 500 is there. But the if cannot be validated.

Version 1.5.8 on AngularJS

What's the current output of your response? Just a number or an object? — Aer0
– Aer0, Commented Oct 31, 2016 at 11:21
@Aer0 It is an object. $$state:Object -> status: 1 and value: 500 — Tasos
– Tasos, Commented Oct 31, 2016 at 11:24
Not sure right now, but tt may work with signupCtrl.response.value then. — Aer0
– Aer0, Commented Oct 31, 2016 at 11:25
@Aer0 Forgot to mention that I tried it too and it returns undefined — Tasos
– Tasos, Commented Oct 31, 2016 at 11:26
Would you mind sharing a functional fiddle so we could play with? — Aer0
– Aer0, Commented Oct 31, 2016 at 11:28

Ben Bracha · Accepted Answer · 2016-10-31 14:34:19Z

4

Your getMenuItem functions returns a promise, not the resolved value. So just use "then" on it, to check the resolved value.

MenuService.getMenuItem(signupCtrl.user.favouritedish).then(
   function(response) {
      if (response === 500) {
         signupCtrl.dishError = true;
      }
   }
);

Hope that helps. BTW, this code may be confusing, as "500" may be a "response.data" legit response. Therefore, it it better not to put a "error" callback and let the calling service handle errors itself. e.g.

 MenuService.getMenuItem(signupCtrl.user.favouritedish).then(
       function(response) {
          // Do something with response.data
       }
    ).catch(error) {
       singupCtrl.dishError = true;
    }

answered Oct 31, 2016 at 14:34

Ben Bracha

1,4172 gold badges16 silver badges30 bronze badges

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

Comments

Nikhil Mohanan · Accepted Answer · 2016-10-31 11:22:07Z

1

Call a service function with .then() chaining method.

SignupController.$inject = ['MenuService'];

    function SignupController(MenuService) {
      var signupCtrl = this;

      signupCtrl.submit = function() {

        MenuService.getMenuItem(signupCtrl.user.favouritedish)
          .then(function(result) {
            console.log(result.data)
          }, function(error) {
            console.log(error.data)
          })
      };
    }

answered Oct 31, 2016 at 11:22

Nikhil Mohanan

1,2601 gold badge12 silver badges23 bronze badges

Comments

Nadeem Khoury · Accepted Answer · 2016-10-31 11:23:35Z

0

$http service won't return promise. It will return a callback function either its success or error. so your service should look like this:

function getMenuItem() {

            var deferred = $q.defer();

            $http.get(serviceBase + '/api/itemId').success(function (result) {
                deferred.resolve(result);
            }).error(function (err) {
                deferred.reject(err.status);

            });
            return deferred.promise;
        }

so in this case, you will resolve the result if it success. or you will resolve the status if it failed.

And in your controller, you should do the following:

SignupController.$inject = ['MenuService'];
function SignupController(MenuService) {
  var signupCtrl = this;

  signupCtrl.submit = function () {
    signupCtrl.response = MenuService.getMenuItem(signupCtrl.user.favouritedish).then(function(response){

    //to do if it success
    }, function(errorStatus){
     signupCtrl.dishError = true;
    // to do with the error status
  };
}

answered Oct 31, 2016 at 11:23

Nadeem Khoury

9378 silver badges18 bronze badges

2 Comments

Tasos Over a year ago

Using success and error has been deprecated from AngularJS and get - then is the only suggested way in their Docs.

Nadeem Khoury Over a year ago

yes bro , the idea is to use $q service to return a promise from your service. am sure if you follow my answer, it will work.

Collectives™ on Stack Overflow

Get $http response error status on AngularJS

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related