Error handler in .then() not triggered unless .success and .error is used

Question

I'm writing a function that handles results from an Angular $http. In my $http request I'm using .then() to handle results.

var GET = function (url) {
  return $http({
    method: 'GET',
    url: url
  }).then(
  function (data) {
    return data.data;
  },
  function (data) {
    return data.data;
  });
};

And then I call the GET function from another function, like this:

var initializeUsers = function () {
  return dbService.GET(serverUrl + dbResource).then(
  function (data) {
      // Some code to handle success
  },
  function (data) {
    // Some code to handle error
  });
};

Here's the problem: If there is an error in the HTTP request, it is being handled by the error handler in the GET function. BUT, when the initializeUsers is run, the error handler is NOT triggered, but rather the success handler. So the error does not "bubble" up, which is should

However, if I, instead of using .then in the GET function, I use .success and .error, like this:

var GET = function (url) {
  return $http({
    method: 'GET',
    url: url
  }).success(
  function (data) {
    return data.data;
  }).error(
  function (data) {
    return data.data;
  });
};

it works fine in the initializeUsers. HOWEVER, if I then call initializeUsers from another function using .then, the error handler in it is not triggered. I would seem that I have to use .success and .error all the way, which is not how it's supposed to work, as far as I can understand. As long as I explicitly use .error on every function in order to actually catch the error, otherwise the error gets lost and the next function acts as though the last one was successful.

I'm I misunderstanding, or is there something wrong with my code?

Well, if you've *handled* in a `then` callback already then it's no longer an error… You might want to have a look at [this control flow diagram](http://stackoverflow.com/a/24663315/1048572) — Bergi, Jul 24 '14 at 22:28
@Bergi `data` is just the name of the variable. You can name it anything you want. Passing the error along means you can handle errors in multiple levels, which is very often a necessity in non-trivial applications. — Johanna Larsson, Jul 25 '14 at 15:06
@ErikKronberg: Of course you can name it what you want, but the code looks very suspicious if success- and error-handlers share the same code. Btw, if you want to handle an error on multiple levels you'd need to re`throw` it… — Bergi, Jul 26 '14 at 08:41
Much of the actual code in my example was removed for brevity, no need for all of it to show here since that part made no difference for the outcome — stinaq, Jul 30 '14 at 09:49

score 3 · Accepted Answer · answered Jul 24 '14 at 20:13

If you return from a promise's error callback, it'll actually return a resolved (not rejected) promise. Use throw instead and the resulting promise will be rejected...

var GET = function (url) {
  return $http({
    method: 'GET',
    url: url
  }).then(
  function (data) {
    return data.data;
  },
  function (data) {
    throw data.data;  // use throw here
  });
};

Error handler in .then() not triggered unless .success and .error is used

1 Answers1