In Angular, what's the conceptual difference between the error and catch functions for promises?

Question

I finally got Angular promise error handling down but it was counter-intuitive to me. I expected errors to be handled by the failure callback but instead I had to use a catch.

I don't quite understand conceptually why the catch is executed rather than the failure callback.

What I expected:

SomeAsyncService.getData().then(function (result) {
    // The call is successful.
    // Code in this block throws an error.
}, function (error) {
    // I expected to handle errors here.
});

What eventually worked.

SomeAsyncService.getData().then(function (result) {
    // The call is successful.
    // Code in this block throws an error.
}).catch(function (error) {
    // Where the error is actually caught. 
});

If there is a more appropriate way to handle promise errors, let me know.

Answer 1

The second argument should be almost never be used literally in application code while also using the first. It is mostly about promise library interoperability between different implementations.

You should always use .catch unless you specifically have some weird corner case where you need .then(succcess, fail).

See The .then(success, fail) anti-pattern.

Also Q library (The one angular $q is based on) has similar section in their readme

Answer 2

I think you're slightly misunderstanding how promises work.

In your first code block there is only one promise object and it's SomeAsyncService.getData(). The errorCallback is not called here because that promise is resolved.

In the second code block there are actually 2 promise objects you're working with. Note that .then() "returns a new promise which is resolved or rejected via the return value of the successCallback, errorCallback". So what's happening is you're catching the error from the second promise returned from SomeAsyncService.getData().then(...).