Angular $http executes function "success" instead of "error" - angularjs

Question

my Angular client calls a web api function which checks if the user is authorized by password and user name. Here is the relevant beginning of the method:
public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
{
var allowedOrigin = context.OwinContext.Get<string>("as:clientAllowedOrigin");
var userManager = context.OwinContext.Get<DividendsManagerUserManager>();
if (allowedOrigin == null) allowedOrigin = "*";
context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { allowedOrigin });
var user = await userManager.FindAsync(context.UserName, context.Password);
if (user == null)
{
context.SetError("invalid_grant", "Der Benutzername oder das Passwort ist ungültig.");
return;
}
As you see, I use context.SetError in case the provided login is invalid. Doing so returns this message as seen in Fiddler:
HTTP/1.1 400 Bad Request
Cache-Control: no-cache
Pragma: no-cache
Content-Type: application/json;charset=UTF-8
Expires: -1
Server: Microsoft-IIS/10.0
Access-Control-Allow-Origin: *
X-Powered-By: ASP.NET
Date: Fri, 18 Nov 2016 12:49:10 GMT
Content-Length: 97
{"error":"invalid_grant","error_description":"Der Benutzername oder das Passwort ist ungültig."}
Looks good to me. But in Angular, the api call "succeeds", because the success function callback is executed:
var _login = function(loginData) {
var data = "grant_type=password&username=" + loginData.userName + "&password=" + loginData.password + "&client_id=" + authSettings.clientId;
var deferred = $q.defer();
$http.post(serviceBase + 'token', data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function(response) {
localStorageService.set('authorizationData', { token: response.access_token, userName: loginData.userName, refreshToken: response.refresh_token, useRefreshTokens: true });
fillAuthData();
deferred.resolve(response);
}).error(function(err, status) {
_logOut();
deferred.reject(err);
});
return deferred.promise;
};
Anyone knows what wents wrong?
Regards,
Torsten
P.S.: Within the success function I could check if the response contains an error. But that feels like a bad hack.

Answer 1

In a promise chain, rejections can be converted to success by returning values to the rejection handler. This makes it possible to fix problems and retry an operation. But it can also lead to bugs related to unwanted conversions.
promise.then(function successHandler(value) {
//return to chain value
return value;
}).catch(function rejectHandler(errorValue) {
//to avoid conversion
//throw to chain rejection
throw errorValue;
//OR return rejected promise
//return $q.reject(errorValue);
});
One of the most common causes of unwanted conversions is failing to return or throw anything:
//ERRONEOUS
function responseError(errorResponse) {
console.log(errorResponse.status);
}
In the above example, the rejection handler erroneously converts the rejection to a success. When a function omits either a return statement or a throw statement, the function returns undefined. This causes the rejection to be converted to a success that resolves with a value of undefined.
So when debugging erroneous convertions, check the rejection handlers. Then look for a badly behaving interceptor.

Answer 2

I just found the source of the error. I wrote an interceptor. My intention was just to set a property of a service I injected into the interceptor. Because of this, I just did not manipulate the rejection in any way and just passed it through like this:
function responseError(rejection) {
busyService.isBusy = true;
return rejection;
}
But this seems to make the $http.post a success.
If I do this the $http.post is an error (as wanted):
function responseError(rejection) {
busyService.isBusy = true;
var deferred = $q.defer();
deferred.reject(rejection);
return deferred.promise;
}
I still don't know why and will have to further investigate. If someone can further explain, this would be nice.