Řeším problém, kdy potřebuju z nějakého API získat data a zobrazit je na stránku. Použít jQuery ajax ? Ok, jde to, ale asynchronní volání mi nevrátí data, musím složitě navazovat callback funkce při „success“ a „error“. O breakpointech při debugu nemůže být ani řeč, prostě vopruz.
Lepší řešení nabízí moderní Javascript (specifikace
ES2015 a další), který nabízí klíčová slova „async“ a „await„. Když tohle použiju ve funkci a navíc místo globální „var“ použiju neglobální „let„, bude to mnohem čitelnější kód.
Příklad pomocí jQuery uvádět nebudu. Řešení pomocí async/await je jednoduché. Příkaz „await fetch“ vrací objekt typu response. Další příkaz „await res.json()“ vrací objekt typu promise. Z objektu promise (slibu) se pak dají tahat data jak králíci z klobouku… 🙂 Ještě zmíním, že v příkladu je použita další vychytávka ES2015 tzv. šablonové literály zapisované pomocí
back-tick (` `) . Co všechno nabízí moderní Javascript specifikace ES2015 je hezky sepsáno v článku 10 Reasons We Love JavaScript’s ES2015.
Ještě více informací o ES6 najdete v článku ES6 Overview in 350 Bullet Points
<script>
async function getNemovitosti(operace){
let res = await fetch(`/nemovitosti.html?operace=${operace}`);
const promise = await res.json();
console.log(promise);
}
getNemovitosti(1);
</script>