„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
Ein JavaScript Promise-Objekt enthält sowohl den produzierenden Code als auch Aufrufe an den konsumierenden Code:
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:
myResolve(Ergebniswert)
myReject(Fehlerobjekt)
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.
nicht definiert
ein Ergebniswert
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.
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.
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>
Um die Verwendung von Versprechen zu demonstrieren, verwenden wir die Callback-Beispiele aus dem vorherigen Kapitel:
Warten auf eine Auszeit
Warten auf eine Datei
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>
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>
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>
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>
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 |