How to support promises in Internet Explorer 11?

Question

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);
    }
  );

Solution 1

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>

Solution 2

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

Comments

[Nina Scholz]

ie11 does not have es2015

[Tomalak]

IE11 neither supports arrow functions nor native Promises. Use a JS transpiler (like babel) or don't use ES6 features. For Promise support you can use a library like bluebird.

[Tomalak]

(BTW, note how 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.)

[Benjamin Gruenbaum]

Related stackoverflow.com/questions/27835687/…

[Ilia Talalai]

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

[Shreyan Mehta]

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

[jfriend00]

@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.

[Shreyan Mehta]

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.

[elliottregan]

@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.

[Shreyan Mehta]

@elliottregan alright, that was a good learning for me. Thanks for the feedback.

[Félix Brunet]

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)

[clamchoda]

This worked for adding promise support to win forms WebBrowser control (When Windows uses IE 11 for it's emulation version).