Promise always resolves as successful | AngularJS

Question

I have a service that is handling authentication (AuthService). I have another service that handles responses to the client (ResponseService). I then have a controller that leverages these services (SignupController).

I am signing up with an email I know already exists and expect to see a toastr error stating as such. When I click the submit button it fires AuthService.signup when it receives a 409 from my api it correctly follows the right error response and toastr displays the error to my screen. However, the page is being redirected to dashboard as stated in the onSuccess function in SignupControllr.js. Why is that?

SignupController:

AuthService.signup(email, password, company, name, reCaptcha)
.then(function onSuccess(){
   $location.path('/dashboard');
 });

AuthService.signup():

signup: function (email, password, name, company, reCaptcha) {
  return $http.put('/api/user/signupWithEmail', {
      email: email,
      password: password,
      company: company,
      name: name,
      reCaptcha: reCaptcha
    })
    .then(function onSuccess (res){
      $localStorage.userHash = res.data.user;
      $auth.setToken(res.data.token);
      console.log('Pass');
    })
    .catch(function onError(res) {
      ResponseService.error(res);
      console.log('Fail');
    });
}

ResponseService.error():

  return {
    error: function (res) {
      if (res.status === 500) {
        return toastr.error('An unexpected error occurred, please try again later.', 'Error', {
          closeButton: true
        });
      } else if (res.status === 404) {
          return toastr.error('Invalid email/password combination.', 'Error', {
            closeButton: true
          });
      } else if (res.status === 401) {
        return toastr.error('You are not allowed access to this resource.', 'Error', {
          closeButton: true
        });
      } else if (res.status === 409) {
        return toastr.error('That email address is already taken. Please try again.', 'Error', {
            closeButton: true
        });
      }
    }
  };

score -1 · Answer 1 · edited May 23 '17 at 12:22

Thanks to this SO: Break promise chain and call a function based on the step in the chain where it is broken (rejected)

In promise chaining, if you do not return anything, you are effectively returning a resolved promise for the value undefined.

I had to edit my AuthService:

.catch(function onError(res) {
  return ResponseService.error(res);
});

Also - I needed to return $q.reject() in all of my .catch(){} in AuthService.

Promise always resolves as successful | AngularJS

1 Answers1