Promisiuni în stil sincron în JavaScript

Pentru a rezolva problema promise hell a fost creată o sintaxă specială pentru promisiuni, care permite scrierea codului asincron mult mai ușor - în stil sincron.

Să începem să o studiem. Pentru început să luăm codul din lecția precedentă:

javascriptfunction func() {
  getSmth(2).then(res => {
    console.log(res); // va afișa 4
  });
}

func();

Dacă funcția noastră getSmth ar fi fost sincronă, atunci codul funcției func l-am fi putut rescrie în felul următor:

javascriptfunction func() {
  let res = getSmth(2);
  console.log(res); // va afișa 4
}

Funcția getSmth, însă, este asincronă, de aceea codul de mai sus nu va funcționa. Dar, folosind stilul sincron al promisiunilor, vom putea obține ceva asemănător. Să facem asta.

Pentru început trebuie să declarăm funcția noastră func ca fiind asincronă folosind comanda specială async:

javascriptasync function func() {
  
}

După aceasta vom putea în interiorul funcției func să folosim comanda specială await. Această comandă, scrisă înaintea unei promisiuni, va forța JavaScript să aștepte până când promisiunea se va finaliza. După aceasta comanda va returna rezultatul promisiunii, iar execuția codului va continua.

În cazul nostru, trebuie să scriem await înaintea apelului getSmth. Deoarece rezultatul apelului acestei funcții va fi o promisiune, atunci execuția ulterioară a codului va continua doar după finalizarea acestei promisiuni. Ei bine, iar rezultatul promisiunii poate fi scris într-o variabilă. Să facem ce s-a descris:

javascriptasync function func() {
  let res = await getSmth(2);
  console.log(res); // va afișa 4
}

func();

Să apelăm getSmth de mai multe ori:

javascriptasync function func() {
  let res1 = await getSmth(2);
  let res2 = await getSmth(3);
  
  console.log(res1 + res2); // va afișa 13
}

func();

Iar acum să apelăm getSmth într-o buclă:

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