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:

javascriptlet 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:

javascriptfunction 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:

javascriptloadImage('img.png').then(function(image) {
  document.body.appendChild(image);
}).catch(function(error) {
  console.log(error);
});
Задание 1

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

Задание 2

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

javascriptlet 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.

Задание 3

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

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

Kryeni prosimifikimin e tij.