JavaScript တွင် Asynchronous Code ကို Promisify လုပ်ခြင်း

Promise များသည် JavaScript တွင် မကြာသေးမီကမှ ပေါ်ထွက်လာသောကြောင့်၊ အချို့သော asynchronous လုပ်ဆောင်ချက်များသည် Promise များကို မပံ့ပိုးပေးနိုင်ပါ။ ထိုသို့သောအခြေအနေမျိုးတွင် Promise များကို အသုံးပြုရန် ပိုမိုအဆင်ပြေသောကြောင့် ၎င်းကဲ့သို့သော code အပေါ်တွင် Promise အခွံခံ၍ ထည့်သွင်းခြင်းသည် အသုံးဝင်ပါသည်။ ထိုသို့ပြောင်းလဲခြင်းကို promisification ဟုခေါ်သည်။

Promise များကို မပံ့ပိုးသော လုပ်ဆောင်ချက်တစ်ခု၏ ဥပမာမှာ ကျွန်ုပ်တို့ ယခင်သင်ခန်းစာများတွင် လေ့လာခဲ့ပြီးဖြစ်သော ရုပ်ပုံများကို ဖွင့်ခြင်း ဖြစ်နိုင်သည်။

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('ရုပ်ပုံ ဖွင့်ရာတွင် အမှား');
});

ထို့ကြောင့် ဤ code ကို Promise တစ်ခု ပြန်ပေးသော function ဖြင့် ထည့်သွင်း၍ promisify လုပ်ကြည့်ရအောင်။

function loadImage(path) {
	return new Promise(function(resolve, reject) {
		let image = document.createElement('img');
		image.src = path;
		
		image.addEventListener('load', function() {
			resolve(image);
		});
		image.addEventListener('error', function() {
			reject(new Error('"' + path + '" ရုပ်ပုံ ဖွင့်ရာတွင် အမှား'));
		});
	});
}

ကျွန်ုပ်တို့၏ function ကို အောက်ပါအတိုင်း အသုံးပြုနိုင်သည်။

loadImage('img.png').then(function(image) {
	document.body.appendChild(image);
}).catch(function(error) {
	console.log(error);
});

ကျွန်ုပ်၏ code ကို ကြည့်ရှုခြင်းမပြုဘဲ၊ ကိုယ်တိုင်ရုပ်ပုံများ ဖွင့်ခြင်းကို promisify လုပ်ပါ။ ရရှိလာသော code ကို စမ်းသပ်ကြည့်ပါ။

ရုပ်ပုံများ၏ လမ်းကြောင်းများကို array တစ်ခုတွင် သိမ်းထားသည်ဆိုပါစို့။

let paths = ['img1.png', 'img2.png', 'img3.png'];

ရုပ်ပုံအားလုံး ဖွင့်တာပြီးမြောက်သည်အထိ စောင့်ပြီးနောက်၊ ၎င်းတို့ကို loop ဖြင့် body ၏ နောက်ဆုံးတွင် ထည့်သွင်းမည့် code ကို ရေးပါ။

အောက်ပါ code ကို ပေးထားသည်။

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom ဖွင့်ပြီး');
});

၎င်း၏ promisification ကို လုပ်ဆောင်ပါ။