Príklad použitia asynchrónnej funkcie

async-fn.js

// Č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.