JavaScript asincrono
"async e wait rendono le promesse più facili da scrivere"
async fa in modo che una funzione restituisca una promessa
await fa una funzione wait for a Promise
Sintassi asincrona
La parola chiave asyncprima di una funzione fa sì che la funzione restituisca una promessa:
Esempio
async function myFunction() {
return "Hello";
}
Equivale a:
function myFunction() {
return Promise.resolve("Hello");
}
Ecco come utilizzare la Promessa:
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Esempio
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
O più semplice, poiché ti aspetti un valore normale (una risposta normale, non un errore):
Esempio
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
Attendi sintassi
La parola chiave awaitprima di una funzione fa sì che la funzione attenda una promessa:
let value = await promise;
La awaitparola chiave può essere utilizzata solo all'interno di una
asyncfunzione.
Esempio
Andiamo piano e impariamo ad usarlo.
Sintassi di base
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
I due argomenti (risolvi e rifiuta) sono predefiniti da JavaScript.
Non li creeremo, ma ne chiameremo uno quando la funzione executor sarà pronta.
Molto spesso non avremo bisogno di una funzione di rifiuto.
Esempio senza scarto
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
In attesa di un timeout
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
In attesa di un file
async function getFile() {
let myPromise = new Promise(function(resolve) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
resolve(req.response);
} else {
resolve("File not Found");
}
};
req.send();
});
document.getElementById("demo").innerHTML = await myPromise;
}
getFile();
Supporto browser
ECMAScript 2017 ha introdotto le parole chiave JavaScript
asynce await.
La tabella seguente definisce la prima versione del browser con supporto completo per entrambi:
| Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
| Dec, 2016 | Apr, 2017 | Mar, 2017 | Sep, 2017 | Dec, 2016 |