Промисы во синхронен стил во 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();