1. Hata: `await` Anahtar Kelimesini Unutmak
Bazen en basit hatalar en can sıkıcı olanlardır. Özellikle bir fonksiyonun asenkron olmasına rağmen, `await` anahtar kelimesini kullanmayı unuttuğumuzda işler karışabilir. Böylece, beklenen asenkron işlem gerçekleşmeden kodun devamı çalışmaya başlar.
Çözüm:
Asenkron fonksiyonları kullanırken her zaman `await` anahtar kelimesini eklemeyi unutmayın. İşte bir örnek:
async function fetchData() {
let response = fetch("https://api.example.com/data");
// Hata: await eksik!
let data = response.json();
return data;
}
async function correctFetchData() {
let response = await fetch("https://api.example.com/data"); // await eklenmiş
let data = await response.json();
return data;
}2. Hata: `await` Kullanmak İçin Sadece `async` Fonksiyonları Kullanmak
Evet, doğru duydunuz! `await` yalnızca `async` fonksiyonlarının içinde çalışır. `await`'i bir normal fonksiyon içinde kullanmaya çalışırsanız, JavaScript size hata verecektir.
Çözüm:
Her zaman `await` kullanacağınız fonksiyonu `async` olarak tanımladığınızdan emin olun. İşte doğru kullanım örneği:
function normalFunction() {
let data = await fetchData(); // Hata: async fonksiyon içinde değil
}
async function asyncFunction() {
let data = await fetchData(); // Doğru: async fonksiyon içinde
return data;
}3. Hata: `Promise` Objelerini Yanlış Yönetmek
`async/await` kullandığınızda, bazen `Promise` objelerinin doğru şekilde yönetilmemesi sorun yaratabilir. Özellikle zincirleme `Promise`'ler ve `await` arasındaki dengeyi kurmak zor olabilir.
Çözüm:
Birden fazla asenkron işlemi aynı anda yönetmek için `Promise.all()` veya `Promise.allSettled()` gibi yardımcı fonksiyonları kullanabilirsiniz.
async function fetchDataFromMultipleSources() {
let promise1 = fetch("https://api.example.com/data1");
let promise2 = fetch("https://api.example.com/data2");
// İki Promise'i aynı anda beklemek için Promise.all() kullanıyoruz
let [data1, data2] = await Promise.all([promise1, promise2]);
return { data1, data2 };
}4. Hata: `try/catch` Bloklarını Unutmak
Asenkron fonksiyonlar hata yapmaya meyillidir çünkü dış kaynaklardan veri çekmek her zaman sorunsuz işlemez. `await` kullandığınızda hata yönetimini unutmak, özellikle hata mesajlarının kullanıcıya iletilmesinde sorunlar yaratabilir.
Çözüm:
Her zaman `try/catch` bloklarını kullanarak hataları düzgün şekilde yönetmeye çalışın. Bu, yazılımınızın daha dayanıklı olmasını sağlar.
async function fetchDataWithErrorHandling() {
try {
let response = await fetch("https://api.example.com/data");
if (!response.ok) {
throw new Error("Veri çekilemedi");
}
let data = await response.json();
return data;
} catch (error) {
console.error("Hata:", error);
return null;
}
}5. Hata: Dönüş Değerlerini Yanlış Yönetmek
Bir async fonksiyon her zaman bir `Promise` döner. Ancak bazen, `async` fonksiyonlarının dönüş değerlerini doğrudan almak isteriz ve burada işler karışabilir.
Çözüm:
Async fonksiyonları kullanırken, dönüş değerlerinin `Promise` olduğunu unutmamalısınız. Dönüş değerini doğru şekilde almak için `await` kullanmalısınız.
async function getData() {
return "Data ready"; // Bu aslında bir Promise döner
}
async function correctUsage() {
let data = await getData(); // await kullanarak veriyi alıyoruz
console.log(data); // "Data ready"
}Sonuç:
Async/await yapısını kullanmak, asenkron programlamayı daha okunabilir ve yönetilebilir hale getiren harika bir araçtır. Ancak, dikkat edilmesi gereken bazı incelikler ve yaygın hatalar bulunmaktadır. Bu yazıda ele aldığımız 5 yaygın hata ve çözüm yolları, günlük kodlama hayatınızda size yardımcı olacaktır. Unutmayın, her hata bir öğrenme fırsatıdır! Kendinizi geliştirmek için bu hatalardan kaçının ve async/await konusunda ustalaşın.
