JavaScript-те асинхронды кодты промисификациялау
Промисстер JavaScript-те жақында ғана пайда болғандықтан, кейбір асинхронды функционал промисстерді қолдамауы мүмкін. Бұл жағдайда мұндай кодты промис қабығымен қаптаған жөн, себебі промисстерді қолдану әлдеқайда ыңғайлы. Мұндай түрлендіру промисификация деп аталады.
Промисстерді қолдамайтын функционалдың мысалы ретінде біз алдыңғы сабақтарда қарастырған суреттерді жүктеуді алуға болады:
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 загружен');
});
Оны промисификациялаңыз.