JavaScript-тегі promise hell мәселесі

Сіз промисердің callback hell мәселесін шешу үшін жасалғанын білесіз. Алайда, уақыт өте келе промисердің де қиын код тудыра алатыны анықталды. Бұл мәселе ұқсастық бойынша 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();