1. `async` Fonksiyonunu Unutmak
JavaScript’te bir fonksiyonu `async` olarak tanımladığınızda, o fonksiyonun asenkron işlemlerle çalışmasını sağlarsınız. Ancak bazen, fonksiyonunuzu `async` olarak tanımlamayı unutabiliriz. Bu durumda, JavaScript kodu beklenmedik şekilde çalışır ve hata mesajları alırsınız. `await` sadece `async` fonksiyonlarında çalışır, bu yüzden her zaman fonksiyonun başına `async` anahtar kelimesini eklediğinizden emin olun.
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}2. `await` Kullanımını Yanlış Zamanlamak
Bir başka yaygın hata, `await` anahtar kelimesini yanlış yerde kullanmaktır. `await` yalnızca bir Promise nesnesi döndüren ifadelerin önünde kullanılmalıdır. Eğer `await` yanlış bir yerde kullanılırsa, işlem hemen çözülür ve bekleme yapılmaz.
async function fetchData() {
const response = await fetch('https://api.example.com/data'); // Doğru kullanım
const value = 10;
await value; // Yanlış kullanım: await bir değer üzerinde çalışmaz
}3. Hatalı `try/catch` Blokları Kullanmak
Asenkron fonksiyonlarda hata yönetimi çok önemlidir. `try/catch` blokları, asenkron kodlarda hata kontrolü için kullanılır, ancak yanlış yapılandırıldığında işler karışabilir. Hatalar, `catch` bloğunda doğru bir şekilde yakalanmazsa, kod beklenmedik bir şekilde çalışabilir.
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
} catch (error) {
console.error("Bir hata oluştu:", error); // Hatalar burada düzgün yakalanmalı
}
}4. `await` ile Dizi Üzerinde Beklemek
Birçok geliştirici, `await` kullanarak bir dizi elemanını sırasıyla bekler. Ancak, bu yaklaşım verimsizdir çünkü her `await` çağrısı sırayla çalışır. Eğer dizi elemanlarını paralel olarak beklemek istiyorsanız, `Promise.all` kullanmalısınız.
const urls = ['url1', 'url2', 'url3'];
async function fetchData() {
// Hatalı: Her biri sırayla bekleniyor
const results = [];
for (let url of urls) {
const response = await fetch(url);
results.push(await response.json());
}
// Doğru kullanım: Promise.all ile paralel bekleme
const resultsParallel = await Promise.all(urls.map(url => fetch(url).then(res => res.json())));
}5. `await` ile Yanlış Kapanış Yapmak
`await` anahtar kelimesini doğru şekilde kullanmak çok önemli, ancak bazen `await` sonrasında bir kapanış yapılması gerektiğini unutabiliyoruz. Bu durum, asenkron işlemin tamamlanmamasına ve sonuçların beklenmedik bir sırayla geri dönmesine yol açabilir.
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json(); // 'await' ile işlem beklenmeli
return data; // Asenkron işlemin tamamlanmasından sonra sonuç dönmeli
}6. Promise Zincirleme Hataları
Bazı geliştiriciler, `async`/`await` yerine eski yöntem olan `then()` ve `catch()` zincirlemesini kullanmayı tercih ederler. Ancak bu, kodunuzu daha karmaşık hale getirebilir ve hataların izlenmesini zorlaştırabilir. `await`, asenkron kodunuzu daha okunabilir ve anlaşılır hale getirir. Ancak, bazen her iki yöntemi karıştırarak yanlış anlaşılmalara yol açabilirsiniz.
async function fetchData() {
const response = await fetch('https://api.example.com/data');
response.then(res => res.json()) // Hatalı: 'await' ve 'then' birlikte kullanılmamalı
}7. Çok Fazla `await` Kullanmak
Herhangi bir kod parçasında olduğu gibi, asenkron kodda da aşırıya kaçmak işlerimizi zorlaştırabilir. `await` anahtar kelimesini her satırda kullanmak, kodunuzu gereksiz yere yavaşlatabilir. Bunun yerine, mümkünse birden fazla asenkron işlemi paralel olarak çalıştırmak en iyisidir.
async function fetchData() {
const result1 = await fetch('https://api.example.com/data1');
const result2 = await fetch('https://api.example.com/data2');
// Bunun yerine Promise.all kullanılabilir
const results = await Promise.all([fetch('url1'), fetch('url2')]);
}Sonuç: Async/Await, asenkron işlemleri yönetmenin harika bir yoludur, ancak doğru kullanılmadığında karmaşıklık yaratabilir. Bu yazıda bahsettiğimiz yaygın hatalardan kaçınarak, daha verimli ve hatasız bir JavaScript kodu yazabilirsiniz.
