angular return promise that already has a catch

Question

I have a angular service that provides a login function in order to log in a user:

app.service('AuthSharedService', function($rootScope, $http, authService, UserSession) {
    this.login = function(email, password, rememberMe) {
        return $http.post('/login',
                {
                    'email': email,
                    'password': password,
                    'rememberMe': rememberMe
                })
            .then(function(response){
                console.log("success 1");
                authService.loginConfirmed(response.data);
            }).catch(function(response){
                console.log("catch 1");
            }).finally(function(response){
                console.log("finally 1");
            });
    };
    return this;
});

I also have a controller that is bound to a HTML login formular:

app.controller("loginController",
    function ($scope, $rootScope, $window, $http, $routeParams, AuthSharedService){
        var vm = this;
        vm.email;
        vm.password;
        vm.rememberMe;
        vm.login = function (){
            AuthSharedService.login(vm.email, vm.password, vm.rememberMe)
                .then(function(response){
                    console.log("success 2");
                }).catch(function(response){
                    console.log("catch 2");
                });
        }
    }
);

So far it is very basic.
But when I delete the database user table and then try to login, I get of course a internal error 500 on the REST server. But the console output of angular then is:

catch 1
success 2

But why? Can't I return a $http in order to use the .then(function()) and the .catch(function()) twice?

thanks for any help :)
best regards

score 2 · Answer 1 · answered Sep 04 '17 at 12:20

When you call .catch, it returns a promise. If you don't returns anything, it will returns an auto resolved promise.

If you want to keep the promise in an error state after a .catch, you can do this:

promise
.catch(function(response) {
    handleResponse(response);
    return $q.reject(response);
});

You can also do this:

var promise = ...;
promise.catch(...);
return promise

But keep in mind that if the catch callback is asynchronous, this code will probably don't behave as you want.

score 1 · Accepted Answer · answered Sep 04 '17 at 12:19

catch returns a new promise which is successful by default; that allows you to create chains which catch errors and then continue with some default success scenario:

returnsPromise()
    .catch(() => 'default value')
    .then(value => alert(value))

This will either alert the value from returnsPromise, or, if that fails, a default value of 'default value'.

What you want is to return the original $http promise, not the caught promise:

let p = $http.post(...);
p.catch(...);
return p;

If post() fails, the already attached catch and any other error handlers you may attach will get called if an error occurs. Conversely, only if p is successful will the success handlers be called (and catch won't).

angular return promise that already has a catch

2 Answers2