JavaScript-beloftes
"Ek belowe 'n resultaat!"
"Produseer kode" is kode wat 'n geruime tyd kan neem
"Verbruik kode" is kode wat moet wag vir die resultaat
'n Belofte is 'n JavaScript-objek wat vervaardigende kode en verbruikende kode verbind
JavaScript Promise Object
'n JavaScript Promise-objek bevat beide die vervaardigingskode en oproepe na die verbruikende kode:
Belofte Sintaksis
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 die vervaardigingskode die resultaat verkry, moet dit een van die twee terugbelopings oproep:
| Resultaat | Bel |
|---|---|
| Sukses | myResolve (resultaatwaarde) |
| Fout | myReject (foutvoorwerp) |
Promise Object Properties
'n JavaScript Promise-objek kan wees:
- Hangende
- Vervul
- Verwerp
Die Promise-objek ondersteun twee eienskappe: toestand en resultaat .
Terwyl 'n Promise-objek "hangend" is (werk), is die resultaat ongedefinieerd.
Wanneer 'n Promise-objek "vervul" is, is die resultaat 'n waarde.
Wanneer 'n Promise-voorwerp "verwerp" word, is die resultaat 'n foutvoorwerp.
| myPromise.staat | myPromise.result |
|---|---|
| "hangende" | ongedefinieerd |
| "vervul" | 'n resultaatwaarde |
| "verwerp" | 'n fout voorwerp |
Jy kan nie toegang tot die Promise-eienskappe se toestand en resultaat kry nie .
Jy moet 'n Belofte-metode gebruik om beloftes te hanteer.
Belowe Hoe Om
Hier is hoe om 'n belofte te gebruik:
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Promise.then() neem twee argumente, 'n terugbel vir sukses en 'n ander vir mislukking.
Albei is opsioneel, dus jy kan slegs 'n terugbel vir sukses of mislukking byvoeg.
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);}
);
JavaScript Promise Voorbeelde
Om die gebruik van beloftes te demonstreer, sal ons die terugbelvoorbeelde van die vorige hoofstuk gebruik:
- Wag vir 'n Time-out
- Wag vir 'n lêer
Wag vir 'n Time-out
Voorbeeld met behulp van terugbel
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Voorbeeld met die gebruik van Promise
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
Wag tans vir 'n lêer
Voorbeeld met behulp van Terugbel
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);}
);
Blaaierondersteuning
ECMAScript 2015, ook bekend as ES6, het die JavaScript Promise-objek bekendgestel.
Die volgende tabel definieer die eerste blaaierweergawe met volle ondersteuning vir Promise-objekte:
| Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
| Feb, 2014 | Jul, 2015 | Apr, 2014 | Sep, 2014 | Mar, 2014 |