JavaScript'te Promise Hell Sorunu

Bildiğiniz gibi promise'lar, callback hell problemini çözmek için oluşturuldu. Ancak zamanla promise'ların da karmaşık kod üretebileceği anlaşıldı. Bu sorun benzetme yapılarak promise hell olarak adlandırıldı.

Bu soruna kod örnekleri üzerinden bakalım. Bir parametre alan ve bu parametreye bağlı olarak sonuç döndüren getSmth fonksiyonumuz olduğunu varsayalım:

function getSmth(num) {
	return new Promise((resolve, reject) => {
		setTimeout(() => resolve(num * num), 1000)
	});
}

Bu durumda bazı yararlı işlemleri (örneğin sunucudan veri almayı) taklit ediyoruz. Taklit olarak basitçe bir sayıyı parametre olarak geçiriyor ve bir saniye sonra bu sayının karesini döndürüyoruz.

Şimdi getSmth fonksiyonumuzu başka bir fonksiyon içinde kullanalım:

function func() {
	getSmth(2).then(res => {
		console.log(res); // 4 yazdıracak
	});
}

func();

İlk Sorun

Birbirini takip eden çok sayıda then yapısı kodun anlaşılmasını zorlaştırır:

function func(){
	getSmth(2).then(res1 => {
		// bir şeyler yap
	}).then(res2 => {
		// bir şeyler yap
	}).then(res3 => {
		// bir şeyler yap
	}).then(res4 => {
		// bir şeyler yap
	}).then(res5 => {
		// bir şeyler yap
	}).then(res6 => {
		// bir şeyler yap
	});
}

func();

İkinci Sorun

Başka türden bir sorun daha var. Şimdi fonksiyonumuzu iki kez kullanıp sonuçları toplamak istediğimizi varsayalım. Sonuçta şu kodu elde ederiz:

function func() {
	getSmth(2).then(res1 => {
		getSmth(3).then(res2 => {
			console.log(res1 + res2); // 13 yazdıracak
		});
	});
}

func();

Zaten callback hell'i andırıyor, değil mi? Bir fonksiyon çağrısı daha ekleyelim - kod daha da kötüleşecek:

function func() {
	getSmth(2).then(res1 => {
		getSmth(3).then(res2 => {
			getSmth(4).then(res3 => {
				console.log(res1 + res2 + res3);
			});
		});
	});
}

func();

Elbette Promise.all kullanabiliriz:

function func() {
	Promise.all([getSmth(2), getSmth(3), getSmth(4)]).then(res => {
		console.log(res[0] + res[1] + res[2]);
	});
}

func();

Ancak aynı şeyi elde ettik mi? Hayır! İlk durumda her yeni fonksiyon bir önceki promise'in tamamlanmasını beklerken, ikinci durumda - tüm promise'ler aynı anda çalışır. Bu fark, bir sonraki fonksiyona bir önceki çağrının sonucunu iletmek istediğimizde önemli olacaktır:

function func() {
	getSmth(2).then(res1 => {
		getSmth(res1).then(res2 => {
			getSmth(res2).then(res3 => {
				console.log(res3);
			});
		});
	});
}

func();