JavaScript-beloften
"Ik beloof een resultaat!"
"Code produceren" is code die enige tijd kan duren
"Code consumeren" is code die moet wachten op het resultaat
Een belofte is een JavaScript-object dat de productie van code koppelt aan de consumerende code
JavaScript-belofte-object
Een JavaScript Promise-object bevat zowel de producerende code als de aanroepen van de consumerende code:
Belofte-syntaxis
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 */ }
);
Wanneer de producerende code het resultaat verkrijgt, moet deze een van de twee callbacks aanroepen:
| Resultaat | Telefoongesprek |
|---|---|
| Succes | myResolve (resultaatwaarde) |
| Fout | myReject (foutobject) |
Eigenschappen van belofteobject
Een JavaScript Promise-object kan zijn:
- In behandeling
- vervuld
- Afgewezen
Het Promise-object ondersteunt twee eigenschappen: state en result .
Terwijl een Promise-object "in behandeling" is (werkt), is het resultaat niet gedefinieerd.
Wanneer een Promise-object wordt "vervuld", is het resultaat een waarde.
Wanneer een Promise-object wordt "afgewezen", is het resultaat een foutobject.
| myPromise.state | mijnBelofte.resultaat |
|---|---|
| "in behandeling" | ongedefinieerd |
| "vervuld" | een resultaatwaarde |
| "afgewezen" | een foutobject |
U heeft geen toegang tot de status en resultaat van de Promise-eigenschappen .
U moet een Promise-methode gebruiken om met beloften om te gaan.
Beloof hoe het kan
Hier leest u hoe u een belofte gebruikt:
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Promis.then() heeft twee argumenten, een callback voor succes en een andere voor mislukking.
Beide zijn optioneel, dus u kunt alleen terugbellen voor succes of mislukking.
Voorbeeld
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);}
);
Voorbeelden van JavaScript-beloften
Om het gebruik van beloften te demonstreren, gebruiken we de callback-voorbeelden uit het vorige hoofdstuk:
- Wachten op een time-out
- Wachten op een bestand
Wachten op een time-out
Voorbeeld met terugbellen
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Voorbeeld met belofte
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Wachten op een bestand
Voorbeeld met terugbellen
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);
Voorbeeld met 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);}
);
Browserondersteuning
ECMAScript 2015, ook bekend als ES6, introduceerde het JavaScript Promise-object.
De volgende tabel definieert de eerste browserversie met volledige ondersteuning voor Promise-objecten:
| Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
| Feb, 2014 | Jul, 2015 | Apr, 2014 | Sep, 2014 | Mar, 2014 |