Promisy v synchrónnom štýle v JavaScript

Pre vyriešenie problému promise hell bol vymyslený špeciálny syntax promisov, ktorý umožňuje písať asynchrónny kód oveľa jednoduchšie - v synchrónnom štýle.

Poďme sa pustíme do jeho štúdia. Na začiatok zoberme kód z predchádzajúcej lekcie:

javascriptfunction func() {
  getSmth(2).then(res => {
    console.log(res); // vypíše 4
  });
}

func();

Ak by naša funkcia getSmth bola synchrónna, tak kód funkcie func by sme mohli prepísať nasledovne:

javascriptfunction func() {
  let res = getSmth(2);
  console.log(res); // vypíše 4
}

Funkcia getSmth je však asynchrónna, preto uvedený kód nebude fungovať. Ale, využitím synchrónneho štýlu promisov, môžeme dosiahnuť niečo podobné. Urobme to.

Na začiatok musíme deklarovať našu funkciu func ako asynchrónnu pomocou špeciálneho príkazu async:

javascriptasync function func() {
  
}

Potom budeme môcť vo vnútri funkcie func používať špeciálny príkaz await. Tento príkaz, napísaný pred promisom, donúti JavaScript čakať až kým promis nebude vykonaný. Potom príkaz vráti výsledok promisu a vykonávanie kódu bude pokračovať.

V našom prípade musíme napísať await pred volanie getSmth. Pretože výsledkom volania tejto funkcie bude promis, tak ďalšie vykonávanie kódu bude pokračovať až po vykonaní tohto promisu. No, a výsledok promisu môžeme zapísať do premennej. Urobme popísané:

javascriptasync function func() {
  let res = await getSmth(2);
  console.log(res); // vypíše 4
}

func();

Volajme getSmth niekoľkokrát:

javascriptasync function func() {
  let res1 = await getSmth(2);
  let res2 = await getSmth(3);
  
  console.log(res1 + res2); // vypíše 13
}

func();

A teraz budeme volať getSmth v cykle:

javascriptasync function func() {
  let arr = [1, 2, 3, 4, 5];
  let sum = 0;
  
  for (let elem of arr) {
    sum += await getSmth(elem);
  }
  
  console.log(sum);
}

func();

javascriptfunction func() {
  getSmth(2).then(res1 => {
    getSmth(3).then(res2 => {
      getSmth(4).then(res3 => {
        console.log(res1 + res2 + res3);
      });
    });
  });
}

func();