Промис у синхроном стилу у JavaScript-у

За решавање проблема promise hell осмишљен је посебан синтакса за промис који омогућава писање асинхроног кода много лакше - у синхроном стилу.

Хајде да почнемо са његовим проучавањем. За почетак узмемо код из претходне лекције:

javascriptfunction func() {
  getSmth(2).then(res => {
    console.log(res); // исписаће 4
  });
}

func();

Да је наша функција getSmth била синхрона, онда бисмо код функције func могли преписати на следећи начин:

javascriptfunction func() {
  let res = getSmth(2);
  console.log(res); // исписаће 4
}

Функција getSmth је, међутим, асинхрона, па горњи код неће функционисати. Али, користећи синхрони стил промиса, можемо добити нешто слично. Хајде да то урадимо.

За почетак морамо прогласити нашу функцију func асинхроном користећи специјалну команду async:

javascriptasync function func() {
  
}

Након тога ћемо моћи унутар функције func да користимо специјалну команду await. Ова команда, написана испред промиса, ће натерати JavaScript да чека док се промис не изврши. После тога команда ће вратити резултат промиса, и извршавање кода ће се наставити.

У нашем случају морамо написати await испред позива getSmth. Пошто ће резултат позива ове функције бити промис, онда ће се даље извршавање кода наставити тек после извршења тог промиса. Па, а резултат промиса можемо уписати у променљиву. Урадимо описано:

javascriptasync function func() {
  let res = await getSmth(2);
  console.log(res); // исписаће 4
}

func();

Хајде да позовемо getSmth више пута:

javascriptasync function func() {
  let res1 = await getSmth(2);
  let res2 = await getSmth(3);
  
  console.log(res1 + res2); // исписаће 13
}

func();

А сада ћемо позивати getSmth у петљи:

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();