জাভাস্ক্রিপ্টে অ্যাসিঙ্ক্রোনাস কোডের প্রমিসিফিকেশন

যেহেতু প্রমিসগুলি জাভাস্ক্রিপ্টে ততদিন আগে আসেনি, তাই কিছু অ্যাসিঙ্ক্রোনাস কার্যকারিতা প্রমিস সমর্থন নাও করতে পারে। এই ক্ষেত্রে এই ধরনের কোডের চারপাশে একটি প্রমিস হিসাবে একটি মোড়ক তৈরি করা দরকারী, কারণ প্রমিস ব্যবহার করা অনেক আরও সুবিধাজনক। এই ধরনের রূপান্তরকে বলা হয় প্রমিসিফিকেশন।

এমন কার্যকারিতার একটি উদাহরণ যা সমর্থন করে না প্রমিস, হতে পারে ইমেজ লোড করা, যা আমরা আগের পাঠে ইতিমধ্যেই দেখেছি:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('image load error');
});

আসুন এই কোডটির প্রমিসিফিকেশন সম্পাদন করি, এটিকে একটি ফাংশনে মোড়ক করে যা একটি প্রমিস রিটার্ন করে:

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('image "' + path + '"  load error'));
		});
	});
}

আমরা নিম্নলিখিতভাবে আমাদের ফাংশনটি ব্যবহার করতে সক্ষম হব:

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

স্বাধীনভাবে, আমার কোডে না দেখে, ইমেজ লোড করার প্রমিসিফিকেশন সম্পাদন করুন। প্রাপ্ত কোডটি পরীক্ষা করুন।

ইমেজের পথগুলি যেন অ্যারেতে সংরক্ষিত থাকে:

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

কোড লিখুন যা সমস্ত ইমেজ লোড হওয়ার অপেক্ষা করবে, তারপর সেগুলিকে লুপে body-এর শেষে যোগ করবে।

নিম্নলিখিত কোড দেওয়া হয়েছে:

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom loaded');
});

এর প্রমিসিফিকেশন সম্পাদন করুন।