Promise-ok szinkron stílusban JavaScriptben

A promise hell problémájának megoldására kifejlesztettek egy speciális promise szintaxist, amely lehetővé teszi az aszinkron kód sokkal egyszerűbb írását - szinkron stílusban.

Kezdjük is el tanulmányozását. Először vegyük az előző leckéből a kódot:

javascriptfunction func() {
  getSmth(2).then(res => {
    console.log(res); // kiírja a 4-et
  });
}

func();

Ha a getSmth függvényünk szinkron lenne, akkor a func függvény kódját a következőképpen írhatnánk át:

javascriptfunction func() {
  let res = getSmth(2);
  console.log(res); // kiírja a 4-et
}

A getSmth függvény azonban aszinkron, ezért a fenti kód nem fog működni. De a promise-ok szinkron stílusának kihasználásával valami hasonlót érhetünk el. Tegyük ezt meg.

Először is deklarálnunk kell a func függvényünket aszinkronná a speciális async paranccsal:

javascriptasync function func() {
  
}

Ezek után a func függvényen belül használhatjuk a speciális await parancsot. Ez a parancs, amit egy promise elé írunk, arra kényszeríti a JavaScriptet, hogy várjon, amíg a promise befejeződik. Ez után a parancs visszaadja a promise eredményét, és a kód végrehajtása folytatódik.

Esetünkben a await-et a getSmth hívása elé kell írnunk. Mivel ennek a függvénynek a hívása promise-ot ad vissza, a további kódvégrehajtás csak a promise teljesítése után folytatódik. Nos, a promise eredményét pedig el lehet menteni egy változóba. Valósítsuk meg a leírtakat:

javascriptasync function func() {
  let res = await getSmth(2);
  console.log(res); // kiírja a 4-et
}

func();

Hívjuk meg a getSmth-et többször:

javascriptasync function func() {
  let res1 = await getSmth(2);
  let res2 = await getSmth(3);
  
  console.log(res1 + res2); // kiírja a 13-at
}

func();

Most pedig hívjuk meg a getSmth-et ciklusban:

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