Promisi u sinhronom stilu u JavaScriptu

Da bi se rešio problem promise hell, osmišljena je posebna sintaksa promisa koja omogućava da se asinhroni kod piše mnogo jednostavnije - u sinhronom stilu.

Hajde da počnemo s njenim proučavanjem. Za početak uzmimo kod iz prethodne lekcije:

javascriptfunction func() {
  getSmth(2).then(res => {
    console.log(res); // ispisaće 4
  });
}

func();

Da je naša funkcija getSmth bila sinhrona, onda bismo kod funkcije func mogli da prepišemo na sledeći način:

javascriptfunction func() {
  let res = getSmth(2);
  console.log(res); // ispisaće 4
}

Međutim, funkcija getSmth je asinhrona, pa gornji kod neće raditi. Ali, koristeći se sinhronim stilom promisa, možemo da dobijemo nešto slično. Hajde da to uradimo.

Za početak moramo da deklarišemo našu funkciju func kao asinhronu pomoću posebne komande async:

javascriptasync function func() {
  
}

Posle toga ćemo unutar funkcije func moći da koristimo posebnu komandu await. Ova komanda, napisana ispred promisa, nateraće JavaScript da čeka dok se promis ne izvrši. Nakon toga, komanda će vratiti rezultat promisa, i izvršenje koda će se nastaviti.

U našem slučaju, moramo da napišemo await ispred poziva getSmth. Pošto će rezultat poziva ove funkcije biti promis, onda će se dalje izvršenje koda nastaviti tek nakon izvršenja tog promisa. Pa, rezultat promisa možemo da upišemo u promenljivu. Uradimo opisanu stvar:

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

func();

Hajde da pozovemo getSmth nekoliko puta:

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

func();

A sada da pozivamo getSmth u petlji:

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