$http error handling in AngularJS

Question

$http in my AngularJS project not able to recognize 40X(401,403,405...) errors on iOS. I am using 1.2.10 AngularJS version and Cordova version 3.4.0.

Below is the code I am using:

TE_SERVICES.factory('hello',function ($http,$rootScope) {
return {
loginUser: function(userCredentials,successCallback,errorCallback){
          $http({
               method: "GET",
               url: "data/example.json",
               headers: {"Authorization":'Basic '+userCredentials},
             }).then(function(response){
                                successCallback(response.data);
                                console.log("Success------"+JSON.stringify(response))
             },function(data, status, headers, config){
                                errorCallback(data);
                                console.log("Error------"+JSON.stringify(data)+" "+status)
             })

        }
    }
 });

hello.loginUser($rootScope.encodedUserCredencials,function(persons) {
                // success handler
            }, function(data) {
                // error handler
                console.log(data.status+"===="+status)
                });

data.status is returning 0 and status returns undefined. Please help me to resolve this issue.

Tried to include the domain in whitelist on IOS.But no solution :( It still gives the same response.

But the same code works absolutely fine in Android. Please help me to resolve this issue.

Thanks in advance :)

Answer 1

So you r using the $http from angular. Do you use the error callback or the second function in the then callback ?

Example

$http.get("someUrl")
  .success(function(response){}) // if http code == 200
  .error(function(response){}) // else

Or with then, that can take 2 functions. The first is the onSuccess, the second the onError function.

$http.get("someUrl")
  .then(function(response){
            // if http code == 200
   },
    function(response){
            // else
   }); 

The response parameter does also contain the error codes.

Consider using a $httpInterceptor to handle all errorcodes at the same place, instead handling them in every http callback.

UPDATE: It seems, that the angular doc is incomplete/wrong for the success callback. It doesnt pass 4 parameter there. It does pass a response object that contains all the information about request+response and the passed data.

Update to the edit:

Dont write callbacks by yourself. Use angular promises:

TE_SERVICES.factory('hello',function ($http,$rootScope) {
   return {
       loginUser: function(userCredentials){
          return $http({
             method: "GET",
             url: "data/example.json",
             headers: {"Authorization":'Basic '+userCredentials},
          }).then(function(response){
             return response.data;                                    
          },function(response){
             return response;                                
          });    
        }
    }
 });

hello.loginUser($rootScope.encodedUserCredencials)
     .then(function(persons) {                // success handler

     }, function(data) { // error handler
       console.log(data);
     });

Try this and tell me if the console.log logs something.