JavaScript verspricht
"Ich verspreche ein Ergebnis!"
"Code produzieren" ist Code, der einige Zeit in Anspruch nehmen kann
"Code verbrauchen" ist Code, der auf das Ergebnis warten muss
Ein Promise ist ein JavaScript-Objekt, das produzierenden Code und konsumierenden Code verknüpft
JavaScript Promise-Objekt
Ein JavaScript Promise-Objekt enthält sowohl den produzierenden Code als auch Aufrufe des konsumierenden Codes:
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 Callbacks aufrufen:
| Ergebnis | Anruf |
|---|---|
| Erfolg | myResolve(Ergebniswert) |
| Fehler | myReject (Fehlerobjekt) |
Promise-Objekteigenschaften
Ein JavaScript Promise-Objekt kann Folgendes sein:
- Ausstehend
- Erfüllt
- Abgelehnt
Das Promise-Objekt unterstützt zwei Eigenschaften: state und result .
Während ein Promise-Objekt "ausstehend" (funktionierend) ist, ist das Ergebnis undefiniert.
Wenn ein Promise-Objekt „erfüllt“ ist, ist das Ergebnis ein Wert.
Wenn ein Promise-Objekt "abgelehnt" wird, ist das Ergebnis ein Fehlerobjekt.
| myPromise.state | meinVersprechen.Ergebnis |
|---|---|
| "steht aus" | nicht definiert |
| "erfüllt" | ein Ergebniswert |
| "abgelehnt" | ein Fehlerobjekt |
Sie können nicht auf den Status und das Ergebnis der Promise-Eigenschaften zugreifen .
Sie müssen eine Promise-Methode verwenden, um Promises 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() nimmt zwei Argumente, einen Rückruf für Erfolg und einen für Fehler.
Beide sind optional, sodass Sie nur für Erfolg oder Fehler 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);}
);
Beispiele für JavaScript-Versprechen
Um die Verwendung von Promises zu demonstrieren, verwenden wir die Callback-Beispiele aus dem vorherigen Kapitel:
- Warten auf eine Zeitüberschreitung
- Warten auf eine Datei
Warten auf eine Zeitüberschreitung
Beispiel mit Callback
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Beispiel mit Promise
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
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);
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);}
);
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 |