Промісіфікацыя асінхроннага кода ў JavaScript

Так як промісы з'явіліся ў JavaScript не так даўно, то некаторы асінхронны функцыянал можа не падтрымліваць промісы. У гэтым выпадку карысна стварыць над такім кодам абалонку ў выглядзе проміса, так як карыстацца промісамі значна зручней. Такое пераўтварэнне называецца промісіфікацыяй.

Прыкладам функцыяналу, які не падтрымлівае промісы, можа служыць загрузка выяў, якую мы ўжо разбіралі ў папярэдніх уроках:

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

Давайце выканаем промісіфікацыю гэтага кода, абарваўшы яго ў функцыю, якая вяртае проміс:

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

Мы зможам скарыстацца нашай функцыяй наступным чынам:

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

Самастойна, не падглядаючы ў мой код, выканайце промісіфікацыю загрузкі выяў. Пратэстуйце атрыманы код.

Задание 2

Хай шляхі да выяў захоўваюцца ў масіве:

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

Напішыце код, які дачакаецца заканчэння загрузкі ўсіх выяў, а затым дадасць іх у цыкле ў канец body.

Задание 3

Дадзены наступны код:

javascriptwindow.addEventListener('DOMContentLoaded', function() {
  console.log('dom загружаны');
});

Выканайце яго промісіфікацыю.