JavaScript හි පොරොමිස් පිටලම ගැටළුව

ඔබ දැනටමත් දන්නවා, කොල්බැක් පිටලම (callback hell) ගැටළුව විසඳීම සඳහා පොරොමිස් (promises) නිර්මාණය කරන ලද්දේ. කෙසේ වෙතත්, කාලයත් සමඟ පෙනී ගියේ පොරොමිස් ද සංකීර්ණ කේතයක් බිහි කිරීමට හැකි බවයි. මෙම ගැටළුව සංසන්දනය කරමින් නම් කරන ලද්දේ 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();

කෙසේ වෙතත්, අපි එකම දේ ලබා ගත්තාද? නැහැ! පළමු අවස්ථාවේ දී සෑම නව විධානයක්ම පෙර පොරොමිසය (promise) අවසන් වීම බලා සිටී, එනමුත් දෙවන අවස්ථාවේ දී - සියලු පොරොමිස් එකවර ක්‍රියාත්මක වේ. මෙම වෙනස සැලකිය යුතු වන්නේ අපි ඊළඟ විධානයට යොමු කිරීමට අවශ්‍ය වූ විට පෙර විධානය ක්‍රියාත්මක කිරීම:

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

func();