Modern JavaScript Async Kalıpları

JavaScript’in asenkron doğası zor olabilir. Async işlemleri etkili şekilde yönetmek için modern kalıpları keşfedelim.

Promise Tabanlı Kalıplar

Temel Promise Kullanımı

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
function fetchUser(id) {
  return fetch(`/api/users/${id}`)
    .then(response => response.json())
    .then(user => {
      console.log('Kullanıcı yüklendi:', user);
      return user;
    })
    .catch(error => {
      console.error('Kullanıcı yükleme hatası:', error);
      throw error;
    });
}

Async/Await Kalıbı

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    const user = await response.json();
    console.log('Kullanıcı yüklendi:', user);
    return user;
  } catch (error) {
    console.error('Kullanıcı yükleme hatası:', error);
    throw error;
  }
}

Gelişmiş Kalıplar

Paralel Çalıştırma

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
async function fetchMultipleUsers(ids) {
  try {
    const promises = ids.map(id => fetchUser(id));
    const users = await Promise.all(promises);
    return users;
  } catch (error) {
    console.error('Kullanıcıları yükleme hatası:', error);
    throw error;
  }
}

Promise.allSettled ile Hata Yönetimi

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
async function fetchUsersWithResults(ids) {
  const promises = ids.map(id => fetchUser(id));
  const results = await Promise.allSettled(promises);
  
  const successful = results
    .filter(result => result.status === 'fulfilled')
    .map(result => result.value);
  
  const failed = results
    .filter(result => result.status === 'rejected')
    .map(result => result.reason);
  
  return { successful, failed };
}

Şablon Entegrasyonu

Handlebars ile Kullanım

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{{! user-card.hbs }}
<div class="user-card" data-user-id="{{id}}">
  <h3>{{name}}</h3>
  <p>{{email}}</p>
  <button onclick="loadUserDetails({{id}})">Detayları Yükle</button>
</div>

<script>
async function loadUserDetails(userId) {
  try {
    const user = await fetchUser(userId);
    updateUserCard(user);
  } catch (error) {
    showError('Kullanıcı detayları yüklenemedi');
  }
}
</script>

Sonuç

Modern JavaScript async kalıpları kodu daha okunabilir ve sürdürülebilir hale getirir. Özel kullanım durumunuza ve hata yönetimi gereksinimlerinize göre doğru kalıbı seçin.