JavaScript-Versprechen


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

„Ich verspreche ein Ergebnis!“

„Code produzieren“ ist Code, der einige Zeit in Anspruch nehmen kann

„Konsumierender Code“ ist Code, der auf das Ergebnis warten muss

Ein Promise ist ein JavaScript-Objekt, das produzierenden und konsumierenden Code verknüpft

JavaScript Promise-Objekt

Ein JavaScript Promise-Objekt enthält sowohl den produzierenden Code als auch Aufrufe an den konsumierenden Code:

Promise-Syntax

let myPromise = new Promise(function(myResolve, myReject) {
// "Producing Code" (May take some time)

  myResolve(); // when successful
  myReject();  // when error
});

// "Consuming Code" (Must wait for a fulfilled Promise)
myPromise.then(
  function(value) { /* code if successful */ },
  function(error) { /* code if some error */ }
);

Wenn der produzierende Code das Ergebnis erhält, sollte er einen der beiden Rückrufe aufrufen:

Success

myResolve(Ergebniswert)

Error

myReject(Fehlerobjekt)


Eigenschaften von Promise-Objekten

Ein JavaScript Promise-Objekt kann sein:

  • Ausstehend

  • Erfüllt

  • Abgelehnt

Das Promise-Objekt unterstützt zwei Eigenschaften: state und result.

Während ein Promise-Objekt „ausstehend“ ist (funktioniert), ist das Ergebnis undefiniert.

Wenn ein Promise-Objekt „erfüllt“ wird, ist das Ergebnis ein Wert.

Wenn ein Promise-Objekt „abgelehnt“ wird, ist das Ergebnis ein Fehlerobjekt.

"pending"

nicht definiert

"fulfilled"

ein Ergebniswert

"rejected"

ein Fehlerobjekt

Sie können nicht auf die Promise-Eigenschaften state und result zugreifen.

Sie müssen eine Promise-Methode verwenden, um Versprechen zu verarbeiten.


Versprechen Sie, wie es geht

So verwenden Sie ein Versprechen:

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

Promise.then() benötigt zwei Argumente, einen Rückruf für Erfolg und einen weiteren für Misserfolg.

Beide sind optional, sodass Sie nur bei Erfolg oder Misserfolg einen Rückruf hinzufügen können.

Beispiel

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;

// The producing code (this may take some time)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let x = 0;

// some code (try to change x to 5)

  if (x == 0) {
    myResolve("OK");
  } else {
    myReject("Error");
  }
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
</script>

</body>
</html>


Beispiele für JavaScript-Versprechen

Um die Verwendung von Versprechen zu demonstrieren, verwenden wir die Callback-Beispiele aus dem vorherigen Kapitel:

  • Warten auf eine Auszeit

  • Warten auf eine Datei


Warten auf eine Auszeit

Beispiel für die Verwendung eines Rückrufs

setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>setInterval() with a Callback</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
setTimeout(function() { myFunction("I love You !!!"); }, 3000);

function myFunction(value) {
  document.getElementById("demo").innerHTML = value;
}
</script>

</body>
</html>

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>

<h1 id="demo"></h1>

<script>
const myPromise = new Promise(function(myResolve, myReject) {
  setTimeout(function(){ myResolve("I love You !!"); }, 3000);
});

myPromise.then(function(value) {
  document.getElementById("demo").innerHTML = value;
});
</script>

</body>
</html>

Warten auf eine Datei

Beispiel mit Callback

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

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Callbacks</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

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

getFile(myDisplayer); 
</script>

</body>
</html>

Beispiel mit 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("File not Found");
       
    }
  };
  req.send();
});

myPromise.then(
   
  function(value) {myDisplayer(value);},
   
  function(error) {myDisplayer(error);}
);

Probieren Sie es selbst aus →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Promise</h2>

<p id="demo"></p>

<script>
function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}

let myPromise = new Promise(function(myResolve, myReject) {
  let req = new XMLHttpRequest();
  req.open('GET', "mycar.html");
  req.onload = function() {
    if (req.status == 200) {
      myResolve(req.response);
    } else {
      myReject("File not Found");
    }
  };
  req.send();
});

myPromise.then(
  function(value) {myDisplayer(value);},
  function(error) {myDisplayer(error);}
);
</script>

</body>
</html>

Browser-Unterstützung

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

Die folgende Tabelle definiert die erste Browserversion mit vollständiger Unterstützung für Promise-Objekte:

Chrome 33 Edge 12 Firefox 29 Safari 7.1 Opera 20
Feb, 2014 Jul, 2015 Apr, 2014 Sep, 2014 Mar, 2014