Проблема promise hell у JavaScript-у

Већ знате да су промисови креирани да реше проблем callback hell-a. Међутим, временом се показало да промисови такође могу довести до сложеног кода. Овај проблем је по аналогији назван promise hell.

Хајде да погледамо овај проблем на примерима кода. Нека имамо функцију getSmth, која добија параметар и враћа резултат у зависности од тог параметра:

javascriptfunction getSmth(num) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(num * num), 1000)
  });
}

У овом случају симулирамо неку корисну операцију (на пример, добијање података са сервера). За симулацију, једноставно као параметар прослеђујемо број и после секунде враћамо квадрат тог броја.

Сада ћемо искористити нашу функцију getSmth унутар друге функције:

javascriptfunction func() {
  getSmth(2).then(res => {
    console.log(res); // исписаће 4
  });
}

func();

Први проблем

Много конструкција then једне за другом отежавају разумевање кода:

javascriptfunction func(){
  getSmth(2).then(res1 => {
    // радимо нешто
  }).then(res2 => {
    // радимо нешто
  }).then(res3 => {
    // радимо нешто
  }).then(res4 => {
    // радимо нешто
  }).then(res5 => {
    // радимо нешто
  }).then(res6 => {
    // радимо нешто
  });
}

func();

Други проблем

Постоји и проблем другог типа. Нека сада желимо да искористимо нашу функцију два пута, а затим саберемо резултате. Као резултат добићемо овакав код:

javascriptfunction func() {
  getSmth(2).then(res1 => {
    getSmth(3).then(res2 => {
      console.log(res1 + res2); // исписаће 13
    });
  });
}

func();

Већ подсећа на callback hell, зар не? Додајмо још један позив функције - код ће постати још гори:

javascriptfunction func() {
  getSmth(2).then(res1 => {
    getSmth(3).then(res2 => {
      getSmth(4).then(res3 => {
        console.log(res1 + res2 + res3);
      });
    });
  });
}

func();

Могли бисмо, наравно, искористити Promise.all:

javascriptfunction func() {
  Promise.all([getSmth(2), getSmth(3), getSmth(4)]).then(res => {
    console.log(res[0] + res[1] + res[2]);
  });
}

func();

Међутим, да ли смо добили исто? Не! У првом случају свака нова функција чека завршетак претходног промиса, а у другом случају - сви промисови се извршавају истовремено. Ова разлика ће бити битна у случају када бисмо у следећу функцију желели да проследимо резултат претходне:

javascriptfunction func() {
  getSmth(2).then(res1 => {
    getSmth(res1).then(res2 => {
      getSmth(res2).then(res3 => {
        console.log(res3);
      });
    });
  });
}

func();