Wie man Versprechen in IE11 zum Laufen bringt


75

Ich habe einen einfachen Code, der mit Ausnahme des Internet Explorers 11 in jedem Browser perfekt ausgeführt wird. Wie kann ich dafür sorgen, dass er in allen Browsern funktioniert?

Codepen

Danke im Voraus.

'use strict';

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

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

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

3
ie11 hat es2015 nicht
Nina Scholz

10
IE11 weder unterstützt arrow Funktionen noch nativer Promises . Verwenden Sie einen JS-Transpiler (wie babel ) oder keine ES6-Funktionen. Für die Promise-Unterstützung können Sie eine Bibliothek wie Bluebird verwenden .
Tomalak

4
(Übrigens, beachten Sie, wie caniuse.com zeigt, dass dieser Code auch in einigen anderen Browsern als IE11 nicht ausgeführt wird. Überprüfen Sie dort, wie gut eine JS-, CSS- oder HTML-Funktion unterstützt wird, die Sie verwenden möchten.)
Tomalak


2
Wenn Sie Babeljs zum Transpilieren Ihres Codes verwenden, können Sie die Voreinstellung "es2015-ie" zusammen mit dem npm-Modul "babel-polyfill" installieren, um dieses Kompatibilitätsproblem mit dem Internet Explorer zu lösen und eine Reihe anderer Probleme im Zusammenhang mit dem Internet Explorer zu vermeiden
Ilia Talalai

Antworten:


103

Wenn Sie möchten, dass dieser Codetyp in IE11 ausgeführt wird (das ES6 überhaupt nicht unterstützt), müssen Sie eine Versprechen-Bibliothek eines Drittanbieters (wie Bluebird ) erwerben, diese Bibliothek einschließen und Ihre Codierung ändern, um ES5-Codierungsstrukturen zu verwenden (keine Pfeilfunktionen, nein letusw.), damit Sie innerhalb der Grenzen dessen leben können, was ältere Browser unterstützen.

Sie können auch einen Transpiler (wie Babel ) verwenden, um Ihren ES6-Code in ES5-Code zu konvertieren, der in älteren Browsern funktioniert.

Hier ist eine Version Ihres Codes, der in ES5-Syntax mit der Bluebird-Versprechensbibliothek geschrieben wurde:

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

4
Ich denke auch, dass jquery.deffered verwendet werden kann, jquery.deffered wird wahrscheinlich ab 6+ unterstützt, auch warum jquery deffered, da jquery eine sehr beliebte und nützliche Bibliothek ist und oft in großen Projekten, die Dinge über JS enthalten, die meisten von ihnen, Wenn sie Bibliotheken verwenden, verwenden sie meistens auch Jquery. Sie müssen Ihrem Projekt also keine weitere Abhängigkeit hinzufügen und können Ihre Teamleiter / Projektmanager glücklicher machen
Shreyan Mehta,

@ShreyanMehta - Ja, jQuery-Versprechen (mit ihrer nicht standardmäßigen Implementierung) könnten anstelle der ES6-Versprechenssyntax verwendet werden, aber das OP schien zu fragen, new Promise()welche Syntax von jQuery nicht unterstützt wird. Das Gleiche gilt für andere Versprechensbibliotheken wie Q, die mit älteren Browsern kompatibel sind, aber eine eigene, nicht standardmäßige Syntax haben.
jfriend00

2
@ShreyanMehta Ich würde jQuery nicht nur für http-Anfragen einschließen. Das ist viel Gepäck, wenn eine kleinere Bibliothek mit mehr Fokus wie Bluebird oder Axios besser wäre. Ich denke nicht, dass heutzutage jemand jQuery anderen Bibliotheken vorziehen sollte, es sei denn, das Projekt verwendet jQuery bereits für alles.
Elliottottregan

2
@elliottregan in Ordnung, das war ein gutes Lernen für mich. Danke für die Rückmeldung.
Shreyan Mehta

2
letund constsind mit ie11 verfügbar, wenn sie nicht in einer for-Schleife verwendet werden. Es ist eines der wenigen es6-Features, die ei11 tatsächlich unterstützt. (mit begrenzten Mapund Seteinigen anderen Merkmalen)
Félix Brunet

3

Sie können versuchen, eine Polyfüllung zu verwenden. Die folgende Polyfill wurde 2019 veröffentlicht und hat den Trick für mich getan. Es weist dem Fensterobjekt die Promise-Funktion zu.

verwendet wie: window.Promise https://www.npmjs.com/package/promise-polyfill

Weitere Informationen zu Polyfills finden Sie im folgenden MDN-Webdokument unter https://developer.mozilla.org/en-US/docs/Glossary/Polyfill


1
Dies diente dazu, Versprechen zu unterstützen, um das WebBrowser-Steuerelement für Formulare zu gewinnen (wenn Windows IE 11 für die Emulationsversion verwendet).
Clamchoda
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.