JavaScript-Promise

"Ich verspreche ein Ergebnis!"

"Produzierender Code" (Produzierender Code) ist der Code, der einige Zeit dauern kann

"Verbraucherkode" (Verbraucherkode) ist der Code, der auf ein Ergebnis warten muss

Promise ist ein JavaScript-Objekt, das Produktionscode und Verbraucherkode verknüpft

JavaScript Promise-Objekte

JavaScript Promise-Objekte enthalten Produktionscode und Aufrufe des Verbraucherkodes:

Promise-Syntax

let myPromise = new Promise(function(myResolve, myReject) {
// "Produzierender Code" (kann einige Zeit dauern)
  myResolve(); // Im Erfolgsfall
  myReject();  // Im Fehlerfall
});
// "Verbraucherkode" (muss auf einen erfüllten Versprechen warten)
myPromise.then(
  function(value) { /* Code im Erfolgsfall */ },
  function(error) { /* Code im Fehlerfall */ }
);

Wenn der Code ausgeführt wird und ein Ergebnis erhält, sollte einer der beiden Callbacks aufgerufen werden:

Ergebnis Aufruf
Erfolg myResolve(result value)
Fehler myReject(error object)

Promise-Objektattribute

JavaScript Promise-Objekte können sein:

  • Ausstehend
  • Erfüllt
  • Abgelehnt

Ein Promise-Objekt unterstützt zwei Attribute:Zustand und Ergebnis.

Wenn ein Promise-Objekt "ausstehend" (arbeitsbereit) ist, ist das Ergebnis undefined.

Wenn ein Promise-Objekt "erfüllt" ist, ist das Ergebnis ein Wert.

Wenn ein Promise-Objekt "abgelehnt" ist, ist das Ergebnis ein Fehlerobjekt.

myPromise.state myPromise.result
"ausstehend" undefined
"erfüllt" Ergebniswert
"abgelehnt" error-Objekt

Sie haben keinen Zugriff auf die Promise-Attribute state und result.

Sie müssen das Promise-Verfahren verwenden, um Promise zu verarbeiten.

Wie man Promise verwendet

Hier ist eine Methode zur Verwendung von Promise:}

myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Promise.then() hat zwei Parameter, einen für den Erfolgsfall und einen für den Fehlsfall.

Beide sind optional, daher können Sie Callbacks für Erfolg oder Misserfolg hinzufügen.

Beispiel

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;
// Code generieren (dies könnte einige Zeit dauern)
  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Selbst ausprobieren

JavaScript Promise Beispiel

Um die Verwendung von Promise zu demonstrieren, verwenden wir das Callback-Beispiel aus dem vorherigen Kapitel:

  • Warten auf Zeitüberschreitung
  • Warten auf die Datei

Warten auf Zeitüberschreitung

Beispiel für die Verwendung von Callbacks

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Selbst ausprobieren

Beispiel für die Verwendung von Promise

let myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});

Selbst ausprobieren

Warten auf die Datei

Beispiel für die Verwendung von Callbacks

function getFile(myCallback) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myCallback(req.responseText);
    } else {
      myCallback("Error: " + req.status);
    }
  }
  req.send();
}
getFile(myDisplayer);

Selbst ausprobieren

Beispiel für die Verwendung von Promise

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.htm");
  req.onload = function() {
    if (req.status == 200) {
      myResolve(req.response);
    } else {
      myReject("Datei nicht gefunden");
    }
  };
  req.send();
});
myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Selbst ausprobieren

Browser-Unterstützung

ECMAScript 2015, auch als ES6 bezeichnet, führte das JavaScript-Promise-Objekt ein.

Die nachstehende Tabelle zeigt die erste Browser-Version, die Promise-Objekte vollständig unterstützt:

Chrome IE Firefox Safari Opera
Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Februar 2014 Juli 2015 April 2014 September 2014 März 2014