1. `try/catch` Yapısını Yanlış Kullanmak
Asenkron işlemlerle çalışırken, hata yakalamak için genellikle `try/catch` yapısını kullanırız. Ancak birçok geliştirici bu yapıyı yanlış kullanabiliyor. Örneğin, `await` ifadesinin dışında bir `try/catch` bloğu oluşturmak hataya neden olabilir.
Yanlış Kullanım:
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
// İşlem burada devam eder
} catch (error) {
console.log('Hata:', error); // Hata burada yakalanır
}
}
Doğru Kullanım:
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
// İşlem burada devam eder
} catch (error) {
console.error('Hata:', error);
}
}
Hata, yalnızca `await` kullanılan kodlarda yakalanabilir. Bu yüzden, asenkron işlemi saran `try/catch` bloğunun doğru yerleştirilmesi çok önemlidir.
2. `Promise.all` ve `Promise.allSettled` Arasındaki Farkları Anlamamak
`Promise.all` ve `Promise.allSettled` her ikisi de birden fazla Promise işlemini paralel olarak çalıştırmak için kullanılır, ancak önemli farklar vardır. `Promise.all` yalnızca tüm Promise'ler başarılı olursa çalışır. Bir hata durumunda, diğer Promise'ler ihlal edilmeden işleme son verilir. Oysa `Promise.allSettled`, tüm Promise'ler tamamlandıktan sonra sonuçları döndürür, başarısız olanları da dahil eder.
Örnek Kullanım:
const promises = [
fetch('https://api.example.com/data1'),
fetch('https://api.example.com/data2'),
fetch('https://api.example.com/data3')
];
// Promise.all
Promise.all(promises)
.then(responses => {
// Tüm istekler başarılı olursa çalışır
})
.catch(error => {
// Hata durumunda buraya gelir
});
// Promise.allSettled
Promise.allSettled(promises)
.then(results => {
results.forEach(result => {
if (result.status === 'fulfilled') {
console.log('Başarı:', result.value);
} else {
console.log('Hata:', result.reason);
}
});
});
Bu farkları anlamak, hangi metodu kullanmanız gerektiğine karar verirken size rehberlik edecektir.
3. Asenkron İşlemleri Beklerken Hata Yöneticisi Unutmak
Birçok geliştirici, asenkron işlemler sırasında hata yönetimine yeterince dikkat etmiyor. Örneğin, bir `Promise` nesnesinin hata mesajını düzgün şekilde ele almak, bazen gözden kaçabiliyor.
Yanlış Kullanım:
async function getUserData() {
const user = await fetch('https://api.example.com/user');
const userData = await user.json(); // Hata burada yakalanmaz
return userData;
}
Doğru Kullanım:
async function getUserData() {
try {
const user = await fetch('https://api.example.com/user');
if (!user.ok) {
throw new Error('Kullanıcı verisi alınamadı');
}
const userData = await user.json();
return userData;
} catch (error) {
console.error('Hata:', error.message);
}
}
Burada, `fetch` işleminin sonucunun başarılı olup olmadığını kontrol etmek ve olası hataları doğru şekilde yakalamak oldukça önemlidir.
4. UnhandledPromiseRejectionWarning Hatası
Birçok geliştirici, `Promise` hatalarını düzgün şekilde ele almaz ve bu da "UnhandledPromiseRejectionWarning" hatasına yol açar. Bu hata, bir `Promise` reddedildiğinde ve bu reddetme uygun bir `catch` bloğuyla yakalanmadığında ortaya çıkar.
Çözüm:
Her zaman bir `catch` bloğu ile `Promise` hatalarını ele almayı unutmayın. Alternatif olarak, `async/await` ile hata yönetimi yaparken `try/catch` kullanabilirsiniz.
const promise = fetch('https://api.example.com/data')
.then(response => response.json())
.catch(error => console.error('Hata:', error)); // Hata burada yakalanır
5. Performans Sorunları ve Yanlış Optimizasyonlar
Asenkron işlemler yazarken, performansı düşünmeden yapılan yanlış optimizasyonlar büyük sorunlara yol açabilir. Örneğin, gereksiz yere `async/await` kullanmak veya çok sayıda `Promise` işlemini tek bir `await` içinde sıraya koymak, uygulamanın performansını düşürebilir.
Yanlış Kullanım:
async function fetchData() {
await fetch('https://api.example.com/data1');
await fetch('https://api.example.com/data2');
await fetch('https://api.example.com/data3');
}
Doğru Kullanım:
async function fetchData() {
const [data1, data2, data3] = await Promise.all([
fetch('https://api.example.com/data1'),
fetch('https://api.example.com/data2'),
fetch('https://api.example.com/data3')
]);
}
Bu şekilde, tüm `Promise` işlemleri paralel olarak çalıştırılır ve işlemler daha hızlı tamamlanır.
Sonuç: Hata Yönetimini Güçlendirin
`async/await` yapısı, JavaScript’in en güçlü özelliklerinden biridir, ancak doğru kullanımı büyük önem taşır. Hata yönetimini düzgün yaparak, hem performansı artırabilir hem de olası sorunların önüne geçebilirsiniz. Yukarıda bahsettiğimiz 5 yaygın hatayı ve çözüm yollarını uygulayarak, daha temiz ve etkili bir asenkron kod yazabilirsiniz.
