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

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.

Answer 2

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.

Answer 3

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.