Promisy w synchronicznym stylu w JavaScript

Dla rozwiązania problemu promise hell wymyślono specjalną składnię promisów, pozwalającą pisać kod asynchroniczny znacznie prościej - w synchronicznym stylu.

Zacznijmy jej naukę. Na początek weźmy kod z poprzedniej lekcji:

javascriptfunction func() {
  getSmth(2).then(res => {
    console.log(res); // wyświetli 4
  });
}

func();

Gdyby nasza funkcja getSmth była synchroniczna, to kod funkcji func mogliśmy przepisać w następujący sposób:

javascriptfunction func() {
  let res = getSmth(2);
  console.log(res); // wyświetli 4
}

Funkcja getSmth jest jednak asynchroniczna, więc powyższy kod nie zadziała. Ale, korzystając z synchronicznego stylu promisów, będziemy mogli uzyskać coś podobnego. Zróbmy to.

Na początku musimy zadeklarować naszą funkcję func jako asynchroniczną za pomocą specjalnej komendy async:

javascriptasync function func() {
  
}

Po tym będziemy mogli wewnątrz funkcji func używać specjalnej komendy await. Ta komenda, napisana przed promisem, sprawi, że JavaScript będzie czekał do momentu, aż promis się wykona. Po czym komenda zwróci wynik promisa, i wykonanie kodu będzie kontynuowane.

W naszym przypadku musimy napisać await przed wywołaniem getSmth. Ponieważ wynikiem wywołania tej funkcji będzie promis, to dalsze wykonanie kodu będzie kontynuowane tylko po wykonaniu tego promisa. No, a wynik promisa można zapisać do zmiennej. Zróbmy opisane:

javascriptasync function func() {
  let res = await getSmth(2);
  console.log(res); // wyświetli 4
}

func();

Wywołajmy getSmth kilka razy:

javascriptasync function func() {
  let res1 = await getSmth(2);
  let res2 = await getSmth(3);
  
  console.log(res1 + res2); // wyświetli 13
}

func();

A teraz wywołujmy getSmth w pętli:

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