How to Support Promises in Internet Explorer 11

How to support promises in Internet Explorer 11?

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>

how to support Promises in Internet Explorer 11 using laravel mix?

You can also use a mix extension such as laravel-mix-polyfill

let mix = require('laravel-mix');

require('laravel-mix-polyfill');

mix.js('resources/js/app.js', 'public/js')
   .polyfill({
      enabled: true,
      useBuiltIns: "usage",
      targets: "firefox 50, IE 11"
   });

is .then supported by Internet Explorer?

The Promise.prototype.then() method returns a Promise. This method still doesn't support IE browser. You could check the Browser compatibility.

To use the Promise and Then method in IE 11 browser, you can use 3rd party promise library (like Bluebird) or Babel transpiler to convert the ES6 code to ES5 code. Please refer the following sample code:

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

<script>
    (function (global, factory) {
        if (typeof define === "function" && define.amd) {
            define([], factory);
        } else if (typeof exports !== "undefined") {
            factory();
        } else {
            var mod = {
                exports: {}
            };
            factory();
            global.repl = mod.exports;
        }
    })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function () {
        "use strict";

        var myFirstPromise = new Promise(function (resolve, reject) {
            // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed.
            // In this example, we use setTimeout(...) to simulate async code. 
            // In reality, you will probably be using something like XHR or an HTML5 API.
            setTimeout(function () {
                resolve("Success!"); // Yay! Everything went well!
            }, 250);
        });
        myFirstPromise.then(function (successMessage) {
            // successMessage is whatever we passed in the resolve(...) function above.
            // It doesn't have to be a string, but if it is only a succeed message, it probably will be.
            console.log("Yay! " + successMessage);
        });
    });
</script>

The output in IE browser:

Edit:

The deferred.then() method support IE browser. Perhaps you are using the deferred.then method.

Elegant way to include es6-promise for IE

Just use

<script>
    if (typeof Promise !== "function")
        document.write('<script src="//cdnjs.cloudflare.com/ajax/libs/es6-promise/4.1.1/es6-promise.min.js"><\/script>');
</script>

which does not work only for IE users, but in every environment without a native Promise implementation.

Promise' is undefined in IE11

I was able to resolve this problem by adding these two lines of code in the Header:

<script src="https://unpkg.com/es6-promise/dist/es6-promise.auto.min.js"></script>
<script src="https://unpkg.com/unfetch/polyfill/index.js"></script>

Typescript and promises in IE11

Promises are not supported natively in IE 11 and this has nothing to do with Typescript (Typescript libs doesn't actually adds anything to the code)

You can use bluebird as Promise library

npm install --save bluebird

Also install types:
npm install --save-dev @types/bluebird

import * as Promise from "bluebird"

Promises not working on IE11

You need to include a promise polyfill in your page for IE11 to work.

Your instinct to use es-promise is correct, but you need to also include the .js file in your html

<script src="path/to/es6-promise.js"></script>

The .d.ts file will give the TypeScript compiler it's definitions, but does not affect runtime. You still need to include the polyfill in your html for it to actually run in the browser.

The biggest thing to remember when using TypeScript or any compiled language is the difference between compile time and run time.

.d.ts, .ts, .tsx, etc. Are all compile time files. Which means that these are not the files that are actually executed, but instead the files that generate the runtime code.

.js files are the runtime files. These are the files that are run by the browser.

.d.ts files do not contain code, but instead a definition of the code's signature and therefore should always be accompanied with a corresponding .js file that will run in the browser.

---

Related Topics