JavaScript ရှိ Promise Hell ပြဿနာ

Callback hell ပြဿနာကို ဖြေရှင်းရန် promises များကို ဖန်တီးခဲ့ကြောင်း သင်သိပြီးဖြစ်ပါလိမ့်မည်။ သို့သော် အချိန်ကြာလာသည်နှင့်အမျှ promises များသည်လည်း ရှုပ်ထွေးသောကုဒ်များကို ဖြစ်ပေါ်စေနိုင်ကြောင်း သိလာရပါသည်။ ဤပြဿနာကို အလားတူပင်� promise hell ဟု အမည်ပေးခဲ့သည်။

ကုဒ်နမူနာများဖြင့် ဤပြဿနာကို ကြည့်ရှုကြပါစို့။ ကျွန်ုပ်တို့တွင် getSmth ဟုခေါ်သော ဖန်ရှင်တစ်ခုရှိသည်ဆိုပါစို့၊ ထိုဖန်ရှင်သည် parameter တစ်ခုကို လက်ခံပြီး ထို parameter ပေါ်မူတည်၍ ရလဒ်ကို ပြန်ပေးပါသည်။

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

ဤကိစ္စတွင် ကျွန်ုပ်တို့သည် အသုံးဝင်သော လုပ်ဆောင်ချက်တစ်ခုကို (ဥပမာ ဆာဗာမှ ဒေတာရယူခြင်း) အစားထိုး စမ်းသပ်နေခြင်းဖြစ်သည်။ အစားထိုးစမ်းသပ်မှုအဖြစ် ကျွန်ုပ်တို့သည် နံပါတ်တစ်ခုကို parameter အဖြစ် ပို့ပေးပြီး တစ်စက္ကန့်အကြာတွင် ထိုနံပါတ်၏ စတုရန်းကို ပြန်ပေးပါသည်။

ယခု ကျွန်ုပ်တို့၏ 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 ကို စောင့်ဆိုင်းနေပြီး၊ ဒုတိယကိစ္စတွင် promises အားလုံးသည် တစ်ပြိုင်နက်တည်း လုပ်ဆောင်နေပါသည်။ ကျွန်ုပ်တို့သည် ယခင်ကတည်းက ခေါ်ဆိုမှုကို နောက်ထပ်ဖန်ရှင်သို့ ပို့ဆောင်လိုသည့်အခါတွင် ဤကွဲပြားချက်သည် သိသာထင်ရှားပါလိမ့်မည်။

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

func();