1. Promiselerin Yanlış Kullanımı
Promiseler, JavaScript'te asenkron işlemleri yönetmenin güçlü bir yoludur. Ancak çoğu zaman geliştiriciler, promiseleri yanlış şekilde kullanarak uygulamalarını zorlaştırırlar. Mesela, bir promise içinde başka bir promise döndürdüğünüzde, bazen işlemler beklenmedik şekilde çalışabilir. İşte bu durumda, bir Promise'nin sonucunu düzgün şekilde beklemek için `.then()` ya da `await` kullanmanız gerekir. Hadi bunu örnekle daha iyi görelim:
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Veri alındı"), 1000);
});
}
async function getData() {
const result = await fetchData();
console.log(result);
}
getData();Bu şekilde, `await` kullanarak veri alınana kadar bekleriz ve sonrasında doğru sonucu alırız. Eğer yanlış kullanımda, `.then()` ya da `await` yerine callback fonksiyonları kullanırsanız, beklenmeyen sonuçlar alabilirsiniz.
2. Callback Hell (Geri Çağırma Cehennemi)
Callback hell, JavaScript geliştiricilerinin en çok karşılaştığı sorunlardan biridir. Bir callback fonksiyonu içinde başka bir callback fonksiyonu çağırdığınızda, kodunuz karmaşıklaşır ve okunabilirlik büyük ölçüde azalır. Bu durumda, kodunuzu yönetmek ve hataları ayıklamak daha zor hale gelir. Peki, bunu nasıl çözeriz?
Çözüm: Callback hell'den kurtulmanın en iyi yolu, callback fonksiyonları yerine promiseleri kullanmaktır. Promiseler, asenkron kodu daha okunabilir ve anlaşılır hale getirir. İşte bir örnek:
function firstTask() {
return new Promise(resolve => {
setTimeout(() => resolve("Birinci görev tamamlandı"), 1000);
});
}
function secondTask() {
return new Promise(resolve => {
setTimeout(() => resolve("İkinci görev tamamlandı"), 1000);
});
}
async function performTasks() {
const first = await firstTask();
console.log(first);
const second = await secondTask();
console.log(second);
}
performTasks();Bu şekilde, her bir görevi sırayla gerçekleştirebilir ve callback hell'den kurtulmuş olursunuz.
3. Async/Await Kullanımı
Async/Await, JavaScript'teki asenkron işlemleri yönetmenin en modern yoludur. Ancak, doğru kullanılmadığında, yine sorunlarla karşılaşabilirsiniz. Örneğin, bir `async` fonksiyon içinde `await` kullanmayı unutmak, kodunuzun beklenen şekilde çalışmamasına yol açabilir.
Çözüm: `async` fonksiyonları içinde `await` kullanarak, asenkron işlemleri senkron hale getirebilirsiniz. Bu, kodunuzu çok daha okunabilir ve anlaşılır kılar. Aşağıdaki örneğe göz atalım:
async function fetchUserData() {
const user = await getUser();
const posts = await getPosts(user.id);
console.log(posts);
}
fetchUserData();Bu şekilde, `await` kullanarak fonksiyonları sırasıyla bekletiriz ve işlemler beklenmedik şekilde sıralanmaz.
4. Hata Ayıklama İpuçları
Asenkron kod yazarken karşılaştığınız hatalar bazen zorlayıcı olabilir. Özellikle, promise rejection'ları veya zaman aşımını ele almak çok önemlidir. Bu hataları doğru şekilde yakalamak, uygulamanızın sağlıklı bir şekilde çalışmasını sağlar.
Çözüm: Hata ayıklamak için `try...catch` blokları kullanarak asenkron hataları kolayca yakalayabilirsiniz. Örneğin:
async function getData() {
try {
const response = await fetch("https://api.example.com/data");
if (!response.ok) {
throw new Error("Veri alındı, ancak hata oluştu!");
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Hata: ", error.message);
}
}
getData();Bu şekilde, asenkron işlemlerde meydana gelen hataları düzgün bir şekilde yakalayabilir ve hata mesajlarını doğru bir şekilde gösterebilirsiniz.
5. Zaman Aşımı ve Promise Rejection
Zaman aşımı ve promise rejection'ları yönetmek, asenkron kod yazarken karşılaşılan diğer yaygın hatalardır. Bir API çağrısında zaman aşımı oluştuğunda veya bir promise reddedildiğinde, bu durumların doğru şekilde yönetilmesi gerekir. Aksi takdirde, kullanıcı deneyimi olumsuz etkilenebilir.
Çözüm: Zaman aşımını kontrol etmek için `Promise.race()` metodunu kullanabilirsiniz. Ayrıca, promise rejection'ları düzgün bir şekilde ele almak için `catch` bloklarını kullanmayı unutmayın. İşte bir örnek:
const fetchWithTimeout = (url, timeout) => {
const timeoutPromise = new Promise((_, reject) =>
setTimeout(() => reject("Zaman aşımı!"), timeout)
);
const fetchPromise = fetch(url);
return Promise.race([fetchPromise, timeoutPromise]);
};
fetchWithTimeout("https://api.example.com/data", 5000)
.then(response => response.json())
.catch(error => console.error("Hata: ", error));Bu sayede, zaman aşımı oluştuğunda hemen hata mesajını alabilirsiniz.
Sonuç
Asenkron JavaScript kod yazarken karşılaştığınız bu 5 yaygın hatayı çözerek, daha verimli ve anlaşılır bir kod yazabilirsiniz. Promiseler, callback'ler ve async/await kullanarak kodunuzu temiz ve sürdürülebilir hale getirebilirsiniz. Hataları doğru şekilde yakalayarak, uygulamanızın stabil ve güvenilir olmasını sağlayabilirsiniz.
Unutmayın, asenkron kod yazmak bazen karmaşık olabilir, ancak doğru yaklaşımlarla bu süreci çok daha kolay ve keyifli hale getirebilirsiniz. Şimdi, bu ipuçlarını uygulayarak JavaScript dünyasında bir adım daha ileriye gidebilirsiniz!
