AngularJS post Success callback fired even on error

Question

Why is the success callback fired here when the response is 500?

$scope.submit = function() {
    var user = $scope.user;
    // provide username and password to obtain a token which will be used for api calls
    $http.post('/authenticate', user).
        success(function(data, status, headers, config) {
            $window.sessionStorage.token = data.token;
            $location.path('/');
        }).
        error(function(data, status, headers, config) {
            $scope.errors = data.errors;
            $scope.message = 'Invalid JSON format, see guidelines for correct format';
            $scope.uploadError = true;
            console.log('ERROR TRUE');
        });
};

And the interceptor:

angular.module('uploadApp')
       .factory('authInterceptor',

function ($rootScope, $q, $window, $location) {
  return {
    request: function (config) {
      config.headers = config.headers || {};
      if ($window.sessionStorage.token) {
        config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
      }
      return config;
    },
    response: function (response) {
      return response || $q.when(response);
    },
    responseError: function(response) {
      if (response.status === 401) {
         $location.path('/login');

      }
      return response || $q.when(response);
    }
  };
});

Answer 1

The way angular $q promises work is that errors need to be unhandled to continue down the error path - otherwise it assumes that you have corrected the issue or handled the error. So the easiest way is to throw the response from your error path, until you get to the point you actually want to handle it.

angular.module('uploadApp')
   .factory('authInterceptor',

function ($rootScope, $q, $window, $location) {
  return {
    request: function (config) {
      config.headers = config.headers || {};
      if ($window.sessionStorage.token) {
        config.headers.Authorization = 'Bearer ' +
            $window.sessionStorage.token;
      }
      return config;
   },
   response: function (response) {
     return response || $q.when(response);
   },
   responseError: function(response) {
     if (response.status === 401) {
       $location.path('/login');
     }
     // instead of returning, you should throw, 
     // and when you throw you don't need to wrap, as it will
     // handle it for you.
     //return response || $q.when(response);
     throw response;
   }
  };
});

$q will ensure that the thrown object is wrapped in the promise call-chain. Note that whenever you return in a $q promise it will assume you have handled any issues, unless you throw instead of return. This allows you to have errors in resolvers further down the call-chain that can then be treated as an error.

If throwing isn't your style, you can defer a new promise and return that, then reject it - but that is way less efficient than using the current call-chain.