Promisi v sinhronem slogu v JavaScript

Za rešitev problema promise hell je bil izumljen poseben skladnji promisov, ki omogoča pisanje asinhrone kode veliko lažje - v sinhronem slogu.

Pridimo k njegovemu preučevanju. Za začetek vzemimo kodo iz prejšnje lekcije:

javascriptfunction func() {
  getSmth(2).then(res => {
    console.log(res); // izpiše 4
  });
}

func();

Če bi bila naša funkcija getSmth sinhrona, potem bi kodo funkcije func lahko prepisali na naslednji način:

javascriptfunction func() {
  let res = getSmth(2);
  console.log(res); // izpiše 4
}

Funkcija getSmth je vendar asinhrona, zato zgornja koda ne bo delovala. Toda, z uporabo sinhronega sloga promisov, bomo lahko dobili nekaj podobnega. Naredimo to.

Za začetek moramo našo funkcijo func razglasiti za asinhrono s posebnim ukazom async:

javascriptasync function func() {
  
}

Po tem bomo znotraj funkcije func lahko uporabili poseben ukaz await. Ta ukaz, napisan pred promisom, bo prisilil JavaScript, da čaka, dokler se promis ne izvede. Po tem bo ukaz vrnil rezultat promisa in izvajanje kode se bo nadaljevalo.

V našem primeru moramo napisati await pred klic getSmth. Ker bo rezultat klica te funkcije promis, se bo nadaljnje izvajanje kode nadaljevalo šele po izvedbi tega promisa. No, rezultat promisa pa lahko zapišemo v spremenljivko. Naredimo opisano:

javascriptasync function func() {
  let res = await getSmth(2);
  console.log(res); // izpiše 4
}

func();

Pokličimo getSmth večkrat:

javascriptasync function func() {
  let res1 = await getSmth(2);
  let res2 = await getSmth(3);
  
  console.log(res1 + res2); // izpiše 13
}

func();

In zdaj pokličimo getSmth v zanki:

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