Javascript promise .catch not working

Question

EDIT: SEE THE ANSWER BELOW

I have a function:

dataFactory.getCurrentStepId(wf.identifier, ctx.identifier)
   .then(function (data) {
      console.log('then');
      $timeout(function () {
      $("#app-node-" + data.identifier)
           .parent().parent().css("border", "5px solid green");
      });
    })
    .catch(function () {
      console.log('error');
      alert('Error!')
      });

The getCurrentStepId has an exception, and I see the error printed on the console for the AJAX request it sends, but my alert and console.log don't fire in the catch.

Any ideas why? Here is the stuff it's calling:

app.factory('dataFactory', function ($http, $q) {
    var _baseUrl = webServiceContext;
    var _doGet = function (endpoint) {
        var deferred = $q.defer();
        $http.get(_baseUrl + '/' + endpoint).then(function (response) {
            deferred.resolve(response.data);
        });
        return deferred.promise;
    };

    var getCurrentStepId = function (wid, cid) {
        return _doGet('wf/step/' + wid + '/' + cid);
    };
})

Here is the answer

@Blunderfest almost got it right:

 $http.get(_baseUrl + '/' + endpoint).then(function (response) {
            deferred.resolve(response.data);
        }).catch(function(e){return deferred.reject(e);});

If `catch` was called anywhere else in your promise chain, then your catch will not fire. — arjabbar, Jan 29 '16 at 18:03
A quick CTRL-F for `catch` in the javascript files shows that as the only place I'm using it. It's a pretty simple bit of code. — mikeb, Jan 29 '16 at 18:05
So the exception isn't being thrown in the `$timeout` callback right? — arjabbar, Jan 29 '16 at 18:09
See the edit. It is being thrown in the `$http.get` query due to a 500 error for an invalid call — mikeb, Jan 29 '16 at 18:10
The $http.get does not have a catch function, so it doesn't know what to do with the error it receives. Add `.catch(function(e){return $q.reject(e);});` — Blunderfest, Jan 29 '16 at 18:12

score 2 · Answer 1 · answered Jan 29 '16 at 18:27

Make sure you return a rejected promise in your catch blocks. So this:

$http.get(_baseUrl + '/' + endpoint).then(function (response) {
        deferred.resolve(response.data);
    })

Should be this:

$http.get(_baseUrl + '/' + endpoint).then(function (response) {
        deferred.resolve(response.data);
    }).catch(function(e){
         return $q.reject(e);
    });

Actually, you can use $q.reject as a shorthand for rejecting a promise, so I think it's a correct answer :). You can also use return $q.when(response) as a shorthand for deferred, resolve and all that.

I recommend reading: $q.defer: You're doing it wrong

Really, I would re-organize your code to follow a few best practices on promises, especially in angular. It's better to return the $http request itself (which is a promise):

app.factory('dataFactory', function ($http, $q) {
    var _baseUrl = webServiceContext;
    var _doGet = function (endpoint) {
        // Returns the promise wholesale.
        return $http.get(_baseUrl + '/' + endpoint).then(function (response) {
            return response.data;
        }).catch(function(e){
            // ensures the returned promise is rejected up the chain.
            return $q.reject(e);
        });
    };

    var getCurrentStepId = function (wid, cid) {
        return _doGet('wf/step/' + wid + '/' + cid);
    };
})

Angular Docs for $q methods:

reject(reason) – rejects the derived promise with the reason. This is equivalent to resolving it with a rejection constructed via $q.reject

The reason you need to do this is that if you do not catch errors and reject promises at lower levels, the promise chain up the line will not know the promise is rejected and treat it as a success.

If you're still manually creating the deferred object, that may be the case, I'm not sure. To return a rejected promise, it definitely works. In what way does it not work? Does it not return a rejected promise or does it just error out? — Blunderfest, Jan 29 '16 at 18:41
As another example: http://stackoverflow.com/questions/24443733/angulars-q-reject-vs-deferred-reject — Blunderfest, Jan 29 '16 at 18:44

score 0 · Answer 2 · answered Apr 28 '23 at 11:49

I find this article has great explaination and example

Inside the promise, the catch() method will catch the error caused by the throw statement and reject().
If an error occurs and you don’t have the catch() method, the JavaScript engine issues a runtime error and stops the program.

score -1 · Answer 3 · answered Jan 29 '16 at 18:17

-1

try this instead

dataFactory.getCurrentStepId(wf.identifier, ctx.identifier)
   .then(function (data) {
      console.log('then');
      $timeout(function () {
      $("#app-node-" + data.identifier)
            .parent().parent().css("border", "5px solid green");
  }, function (err) {
     console.log(err);
     alert(err);
  });

remember then takes 2 parameters - a function if successful, a function if error occurred. You only provided success.

answered Jan 29 '16 at 18:17

Antiokus

534
3
8

2

The way I'm using is equivalent: From the docs `The catch() method returns a Promise and deals with rejected cases only. It behaves the same as calling Promise.prototype.then(undefined, onRejected).` -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch – mikeb Jan 29 '16 at 18:19

Javascript promise .catch not working

3 Answers3