JavaScript Promesse
"Prometto un risultato!"
"Produrre codice" è codice che può richiedere del tempo
"Codice consumo" è il codice che deve attendere il risultato
Una promessa è un oggetto JavaScript che collega la produzione di codice e il consumo di codice
Oggetto Promessa JavaScript
Un oggetto JavaScript Promise contiene sia il codice di produzione che le chiamate al codice di consumo:
Sintassi della promessa
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 */ }
);
Quando il codice produttore ottiene il risultato, dovrebbe chiamare uno dei due callback:
| Risultato | Chiamata |
|---|---|
| Successo | myResolve(valore risultato) |
| Errore | mioRifiuto(oggetto errore) |
Prometti proprietà dell'oggetto
Un oggetto Promise JavaScript può essere:
- In attesa di
- Soddisfatto
- Respinto
L'oggetto Promise supporta due proprietà: state e result .
Mentre un oggetto Promise è "in sospeso" (funzionante), il risultato non è definito.
Quando un oggetto Promise viene "soddisfatto", il risultato è un valore.
Quando un oggetto Promise viene "rifiutato", il risultato è un oggetto di errore.
| myPromise.state | myPromise.result |
|---|---|
| "in sospeso" | non definito |
| "soddisfatto" | un valore di risultato |
| "respinto" | un oggetto di errore |
Non è possibile accedere allo stato e al risultato delle proprietà Promise .
È necessario utilizzare un metodo Promise per gestire le promesse.
Prometti come
Ecco come utilizzare una promessa:
myPromise.then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Promise.then() accetta due argomenti, un callback per il successo e un altro per il fallimento.
Entrambi sono facoltativi, quindi puoi aggiungere una richiamata solo in caso di esito positivo o negativo.
Esempio
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);}
);
Esempi di promesse JavaScript
Per dimostrare l'uso delle promesse, utilizzeremo gli esempi di callback del capitolo precedente:
- In attesa di un timeout
- In attesa di un file
In attesa di un timeout
Esempio di utilizzo della richiamata
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
Esempio usando Promise
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
myPromise.then(function(value) {
document.getElementById("demo").innerHTML = value;
});
In attesa di un file
Esempio utilizzando la richiamata
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);
Esempio usando 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);}
);
Supporto browser
ECMAScript 2015, noto anche come ES6, ha introdotto l'oggetto JavaScript Promise.
La tabella seguente definisce la prima versione del browser con supporto completo per gli oggetti Promise:
| Chrome 33 | Edge 12 | Firefox 29 | Safari 7.1 | Opera 20 |
| Feb, 2014 | Jul, 2015 | Apr, 2014 | Sep, 2014 | Mar, 2014 |