Modern JavaScript Async Kalıpları
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. ...