Handle HTTP 500 Internal Server Error in AngularJS - angularjs

Question

I am building an App with ionic and I want to handle the 500 internal server error which occurs in $http() AJAX call. Is it possible to create any interceptors to handle that?
here is my controller code:
.controller('RegistrationController',function($scope,$http){
$scope.doRegistration = function(){
$http({
method : "POST",
url : BASE_URL,
params : {
//sending the parameters as JSON
}
}).then(function successCallback(response){
if(response.status == 200)
//handling the response sent by server
},function errorCallback()});
};
});
if the user enters some invalid inputs and the server is unable to handle that it throws 500 Internal Server Error. When the AJAX call is made I am showing a spinner and when some server error occurs I should stop the AJAX call and stop the spinner and show some popup to user saying "Encountered server error".

Answer 1

'use strict';
angular.module('myApp').factory('MyService', function ($http, $q) {
var BASE_URL = 'some.url.com';
function register() {
var defer = $q.defer();
$http({method: "POST", url: BASE_URL, params: {}})
.then(function (response) {
defer.resolve(response.data);
})
.catch(function (reason) {
defer.resolve(reason);
});
return defer.promise;
}
return {
register: register
}
}).controller('MyController', function ($scope, MyService) {
MyService.register().then(function (response) {
// success
}).catch(function (reason) {
// err
if (reason.status === 500) {
// do something
$scope.spinner = false;
console.log('Encountered server error');
}
});
});

Answer 2

you can create interceptor as below -
app.factory('testResponseInterceptor', function ($q ,$rootScope,$location) {
return {
response: function (response) {
//correct response
return response;
},
responseError: function (response) {
//error in response
}
};
});
and configure it in your module -
app.config(function ($httpProvider) {
$httpProvider.interceptors.push('testResponseInterceptor');
});