जावास्क्रिप्ट में एसिंक्रोनस कोड का प्रोमिसिफिकेशन

चूंकि प्रोमिसेज जावास्क्रिप्ट में ज्यादा समय पहले नहीं आए थे, तो कुछ एसिंक्रोनस फंक्शनलिटी प्रोमिसेज को सपोर्ट नहीं कर सकता है। इस मामले में ऐसे कोड के ऊपर एक आवरण बनाना उपयोगी होता है एक प्रोमिस के रूप में, क्योंकि प्रोमिसेज का उपयोग करना बहुत अधिक सुविधाजनक है। ऐसे परिवर्तन को कहा जाता है प्रोमिसिफिकेशन।

ऐसे फंक्शनलिटी का उदाहरण, जो सपोर्ट नहीं करता प्रोमिसेज, इमेज लोडिंग हो सकती है, जिसे हमने पिछले पाठों में पहले ही देख लिया है:

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);
});

स्वयं, मेरे कोड में देखे बिना, इमेज लोडिंग का प्रोमिसिफिकेशन करें। प्राप्त कोड का टेस्ट करें।

मान लीजिए कि इमेज के पथ Array में स्टोर हैं:

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

ऐसा कोड लिखें, जो सभी इमेज के लोड होने का इंतजार करे, और फिर उन्हें लूप में body के अंत में जोड़ दे।

निम्नलिखित कोड दिया गया है:

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

इसका प्रोमिसिफिकेशन करें।