Callback Hell Nedir?
Peki, Callback Hell ile nasıl başa çıkabiliriz?
# Callback Hell'e Örnek
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
fetch(`https://api.example.com/${data.id}/details`)
.then(response => response.json())
.then(details => {
fetch(`https://api.example.com/details/${details.id}/more-info`)
.then(response => response.json())
.then(moreInfo => {
console.log(moreInfo);
});
});
});
Burada dikkat ettiyseniz, her `then` fonksiyonu bir başka `then` fonksiyonu içinde yer alıyor ve bu, kodun okunabilirliğini zorlaştırıyor. İşte bu tam olarak Callback Hell'in ta kendisidir!
Promise ile Çözüm
# Promise Kullanarak Callback Hell’i Çözme
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
return fetch(`https://api.example.com/${data.id}/details`);
})
.then(response => response.json())
.then(details => {
return fetch(`https://api.example.com/details/${details.id}/more-info`);
})
.then(response => response.json())
.then(moreInfo => {
console.log(moreInfo);
})
.catch(error => console.error('Error:', error));
Bu yapıda, her bir `then` fonksiyonu, önceki işlemi bekler ve sonrasında sırasıyla diğer işlemleri gerçekleştirir. Böylece, callback hell’den kurtulmuş oluruz. Eğer bir hata oluşursa, `.catch()` bloğu devreye girer ve hata yönetimi daha kolay hale gelir.
Async/Await ile Yeni Bir Dönem
# Async/Await Kullanımı
async function getData() {
try {
const response1 = await fetch('https://api.example.com/data');
const data = await response1.json();
const response2 = await fetch(`https://api.example.com/${data.id}/details`);
const details = await response2.json();
const response3 = await fetch(`https://api.example.com/details/${details.id}/more-info`);
const moreInfo = await response3.json();
console.log(moreInfo);
} catch (error) {
console.error('Error:', error);
}
}
getData();
Yukarıdaki örnekte, her işlem bekleniyor ve ardından bir sonraki işleme geçiliyor. Kodun okunabilirliği çok daha basit hale geliyor. Bu, özellikle büyük projelerde veya karmaşık iş akışlarında çok faydalıdır.
Sonuç
Unutmayın, asenkron programlama öğrenme sürecinde karşınıza çıkacak her yeni kavram, sizi daha iyi bir geliştirici yapacaktır. JavaScript’in derinliklerine indikçe, yeni araçlarla işlerinizin ne kadar kolaylaştığını göreceksiniz.