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