JavaScript Asenkron Programlamada Yapılacak 7 Hata ve Kolay Çözümleri

JavaScript ile asenkron programlama yaparken bazen işler istediğimiz gibi gitmeyebilir. `Promise` ve `async/await` gibi yapılar sayesinde işlemlerimizi sırayla bekletmek yerine, paralel şekilde yönetebiliriz. Ancak, bu yapıları kullanırken sıkça karşılaşılan bazı hatalar, zaman zaman karmaşık ve başa çıkılması zor hale gelebilir. Bugün, asenkron programlamada en yaygın 7 hatayı ve bu hatalarla nasıl başa çıkabileceğimizi keşfedeceğiz.

İlk hatamız, asenkron fonksiyonlarda `return` anahtar kelimesini unutmak. Özellikle `async` fonksiyonlarda, eğer bir `Promise` döndürmek istiyorsanız, bunu açıkça belirtmeniz gerekir. Aksi halde, fonksiyon beklenmedik sonuçlar verebilir.

Örnek:

async function fetchData() {
    let data = await fetch('https://api.example.com');
    console.log(data);
    // Burada return unuturuz
}

Çözüm:
Asenkron fonksiyondan değer döndürebilmek için `return` anahtar kelimesini kullanmayı unutmayın.

async function fetchData() {
    let data = await fetch('https://api.example.com');
    return data;  // return eklenmeli
}

`async/await` yapısının en büyük avantajı, kodu daha okunabilir hale getirmesidir. Ancak, bazı geliştiriciler `await` anahtar kelimesini unutabiliyor. Bu durumda, `Promise` hemen çözülmeden fonksiyon devam eder ve beklenmedik sonuçlar doğurabilir.

Örnek:

async function fetchData() {
    let data = fetch('https://api.example.com'); // await unuturuz
    console.log(data); // Burada data bir Promise olur
}

Çözüm:
Her zaman asenkron işlemleri beklemek için `await` kullanmalısınız.

async function fetchData() {
    let data = await fetch('https://api.example.com'); // await eklenmeli
    console.log(data);
}

`Promise` kullanırken, hata kontrolünü düzgün yapmamak sık karşılaşılan bir hatadır. `catch` bloklarını unutmak, uygulamanın beklenmedik şekilde çökmesine sebep olabilir.

Örnek:

function fetchData() {
    return fetch('https://api.example.com')
        .then(response => response.json())
        .then(data => console.log(data));
    // catch unutulur
}

Çözüm:
Her zaman `catch` bloğunu ekleyerek hata kontrolü yapın.

function fetchData() {
    return fetch('https://api.example.com')
        .then(response => response.json())
        .then(data => console.log(data))
        .catch(error => console.error('Bir hata oluştu:', error));  // catch eklenmeli
}

Bir `async` fonksiyonunun döndürdüğü değeri, doğrudan almayı beklemek yaygın bir hatadır. `async` fonksiyonu her zaman bir `Promise` döndürür. Bu yüzden değeri almak için, `await` kullanarak sonucu beklemeniz gerekir.

Örnek:

async function fetchData() {
    return 'Veri geldi!';
}

console.log(fetchData()); // Burada Promise dönecektir

Çözüm:
`await` ile sonucu bekleyin.

async function fetchData() {
    return 'Veri geldi!';
}

async function main() {
    console.log(await fetchData());  // await ile değeri alın
}

Asenkron işlemleri sırasıyla çalıştırırken, sıralamanın yanlış olması hatalara yol açabilir. Özellikle bir işlemin sonucunu beklemeden diğerine geçmek, verinin yanlış sıralanmasına neden olabilir.

Örnek:

async function taskOne() {
    console.log('Birinci görev tamamlandı');
}

async function taskTwo() {
    console.log('İkinci görev tamamlandı');
}

taskOne();
taskTwo(); // Burada sıralama önemli

Çözüm:
Sıralı işlemler için `await` kullanarak doğru sırayla işlemleri gerçekleştirin.

async function taskOne() {
    console.log('Birinci görev tamamlandı');
}

async function taskTwo() {
    console.log('İkinci görev tamamlandı');
}

async function main() {
    await taskOne();
    await taskTwo();  // Sıralı olarak işlem yapılmalı
}

main();

`Promise.all` kullanırken, bir `Promise` hata verirse, diğer işlemler de duracaktır. Bu durum, çoklu asenkron işlemler gerçekleştirenler için problem yaratabilir.

Örnek:

async function fetchData() {
    const data1 = fetch('https://api.example.com');
    const data2 = fetch('https://api.another.com');
    const results = await Promise.all([data1, data2]);  // Eğer biri hata verirse hepsi başarısız olur
    console.log(results);
}

Çözüm:
Her bir `Promise` için hata yakalama bloğu ekleyin.

async function fetchData() {
    const data1 = fetch('https://api.example.com').catch(error => console.error('Birinci URL hatası:', error));
    const data2 = fetch('https://api.another.com').catch(error => console.error('İkinci URL hatası:', error));
    const results = await Promise.all([data1, data2]);
    console.log(results);
}

Asenkron programlamada sık karşılaşılan bir diğer sorun ise zaman aşımı (timeout) hatalarıdır. API çağrıları yaparken, ağ bağlantısının yavaş olduğu durumlarda zaman aşımı hatası alabilirsiniz.

Örnek:

async function fetchData() {
    const response = await fetch('https://api.example.com');
    const data = await response.json();
    console.log(data);
}

Çözüm:
Zaman aşımını yönetmek için, `AbortController` kullanarak bu sorunun önüne geçebilirsiniz.

async function fetchData() {
    const controller = new AbortController();
    const signal = controller.signal;
    
    setTimeout(() => controller.abort(), 5000);  // 5 saniye sonra zaman aşımı

    try {
        const response = await fetch('https://api.example.com', { signal });
        const data = await response.json();
        console.log(data);
    } catch (error) {
        if (error.name === 'AbortError') {
            console.error('Zaman aşımı!');
        } else {
            console.error('Bir hata oluştu:', error);
        }
    }
}