JavaScript Async Await Kullanımı

Modern JavaScript geliştirmede API istekleri, veri çekme işlemleri ve zaman alan görevler için asenkron programlama büyük önem taşır.

ES7 ile gelen async ve await, Promise yapısını daha sade bir sözdizimiyle kullanmanızı sağlar.

1. Asenkron Programlama Nedir?

Asenkron programlama, bir işlemin tamamlanmasını beklemeden diğer kodların çalışmaya devam etmesini sağlar.

Özellikle API çağrıları, dosya okuma ve zamanlayıcı işlemlerinde kullanılır.

2. Async Fonksiyonlar

async anahtar kelimesi, bir fonksiyonun asenkron çalışacağını belirtir.

Async fonksiyonlar her zaman bir Promise döndürür.

async function fetchData() {
  return "Veri geldi";
}

Yukarıdaki fonksiyon aslında Promise.resolve("Veri geldi") gibi çalışır.

3. Await Operatörü

await, Promise’in tamamlanmasını bekler ve sonucu döndürür.

Sadece async fonksiyonlar içinde kullanılabilir.

async function getData() {
  const response = await fetch('API_URL');
  const data = await response.json();
  console.log(data);
}

4. React İçinde Async Await Kullanımı

React projelerinde async await genellikle veri çekme işlemlerinde kullanılır.

useEffect(() => {
  const fetchUsers = async () => {
    const res = await fetch('/api/users');
    const data = await res.json();
  };
  fetchUsers();
}, []);

Özellikle useEffect ile birlikte çok sık kullanılır.

5. Promise ile Async Await Arasındaki Fark

• Promise: .then() zinciri kullanır
• async/await: daha okunabilir yapı sunar
• Hata yönetimi: try/catch ile daha kolaydır

try {
  const data = await fetchData();
} catch(error) {
  console.error(error);
}

Sık Sorulan Sorular

Sonuç

JavaScript async ve await kullanımı, modern web geliştirmede asenkron işlemleri yönetmenin en temiz yollarından biridir.

Özellikle API çağrıları, React veri çekme işlemleri ve Promise yönetiminde büyük kolaylık sağlar.