Uwekezaji wa Asynchronous Code kuwa Promise katika JavaScript

Kwa kuwa Promise zimeibuka katika JavaScript si muda mrefu sana, baadhi ya utendakazi wa asynchronous huenda usiunge mkono Promise. Katika hali kama hiyo ni muhimu kuunda kifuniko juu ya code kama hiyo kwa mfumo wa Promise, kwani matumizi ya Promise ni rahisi zaidi. Mabadiliko kama haya yanaitwa uwekezaji kuwa Promise.

Mfano wa utendakazi ambao haungii mkono Promise, unaweza kuwa upakiaji wa picha, ambao tumeizoea katika masomo yaliyopita:

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

Wacha tufanye uwekezaji wa code hii kuwa Promise, tukiifunga ndani ya funkciyo, itakayorudisha Promise:

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

Tutaweza kutumia funkciyo yetu kwa njia ifuatavyo:

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

Wewe mwenyewe, bila kuangalia code yangu, fanya uwekezaji wa upakiaji wa picha kuwa Promise. Jaribu code uliyopata.

Hebu pathi za picha zihifadhiwe kwenye array:

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

Andika code, ambayo itasubiri mpaka upakiaji wa picha zote ukome, kisha uziongeze kwenye mwili wa ukurasa kwa kutumia kitanzi.

Kuna code ifuatayo:

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

Fanya uwekezaji wake kuwa Promise.