Angular $q .catch() method fails in IE8

Question

I'm experiencing a weird bug on IE8 while trying to catch a promise reject (promise returned by a basic ngResource call) :

This code work with .then(success, fail) syntax :

promise.then(function(response) {
  // success
},
function(response) {
  // error
});

but this one fails with .then(success).catch(fail) syntax :

promise.then(function(response) {
  // success
})
.catch(function(response) {
  // error
});

and the IE error pointing to the .catch() line is :

Expected identifier

Am I doing something wrong ? someone reproduce it ? or is it a common IE8 due to restricted keyword ?

Thanks

Seymourseys

Answer 1

You need to use bracket notation:

promise.then(function(response) {
  // success
})
["catch"](function(response) {
  // error
});

This is because IE8 implements ECMAScript 3 that does not allow bare keywords in dot notation. Modern browsers implement ECMAScript 5 that allows it.

A lot of libraries alias .catch with another keyword. However, the way Angular promises are built it is not simple to extend $q promises. So ["catch"] would have to do. Note this is also true for finally.

Himalayas

Thanks for the explanation. I'll stick with the then(null, error) notation which looks better than this ugly ["catch"] – Seymourseys

@Bixi alternatively, you can use a preprocessor like ESPRIMA with ESCODEGEN that will automatically replace .catch with ["catch"] as part of your build process. – Himalayas

Thanks for the info, but that's overkill and adding complexity for not much – Seymourseys

Answer 2

Yes, IE8 thinks it's a keyword. You can get around this a couple of ways:

1. promise.then(function() { })['catch'](function() { });
2. promise.then(function() { /* success handler */ })).then(null, function() { /* error handler */ });
3. Or combine success and error into one then statement, if such a thing is appropriate: promise.then(function() { /* success handler here */ }, function() { /* error handler here */ });

catch is shorthand for #2.

Raynard

Your two alternatives do completely different things though. – Himalayas

The first one will catch errors in the .then, the second will not. – Himalayas

I'm not following you. Then can take 1, 2 or 3 function arguments. The first being success, the second being error, the third being notify. catch just calls and returns the result of .then(null, fn). So ok, I meant that in my answer (so there are three options), but I instinctively optimized it into one call, with both success and error handlers. – Raynard

To clarify difference: #24662789 ... third option isn't catching exceptions thrown in success handler as it would do in first and second option. – Allopathy

Answer 3

http://docs.angularjs.org/api/ng/service/$q#the-promise-api

Because finally is a reserved word in JavaScript and reserved keywords are not supported as property names by ES3, you'll need to invoke the method like promise'finally' to make your code IE8 and Android 2.x compatible.

Same for catch.

Stlaurent