85

I have a simple code that runs perfectly on every browser except for the Internet Explorer 11. How can I make it work on all browsers?

Codepen

'use strict';

let promise = new Promise((resolve, reject) => {

  setTimeout(() => {
    resolve("result");
  }, 1000);
});

promise
  .then(
    result => {
      alert("Fulfilled: " + result);
    },
    error => {
      alert("Rejected: " + error);
    }
  );
Rafael Tavares
  • 5,678
  • 4
  • 32
  • 48
Billy Logan
  • 2,470
  • 6
  • 27
  • 45
  • 3
    ie11 does not have es2015 – Nina Scholz Mar 15 '16 at 16:05
  • 10
    IE11 neither supports [arrow functions](http://caniuse.com/#feat=arrow-functions) nor [native Promises](http://caniuse.com/#feat=promises). Use a JS transpiler (like [babel](https://babeljs.io/)) or don't use ES6 features. For Promise support you can use a library like [bluebird](http://bluebirdjs.com/). – Tomalak Mar 15 '16 at 16:07
  • 4
    (BTW, note how http://caniuse.com shows that this code would also not run in some other browsers than IE11. Make a habit of checking there how well-supported a JS, CSS or HTML feature you want to use is.) – Tomalak Mar 15 '16 at 16:32
  • Related http://stackoverflow.com/questions/27835687/is-there-a-way-to-implement-promises-in-ie9 – Benjamin Gruenbaum Mar 15 '16 at 19:47
  • 2
    If you are using Babeljs to transpile your code, you can install the "es2015-ie" preset along with the "babel-polyfill" npm module to solve this compatibility issue with IE as well as avoid a slew of other IE related issues – Ilia Talalai Apr 13 '17 at 23:21

2 Answers2

114

If you want this type of code to run in IE11 (which does not support much of ES6 at all), then you need to get a 3rd party promise library (like Bluebird), include that library and change your coding to use ES5 coding structures (no arrow functions, no let, etc...) so you can live within the limits of what older browsers support.

Or, you can use a transpiler (like Babel) to convert your ES6 code to ES5 code that will work in older browsers.

Here's a version of your code written in ES5 syntax with the Bluebird promise library:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>

<script>

'use strict';

var promise = new Promise(function(resolve) {
    setTimeout(function() {
        resolve("result");
    }, 1000);
});

promise.then(function(result) {
    alert("Fulfilled: " + result);
}, function(error) {
    alert("Rejected: " + error);
});

</script>
jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • 4
    I guess also jquery.deffered can be used , jquery.deffered is supported probably from i.e. 6+ , also why jquery deffered since jquery is quite a popular and useful library and many times in big projects which includes stuff on JS, most of them ,if they are using libraries then they would mostly be using Jquery too. so you wont be required to add another dependency to your project and can make your team leads / project managers happier – Shreyan Mehta May 24 '18 at 05:21
  • @ShreyanMehta - Yes, jQuery promises (with their non-standard implementation) could be used instead of the ES6 promise syntax, but the OP appeared to be asking about using `new Promise()` which is not a syntax that jQuery supports. The same could be said about other promise libraries such as Q that are compatible with older browsers, but have their own non-standard syntax. – jfriend00 May 24 '18 at 20:35
  • yes that's true and I agree with your answer too, but why I added the comment is that I would not personally add library like bluebird, which indeed is very good but in my experience I have not seen many people who would prefer it over jQuery. Though it's just an opinion and just another solution for community. – Shreyan Mehta May 25 '18 at 04:43
  • 2
    @ShreyanMehta I wouldn't include jQuery just for http requests. That's a lot of baggage when a smaller, more focus library like Bluebird or Axios would be better. I don't think anyone should prefer jQuery over other libraries these days, unless the project is already using jQuery for everything. – elliottregan Jan 08 '19 at 21:51
  • 2
    @elliottregan alright, that was a good learning for me. Thanks for the feedback. – Shreyan Mehta Jan 09 '19 at 05:24
  • 2
    `let` and `const` are available with ie11, when not used in a for loop. it is one of the only es6 feature ei11 actually support. (with limited `Map` and `Set` and some other miscellaneous feature) – Félix Brunet Mar 04 '19 at 18:07
6

You could try using a Polyfill. The following Polyfill was published in 2019 and did the trick for me. It assigns the Promise function to the window object.

used like: window.Promise https://www.npmjs.com/package/promise-polyfill

If you want more information on Polyfills check out the following MDN web doc https://developer.mozilla.org/en-US/docs/Glossary/Polyfill

ScottyG
  • 3,204
  • 3
  • 32
  • 42
  • 1
    This worked for adding promise support to win forms WebBrowser control (When Windows uses IE 11 for it's emulation version). – clamchoda Jun 16 '20 at 21:33