JavaScript asynchronní
„Asynchronní a čekající usnadňují psaní slibů“
async způsobí, že funkce vrátí Promise
wait způsobí, že funkce čeká na slib
Asynchronní syntaxe
Klíčové slovo asyncpřed funkcí způsobí, že funkce vrátí slib:
Příklad
async function myFunction() {
return "Hello";
}
Je stejné jako:
function myFunction() {
return Promise.resolve("Hello");
}
Zde je návod, jak používat Promise:
myFunction().then(
function(value) { /* code if successful */ },
function(error) { /* code if some error */ }
);
Příklad
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);},
function(error) {myDisplayer(error);}
);
Nebo jednodušeji, protože očekáváte normální hodnotu (normální odezvu, nikoli chybu):
Příklad
async function myFunction() {
return "Hello";
}
myFunction().then(
function(value) {myDisplayer(value);}
);
Čeká na syntaxi
Klíčové slovo awaitpřed funkcí způsobí, že funkce čeká na příslib:
let value = await promise;
Klíčové awaitslovo lze použít pouze uvnitř
asyncfunkce.
Příklad
Pojďme pomalu a naučme se to používat.
Základní syntaxe
async function myDisplay() {
let myPromise = new Promise(function(resolve, reject) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Dva argumenty (vyřešit a zamítnout) jsou předdefinovány JavaScriptem.
Nebudeme je vytvářet, ale zavoláme jeden z nich, až bude funkce exekutor připravena.
Velmi často nebudeme potřebovat funkci odmítnutí.
Příklad bez odmítnutí
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
resolve("I love You !!");
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Čekání na časový limit
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve("I love You !!");}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
Čekání na soubor
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();
Podpora prohlížeče
ECMAScript 2017 zavedl klíčová slova JavaScript
asynca await.
Následující tabulka definuje první verzi prohlížeče s plnou podporou obou:
| Chrome 55 | Edge 15 | Firefox 52 | Safari 11 | Opera 42 |
| Dec, 2016 | Apr, 2017 | Mar, 2017 | Sep, 2017 | Dec, 2016 |