Async Fonksiyonlarda Hata Yönetimi: try...catch ile Güvenli Kod
Giriş
async ve await sözdizimi harikadır, ancak bir sorun vardır: Promise zincirlerinde kullandığımız .catch() metodu burada doğrudan kullanılamaz. Eğer await ettiğiniz bir işlem hata verirse (Promise reject olursa), kodunuzun çalışması durur ve konsolda kırmızı bir hata görürsünüz. Bu makalede, bu hataları nasıl zarif bir şekilde yöneteceğimizi (handle edeceğimizi) öğreneceğiz.
Problem: Yakalanmayan Hatalar
Normalde Promise ile şöyle yapardık:
veriGetir()
.then(data => console.log(data))
.catch(hata => console.log("Hata:", hata)); // Hatayı yakaladıkAncak async/await ile şunu yaparsak ve hata oluşursa:
async function veriAl() {
const data = await veriGetir(); // Burada hata olursa kod KIRILIR!
console.log(data); // Bu satır asla çalışmaz
}
veriAl();
// Uncaught Error: ...Bu durum uygulamamızın çökmesine neden olabilir.
Çözüm: try...catch Bloğu
JavaScript'in standart hata yakalama mekanizması olan try...catch, asenkron fonksiyonlarda da mükemmel çalışır. await ifadesini try bloğu içine alırız.
async function guvenliVeriAl() {
try {
// Hata oluşabilecek kodları buraya yaz
console.log("Veri isteniyor...");
const data = await veriGetir();
console.log("Veri geldi:", data);
} catch (hata) {
// Hata olursa burası çalışır
console.log("BİR HATA OLUŞTU!");
console.log("Hata detayı:", hata);
}
}Eğer veriGetir() başarılı olursa, try bloğu sonuna kadar çalışır ve catch atlanır.
Eğer hata verirse, try bloğunun çalışması o anda durur ve kontrol catch bloğuna geçer.
Gerçek Hayat Örneği: Kullanıcı Girişi
const girisButonu = document.querySelector('#giris');
const hataKutusu = document.querySelector('#hata-kutusu');
girisButonu.addEventListener('click', async function() {
hataKutusu.style.display = 'none'; // Önceki hataları temizle
try {
const kullaniciAdi = document.querySelector('#kadi').value;
const sifre = document.querySelector('#sifre').value;
// Hata fırlatabilecek asenkron işlem
const sonuc = await girisYap(kullaniciAdi, sifre);
console.log("Giriş başarılı, yönlendiriliyor...");
window.location.href = '/dashboard';
} catch (e) {
// Hata yakalandı, kullanıcıya göster
hataKutusu.textContent = "Giriş başarısız: " + e.message;
hataKutusu.style.display = 'block';
}
});Hata Nesnesi (e)
catch(e) bloğundaki e (veya error, err) parametresi hatanın kendisidir. Bu, Promise'ın reject edildiği değerdir.
try {
throw new Error("Bir şeyler ters gitti");
} catch (e) {
console.log(e.name); // "Error"
console.log(e.message); // "Bir şeyler ters gitti"
console.log(e.stack); // Hatanın nerede olduğu (stack trace)
}Alternatif Yaklaşım: Karma Kullanım
Bazen try...catch bloğu kodun akışını bozabilir veya çok "kalabalık" görünebilir. await edilen fonksiyona .catch() ekleyerek de devam edebilirsiniz.
async function veriAl() {
// Hata olursa null döner, kod kırılmaz
const data = await veriGetir().catch(e => {
console.log("Basit hata yakalama:", e);
return null; // Varsayılan değer
});
if (data) {
console.log("Veri:", data);
} else {
console.log("Veri alınamadı, devam ediliyor...");
}
}Bu yöntem özellikle varsayılan değer (fallback value) atamak istediğinizde çok kullanışlıdır.
finally Bloğu
Hata olsa da olmasa da çalışmasını istediğiniz kodlar için finally kullanabilirsiniz (örneğin yükleniyor ikonunu kaldırmak için).
async function islemYap() {
yukleniyorGoster(true);
try {
await uzunSurenIslem();
basariMesaji();
} catch (error) {
hataMesaji(error);
} finally {
// Her durumda çalışır
yukleniyorGoster(false);
}
}Seri Özeti ve Kapanış
Tebrikler! Asenkron JavaScript serisinin sonuna geldiniz. Bu seride şunları öğrendik:
- Call Stack: JavaScript'in tek iş parçacıklı doğası
- Web APIs: Tarayıcının arka planda nasıl çalıştığı
- Callback Hell: Neden kaçınmamız gerektiği
- Promises: Asenkron işlemlerin modern yönetimi
- async/await: Asenkron kodu senkron gibi yazma sanatı
- Hata Yönetimi: Uygulamamızı
try...catchile güvenli hale getirme
Artık API istekleri yapan, veritabanı işlemleri yürüten ve kullanıcı etkileşimlerini yöneten modern, temiz ve güvenli JavaScript kodları yazmaya hazırsınız.
İyi kodlamalar!
