Promise'ai sinchroniniu stiliumi JavaScript

Norint išspręsti promise hell problemą, buvo sugalvotas specialus promise'ų sintaksė, leidžiantis rašyti asinchroninį kodą daug paprasčiau - sinchroniniu stiliumi.

Pradėkime jį mokytis. Pirmiausia paimkime kodą iš ankstesnės pamokos:

javascriptfunction func() {
  getSmth(2).then(res => {
    console.log(res); // išves 4
  });
}

func();

Jei mūsų funkcija getSmth būtų sinchroninė, tai funkcijos func kodą galėtume perrašyti taip:

javascriptfunction func() {
  let res = getSmth(2);
  console.log(res); // išves 4
}

Funkcija getSmth, tačiau, yra asinchroninė, todėl aukščiau pateiktas kodas neveiks. Bet pasinaudoję promise'ų sinchroniniu stiliumi, galime gauti kažką panašaus. Padarykime tai.

Pirmiausia turime paskelbti mūsų funkciją func asinchronine naudojant specialų komandą async:

javascriptasync function func() {
  
}

Po to mes galėsime funkcijos func viduje naudoti specialią komandą await. Ši komanda, parašyta prieš promise'ą, privers JavaScript laukti tol, kol promise'as bus įvykdytas. Po to komanda grąžins promise'o rezultatą, ir kodo vykdymas tęsis.

Mūsų atveju turime parašyti await prieš getSmth iškvietimą. Kadangi šios funkcijos iškvietimo rezultatas bus promise'as, tai tolesnis kodo vykdymas tęsis tik po šio promise'o įvykdymo. O promise'o rezultatą galima įrašyti į kintamąjį. Atlikime aprašytą:

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

func();

Iškvieskime getSmth kelis kartus:

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

func();

O dabar kvieskime getSmth cikle:

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