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

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.

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.