Úvod do promises v JavaScripte

Už viete, že použitie callback modelu asynchrónnosti ľahko vedie k situácii callback hell. Preto bol v JavaScripte zavedený nový model s názvom promises (promise). Poďme sa tento model naučiť.

Promise predstavuje objekt, do ktorého sa ako parameter odovzdáva funkcia, vnútri ktorej potrebujeme umiestniť náš asynchrónny kód:

javascriptlet promise = new Promise(function() {
  // asynchrónny kód
});

Ako vidíte, uložil som objekt s promise do premennej promise. Na inom mieste kódu môžem aplikovať na túto premennú metódu then, odovzdaním do nej funkcie s kódom, ktorý sa má vykonať po ukončení asynchrónneho kódu, napísaného pri vytvorení tohto promise:

javascriptpromise.then(function() {
  // vykoná sa po dokončení asynchrónneho kódu
});

Znie to zmätočne, preto sa pozrime na príklad. Nech mám takýto asynchrónny kód:

javascriptsetTimeout(function() {
  let result = [1, 2, 3, 4, 5];
}, 3000);

Nech chcem vyriešiť preň našu hlavnú úlohu asynchrónnosti: vykonať nejaký kód po spustení časovača. Pritom nechcem umiestniť tento kód do samotného časovača a chcem, aby do tohto kódu nejako prišiel výsledok, napísaný mnou v premennej result. V podstate sme túto úlohu riešili v predchádzajúcich lekciách prostredníctvom callbackov a odberov. Poďme teraz pozrieť, ako to urobiť prostredníctvom promises.

Na začiatok potrebujeme obaliť náš asynchrónny kód do promise:

javascriptlet promise = new Promise(function() {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
  }, 3000);
});

Toto však nie je dostatočné. Musíme v explicitnej forme uviesť, že náš asynchrónny kód sa skončil. V tom nám pomôže špeciálna funkcia dokončenia, automaticky sa dostávajúca do prvého parametra funkcie, ak je uvedený:

javascriptlet promise = new Promise(function(resolve) { // uvádzame parameter
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
  }, 3000);
});

Pomocou funkcie dokončenia môžeme explicitne uviesť promise, že asynchrónny kód sa skončil. Na to musíme zavolať túto funkciu na potrebnom mieste:

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
    resolve(); // dokončujeme promise
  }, 3000);
});

Pritom, ak chceme odovzdať von nejaký výsledok asynchrónneho kódu, môžeme ho odovzdať ako parameter našej funkcie dokončenia:

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    let result = [1, 2, 3, 4, 5];
    resolve(result); // odovzdávame výsledok
  }, 3000);
});

Samozrejme, je možné sa zbaviť prechodnej premennej:

javascriptlet promise = new Promise(function(resolve) {
  setTimeout(function() {
    resolve([1, 2, 3, 4, 5]);
  }, 3000);
});

Teraz na akomkoľvek inom mieste môžeme zavolať metódu then nášho promise:

javascriptpromise.then(function() {
  // spustí sa po dokončení promise
});

Výsledok práce promise sa dostane do prvého parametra funkcie, ak ho budeme chcieť uviesť:

javascriptpromise.then(function(result) {
  console.log(result); // vypíše pole s výsledkom
});