We Keep Coding

Javascript http get success function capturing error response

I am making a http request to a url which is returing a 500 error response(This is the expected behavior). But this is error is getting captured in the success function instead of error function.
$http.get("myUrl")
.then(function (response) {
console.log(response);
}
.function (error) {
// Handle error here
});
Please help in understanding this and the correct way to use this.

It should be either:
$http.get("myUrl")
.then(function (response) {
console.log(response);
}
,function (error) {
// Handle error here
});
Or
$http.get("myUrl")
.then(function (response) {
console.log(response);
})
.catch (function(error) {
// Handle error here
});

If this is angulars $http, it's supposed to be something like this:
$http.get("myUrl")
.then(
function (response) {
console.log(response);
},
function (error) {
// Handle error here
}
);
You want two functions as your arguments to then(). The first is your successCallback, the second your errorCallback.
As an alternative you may add an catch() to your promise chain. Which is easier to read and prevents errors like yours.

I had an interceptor in my application which was causing the problem.
All my error responses were intercepted and returned without a status. Below is the code.
return {
'responseError': function(config) {
if(config.status===401){
//Do Something
return config;
}
return config;
}
}
Changing the return statement to return $q.reject(config); started returning the correct status.

$http request. Response comes to success function even when status code is 401

In my Angular app I have a login function. But when I send wrong credentials and response come with status 401: Bad Credentials (there's even response.status = 401) it still goes to success.
So I'm getting $notify "Success login and then html error page in my interceptor. That's confusing. I'm not sure what I've done to create this mess.
this.getTokenCustom = function (user) {
$http.post('/login',
JSON.stringify({username: user.username, password: user.password}))
.then(
function success(response) {
localStorage.setItem('token', response.data.token);
$.notify({message: "Success login"},{type:'success'});
$state.go('roles');
},
function error(data) {
console.log(data);
$.notify({message: data.data.message},{type:'danger'});
}
);
};
UPD
this.getTokenCustom = function (user) {
$http.post('/login',
JSON.stringify({username: user.username, password: user.password}))
.then(
function success(response) {
localStorage.setItem('token', response.data.token);
$.notify({message: response.status + " Success login"},{type:'success'});
$state.go('roles');
},
function error(data) {
console.log(data);
$.notify({message: data.data.message},{type:'danger'});
}
);
};

The likely cause of this is that you may have a custom interceptor that doesn't handle error conditions properly.
This post can point you on the right direction: http://www.jamessturtevant.com/posts/AngularJS-HTTP-Service-Success-Handler-400-Response-Code-and-Interceptors/
To quote the post:
When you handle the requestError or the responseError for a interceptor and you wish to pass the error on to the next handler you must use the promise api to reject the message:
$httpProvider.interceptors.push(function($q) {
return {
'requestError': function(rejection) {
// handle same as below
},
'responseError': function(rejection) {
if (canRecover(rejection)) {
// if you can recover then don't call q.reject()
// will go to success handlers
return responseOrNewPromise;
}
// !!Important Must use promise api's q.reject()
// to properly implement this interceptor
// or the response will go the success handler of the caller
return $q.reject(rejection);
}
};
});
A similar issue to yours was reported on Angular's Github repository and the issue had to do with a custom interceptor not handling error conditions properly.

Angular $httpProvider Interceptor and $resource

I have a simple Interceptor in angular that intercepts requests and adds a authorization header. It also intercepts a response error of 401 to know if the request failed because of authorization.
Unfortunately it seems to mess with $resource, because my $resource calls ALWAYS return the success callback and never an error (be it 400 or 500 whatever).
It's definitly the interceptor, because if I remove it, the $resource calls return with the correct callback.
Any ideas on how to fix this behavior?
Here's the interceptors request:
function request(config) {
var token = 'whatever-my-token-is';
if (token) {
config.headers.authorization = token;
}
return config;
}
And the responseError:
function responseError(response) {
if (response.status === 401) {
$rootScope.$broadcast('unauthorized');
}
return response;
}
Any help appreciated

I think you need to use a promise to return the error.
adding $q to your Interceptor factory.
like so
$provide.factory('MyHttpInterceptor', function ($q){
...
})
and then have the responseError()
function responseError(response) {
if (response.status === 401) {
$rootScope.$broadcast('unauthorized');
}
return $q.reject(response);
}
this link might help also https://djds4rce.wordpress.com/2013/08/13/understanding-angular-http-interceptors/

Angularjs $http promise; Get the callback functions fn1 and fn2 from $http().then(fn1, fn2)

I am doing a custom Oauth2 authentication module. I have a requestExecutor factory:
$http({
url: requestObject.url,
method: requestObject.method,
cache: requestObject.cache,
headers: requestObject.headers,
data: requestObject.data})
.then(function (resData) {
if (requestObject.callback) {
requestObject.callback(resData.data);
}
}, function () {
if (requestObject && requestObject.customErrorCallback) {
requestObject.customErrorCallback();
}
});
and Http Interceptor:
'responseError': function (rejection) {
console.log(rejection)
switch (rejection.status) {
case 401 :
{
$rootScope.$emit(CONST.UNAUTHORIZED);
break;
}
case 403 :
{
$rootScope.$emit(CONST.FORBIDDEN, rejection.config);
break;
}
}
return $q.reject(rejection);
}
So when I execute a request and get 403 response error
from the server I want to send the full request to the listener of CONST.FORBIDDEN (the only thing that is missing is the callbacks from the $http().then() promise). The reason is that I want to execute the failed request again after I finish with the refreshing the access token.
My questions are:
Where are stored $http().then() promises?
Can to get $http().then() promises?
How can I implement 2.?

No sure about your intention, there would probably be better solutions, but you can register the callback handlers in the config object and access them in the interceptor. plnkr
But here is a better design. angular-app/securityInterceptor
You will do the refreshing in the interceptor and execute the request again. If the second request was successful you return the result, which will be processed by your success/error-handlers.
$scope.fetchAsync = function(forceError) {
function successHandler(result) {
$scope.content = result.data;
}
function errorHandler(result) {
$scope.content = result;
}
$scope.content = 'Loading...';
$http.get(forceError ? 'not-found' : 'test.txt', {
handler: {
success: successHandler,
error: errorHandler
}
}).then(successHandler, errorHandler);
}
$httpProvider.interceptors.push(function($q) {
return {
'responseError': function(rejection) {
console.log(rejection.config.handler);
return rejection;
}
};
});

How to intercept all http requests using AngularJS?

My Question is a bigger and broader version of this question. I want to intercept all http requests issued inside an AngularJS function. Later I need to alter the request URL and than pass it to the server..
How can I do that ? So far I have used $httpProvider and $q to create a interceptor but I am only able to intercept only $http requests not all the requests i.e. if someone clicks on any href link on my page etc. My interceptor code is :-
// register the interceptor as a service
myModule.factory('myHttpInterceptor', function ($q) {
return {
// optional method
'request': function (config) {
// do something on success
console.log("request success");
return config;
},
// optional method
'requestError': function (rejection) {
// do something on error
console.log("Request Error");
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
},
// optional method
'response': function (response) {
// do something on success
console.log("Response received");
return response;
},
// optional method
'responseError': function (rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
}
};
});
myModule.factory('myInterceptor', ['$log', function ($log) {
$log.debug('$log is here to show you that this is a regular factory with injection');
var myInterceptor = {
};
return myInterceptor;
}]);
myModule.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push('myHttpInterceptor');
}]);

Intercepting navigation to other pages is different from intercepting http requests. Maybe what you want is to intercept $location changes.
Have a read through this. You can do it but it depends on where the location changes are to.
http://uiadventures.wordpress.com/2013/09/06/routechange-angularjs/