Prosimifikimi i Kodit Asinkron në JavaScript

Meqenëse premtimet kanë shfaqur në JavaScript jo shumë kohë më parë, disa funksionalitete asinkrone mund të mos mbështesin premtimet. Në këtë rast është e dobishme të krijohet një mbështjellës në formë të një premtimi, pasi përdorimi i premtimeve është shumë më i përshtatshëm. Një transformim i tillë quhet prosimifikim.

Një shembull i një funksionaliteti që nuk mbështet premtimet mund të jetë ngarkimi i imazheve, të cilin e kemi shqyrtuar tashmë në mësimet e mëparshme:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('gabim në ngarkimin e imazhit');
});

Le të kryejmë prosimifikimin e këtij kodi, duke e mbështjellë atë në një funksion që kthen një premtim:

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('gabim në ngarkimin e imazhit "' + path + '"'));
		});
	});
}

Ne do të jemi në gjendje të përdorim funksionin tonë në mënyrën e mëposhtme:

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

Vetë, pa parë në kodin tim, kryeni prosimifikimin e ngarkimit të imazheve. Testoni kodin e përftuar.

Le të supozojmë se rrugët drejt imazheve ruhen në një varg:

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

Shkruani kodin që do të presë përfundimin e ngarkimit të të gjitha imazheve, dhe pastaj do t'i shtojë ato në një cikël në fund të body.

Është dhënë kodi i mëposhtëm:

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

Kryeni prosimifikimin e tij.