JavaScript ရှိ Promise Hell ပြဿနာ

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

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

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

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

ယခု ကျွန်ုပ်တို့၏ getSmth ဖန်ရှင်ကို အခြားဖန်ရှင်တစ်ခုအတွင်း၌ အသုံးပြုကြည့်ပါစို့။

function func() {
	getSmth(2).then(res => {
		console.log(res); // 4 ကို ပြသမည်
	});
}

func();

ပထမဆုံးပြဿနာ

တစ်ခုပြီးတစ်ခု လာသော then တည်ဆောက်ပုံများစွာသည် ကုဒ်ကို နားလည်ရခက်ခဲစေပါသည်။

function func(){
	getSmth(2).then(res1 => {
		// တစ်ခုခု လုပ်ပါ
	}).then(res2 => {
		// တစ်ခုခု လုပ်ပါ
	}).then(res3 => {
		// တစ်ခုခု လုပ်ပါ
	}).then(res4 => {
		// တစ်ခုခု လုပ်ပါ
	}).then(res5 => {
		// တစ်ခုခု လုပ်ပါ
	}).then(res6 => {
		// တစ်ခုခု လုပ်ပါ
	});
}

func();

ဒုတိယပြဿနာ

အခြားသော ပြဿနာတစ်ခုလည်း ရှိပါသည်။ ယခု ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ ဖန်ရှင်ကို နှစ်ကြိမ်အသုံးပြုပြီး၊ ရလဒ်များကို ပေါင်းထည့်လိုသည်ဆိုပါစို့။ ရလဒ်အနေဖြင့် ဤကဲ့သို့သော ကုဒ်တစ်ခု ကျွန်ုပ်တို့ရရှိပါလိမ့်မည်။

function func() {
	getSmth(2).then(res1 => {
		getSmth(3).then(res2 => {
			console.log(res1 + res2); // 13 ကို ပြသမည်
		});
	});
}

func();

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

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

func();

Promise.all ကို အသုံးပြုနိုင်သည် မှန်ပါသည်။

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

func();

သို့သော် ကျွန်ုပ်တို့ တူညီသောအရာကို ရပါသလား။ မရပါ။ ပထမကိစ္စတွင် ဖန်ရှင်အသစ်တစ်ခုစီသည် ယခင်ကတည်းက ပြီးဆုံးသွားသော promise ကို စောင့်ဆိုင်းနေပြီး၊ ဒုတိယကိစ္စတွင် promises အားလုံးသည် တစ်ပြိုင်နက်တည်း လုပ်ဆောင်နေပါသည်။ ကျွန်ုပ်တို့သည် ယခင်ကတည်းက ခေါ်ဆိုမှုကို နောက်ထပ်ဖန်ရှင်သို့ ပို့ဆောင်လိုသည့်အခါတွင် ဤကွဲပြားချက်သည် သိသာထင်ရှားပါလိမ့်မည်။

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

func();