JavaScript'te Asenkron Kodun Promise'e Dönüştürülmesi

Promise'ler JavaScript'e nispeten yeni eklendiğinden, bazı asenkron işlevler promise'leri desteklemeyebilir. Bu durumda, promise'leri kullanmak çok daha kolay olduğundan, böyle bir kodun üzerine bir promise katmanı oluşturmak faydalıdır. Bu dönüştürme işlemine promisification (promise'e dönüştürme) denir.

Promise'leri desteklemeyen bir işleve örnek olarak, önceki derslerde ele aldığımız resim yüklemeyi verebiliriz:

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

Şimdi bu kodu, onu bir promise döndüren bir fonksiyonun içine alarak promise'e dönüştürelim:

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('"' + path + '" resmi yüklenirken hata oluştu'));
		});
	});
}

Fonksiyonumuzu aşağıdaki şekilde kullanabileceğiz:

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

Benim koduma bakmadan, kendi başınıza resim yükleme işlemini promise'e dönüştürün. Elde ettiğiniz kodu test edin.

Resimlerin yollarının bir dizide saklandığını varsayalım:

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

Tüm resimlerin yüklenmesinin tamamlanmasını bekleyen ve ardından onları bir döngü içinde body'nin sonuna ekleyen kodu yazın.

Aşağıdaki kod verilmiştir:

window.addEventListener('DOMContentLoaded', function() {
	console.log('dom yüklendi');
});

Bu kodu promise'e dönüştürün.