Last active
May 24, 2017 19:52
-
-
Save wal-de-marlad/9759a2c72af4c4cf74352acad33803b5 to your computer and use it in GitHub Desktop.
Príklad použitia asynchrónnej funkcie
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Častý prípad - nahraj dve sady údajov z dvoch rôznych | |
// súborov a následne ich spoločne nejak spracuj. | |
// Pre jednoduchší a prehľadnejší syntax použijem | |
// na nahratie údajov jQuery: | |
$.getJSON('dataSet1.json', data1 => { | |
$.getJSON('dataSet2.json', data2 => { | |
console.dir(data1, data2) | |
}) | |
}) | |
// Takto sa to však nemá robiť, to je klasický prípad | |
// callback hell. Preto pre nás v jQuery pripravili | |
// omnoho elegantnejšie riešenie: | |
var dataSet1 = $.getJSON('dataSet1.json') | |
var dataSet2 = $.getJSON('dataSet2.json') | |
function processData (data1, data2) { | |
console.dir(data1[0], data2[0]) | |
} | |
$.when(dataSet1, dataSet2).then(processData) | |
// Už na prvý pohľad elegantnejšie, čitateľnejšie | |
// riešenie. No a ako by to vyzeralo s použitím | |
// asynchrónnej funkcie? Napríklad takto: | |
async function loadData () { | |
let data1 = await $.getJSON('dataSet1.json') | |
let data2 = await $.getJSON('dataSet2.json') | |
return [data1, data2] | |
} | |
function processData (data) { | |
console.dir(data[0], data[1]) | |
} | |
loadData().then(processData) | |
// Zámerne som použil dve zbytočné premenné | |
// data1 a data2 a až potom ich vrátil v poli, | |
// aby som zdrôraznil fakt, že to vyzerá ako | |
// by som data1 a data2 načítal synchrónne. | |
// Samozrejme, že to tak len vyzerá, obe premenné | |
// budú naplnené asynchrónne - dôležité je to kľúčové | |
// slovo await. Doležité je vedieť, že await je | |
// použiteľný len vo vnútri asynchrónnej funkcie. | |
// A samotná asynchrónna funkcia vracia nový promise | |
// objekt, preto za ňou ide použiť then. Ono to | |
// kľúčové slovo async je vlastne možné vnímať ako | |
// nejaký promise wrapper okolo generátora | |
// a await akoby pauzoval asynchrónnu funkciu, | |
// niečo ako yield v generátore. Preto aj ide | |
// asynchrónna funkcia, ktorá sama o sebe je zahrnutá | |
// až v ES7, transpilovať do ES6, lebo je to v konečnom | |
// dôsledku len kombinácia generátora a promise. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment