Async a Await
V tomto článku se dozvíte jak můžete používat klíčová slova Async a Await. Jde o syntaktický cukřík, který nám může v některých případech zpříjemnit psaní Promisů a náš kód navíc bude vypadat lépe.
Klíčové slovo async
Klíčové slovo async můžeme použít, pokud chceme aby funkce vracela Promise. Stačí jej připsat před deklaraci funkce. Pokud v async funkci něco vrátíme, tak se to použije jako hodnota Promisu. Následující ukázka ukazuje funkci, která počítá součet dvou čísel. K této operaci bychom sice nepotřebovali aby funkce vracela Promise, ale v této ukázce jsem to tak udělal abych ukázal, že když před funkci napíšeme klíčové slovo async, funkce bude vracet Promise.
return cislo1 + cislo2;
}
soucet(2, 1)
.then((vysledek) => {
console.log("výsledek: " + vysledek);
});
Pokud v async funkci vrátíme nějakou hodnotu nebo nevrátíme nic, tak se vrátí splněný Promise. Pokud bychom ale v async funkci vyhodili chybu, tak se vrátí nesplněný Promise.
if (typeof cislo1 !== "number" || typeof cislo2 !== "number") {
throw "nejedná se o číslo";
}
return cislo1 + cislo2;
}
soucet("dva", 1)
.then((vysledek) => {
console.log("výsledek: " + vysledek);
})
.catch((err) => {
console.log(err);
});
Klíčové slovo await
Pomocí klíčového slova await můžeme pozastavit provádění kódu uvnitř async funkce do té doby než se provede nějaká asynchronní operace. Pokud před nějaký Promise v async funkci napíšeme klíčové slovo await, tak se provádění kódu zastaví do té doby než se Promise splní.
return new Promise((resolve, reject) => {
setTimeout(resolve, 1000);
});
}
async function postupneVypis() {
console.log("první");
await pockejChvili(); // funkce pockejChvili vrací Promise, počkáme až se splní než budeme pokračovat dál
console.log("druhý");
await pockejChvili();
console.log("třetí");
}
postupneVypis();
Pokud Promise před který umístíme klíčové slovo await vrátí nesplněný Promise, tak async funkce ukončí provádění kódu a vrátí nesplněný Promise.
return new Promise((resolve, reject) => {
if (typeof cislo1 !== "number" || typeof cislo2 !== "number") {
return reject("nejedná se o číslo");
}
console.log(cislo1 + cislo2);
setTimeout(resolve, 1000);
});
}
async function postupneVypis() {
await vypisSoucetAChviliPockej(2, 2);
await vypisSoucetAChviliPockej("jedna", 2);
await vypisSoucetAChviliPockej(3, 2);
}
postupneVypis()
.catch((err) => {
console.log(err);
});
Pokud nechceme aby se kód uvnitř async funkce při nesplnění Promisu přestal provádět, tak musíme klíčové slovo await obalit do try catch bloku.
return new Promise((resolve, reject) => {
if (typeof cislo1 !== "number" || typeof cislo2 !== "number") {
return reject("nejedná se o číslo");
}
console.log(cislo1 + cislo2);
setTimeout(resolve, 1000);
});
}
async function postupneVypis() {
await vypisSoucetAChviliPockej(2, 2);
try {
await vypisSoucetAChviliPockej("jedna", 2);
} catch (err) {
console.log(err);
}
await vypisSoucetAChviliPockej(3, 2);
}
postupneVypis();
Pokud Promise u kterého používáme klíčové slovo await obsahuje nějakou hodnotu, tak ji můžeme přiřadit do proměnné, jak ukazuje následující ukázka.
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(cislo1 + cislo2);
}, 1000);
});
}
async function postupneVypis() {
let soucet1 = await pockejSekunduAVratSoucet(2, 1);
console.log(soucet1);
let soucet2 = await pockejSekunduAVratSoucet(3, 4);
console.log(soucet2);
let soucet3 = await pockejSekunduAVratSoucet(5, 6);
console.log(soucet3);
}
postupneVypis();