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