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.