Async/Await
Async/Await, JavaScript’te asenkron programlamayı yönetmenin modern ve güçlü bir yoludur. Promiselerle çalışmayı basitleştirir ve kodun okunabilirliğini artırır. Async/Await, bir ev inşa etmeye benzer: Promiseler, paralel olarak çalışan işçiler gibidir, async/await ise her adımın doğru sırayla ve düzenli bir şekilde tamamlanmasını sağlayan bir şef veya yöneticidir. Bu yaklaşım, API’lerden veri çekmek, veritabanı işlemleri yapmak veya dinamik içerikleri güncellemek gibi görevleri daha öngörülebilir ve hatasız bir şekilde yapmamızı sağlar.
Kişisel web siteleri, bloglar, e-ticaret siteleri veya haber portalları gibi uygulamalarda Async/Await, kullanıcı arayüzünü bloklamadan içerik yüklemeye olanak tanır. Örneğin, bir kişisel web sitesinde portfolyo projeleri asenkron olarak çekilebilir, bir blogda gönderiler yüklenebilir, bir e-ticaret sitesinde ürünler ve yorumlar güncellenebilir, bir haber sitesinde makaleler görüntülenebilir.
Bu ders kapsamında, async anahtar kelimesi ile fonksiyonları nasıl tanımlayacağınızı, await ile promiseleri beklemeyi, hataları doğru şekilde ele almayı ve asenkron işlemleri optimize etmeyi öğreneceksiniz. Tüm adımlar, bir mektup yazmak veya bir odayı dekore etmek gibi adım adım mantıkla açıklanacaktır; böylece her işlem, kodunuzda düzenli ve anlaşılır bir şekilde gerçekleşir.
Temel Örnek
javascriptasync function kullaniciBilgisiGetir(userId) {
// Fetch user data from API
const cevap = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
const veri = await cevap.json(); // Parse JSON asynchronously
console.log(veri.name); // Output user name
}
kullaniciBilgisiGetir(1);Bu temel örnekte, kullaniciBilgisiGetir fonksiyonu async ile tanımlanmıştır; bu, fonksiyonun bir promise döndürmesini sağlar ve içinde await kullanılmasına izin verir. fetch, API’ye HTTP isteği gönderir ve bir promise döner. await fetch ifadesi, fonksiyonun yürütülmesini promise çözülene kadar duraklatır; ancak JavaScript ana iş parçacığını bloklamaz.
await cevap.json() ise yanıtı JSON formatına dönüştürür ve bu işlem de asenkron olarak gerçekleştirilir. console.log(veri.name), kullanıcı adını konsola yazdırır. Bu yapı, bir odayı dekore etmeye benzer: önce malzemeler (fetch) alınır, sonra hazırlanır (json), ve son olarak sergilenir (console.log). Bu yaklaşım, kodunuzu daha okunabilir ve hatasız hale getirir, özellikle birden fazla asenkron işlemin birbirine bağlı olduğu durumlarda.
Pratik Örnek
javascriptasync function blogGonderileriniYukle() {
try {
// Fetch all posts from API
const cevap = await fetch('[https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts)');
const gonderiler = await cevap.json();
// Render post titles on the webpage
gonderiler.forEach(post => {
const div = document.createElement('div');
div.textContent = post.title;
document.body.appendChild(div);
});
} catch (error) {
console.error('Gönderiler yüklenirken hata oluştu:', error);
}
}
blogGonderileriniYukle();Bu pratik örnek, bir blog sitesinde gönderileri asenkron olarak çekip sayfada göstermek için kullanılır. blogGonderileriniYukle fonksiyonu async olarak tanımlanmıştır ve await ile fetch ve JSON dönüşümü beklenir. try/catch bloğu, ağ hataları veya veri işleme hatalarını yakalayarak uygulamanın çökmesini önler.
forEach ile her gönderi DOM’a eklenir ve sayfa güncellenir. Bu, bir evi dekore etmeye benzer: fetch malzemeleri getirir, JSON bunları hazırlar ve forEach ile son düzenleme yapılır. Bu yöntem, veri yarışmalarını önler ve kodun bakımı ile hata ayıklamasını kolaylaştırır, özellikle büyük uygulamalarda birden fazla asenkron işlem söz konusu olduğunda.
Async/Await ile çalışırken dikkat edilmesi gereken en iyi uygulamalar: 1) tüm asenkron işlemleri try/catch ile sarmak, 2) bağımsız işlemleri await ile ardışık kullanmak yerine Promise.all ile paralel çalıştırmak, 3) async fonksiyonlarda her zaman açık bir dönüş değeri sağlamak ve 4) fonksiyonları kısa ve modüler tutmak.
Yaygın hatalar: hataları yakalamamak ve promise rejection’ları görmezden gelmek, bağımsız işlemleri ardışık yürütmek, async yazmayı unutmak ve uzun ömürlü promise veya DOM elemanları nedeniyle bellek sızıntıları oluşturmak. Hata ayıklama için console.log, tarayıcı Network sekmesi ve promise çözülme kontrolü kullanılabilir. Pratik öneri: asenkron işlemleri mantıklı ve modüler yapıda tasarlayarak büyük projelerde temiz ve sürdürülebilir bir kod yazmaktır.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| async | Asenkron fonksiyon tanımlar | async function getData() {} |
| await | Promise çözülene kadar fonksiyonu duraklatır | const result = await fetch(url) |
| try/catch | Asenkron fonksiyonlarda hata yönetimi | try { await fetch() } catch(e) {} |
| Promise.all | Birden fazla promise’i paralel çalıştırır | await Promise.all(\[fetch1(), fetch2()]) |
| fetch | Tarayıcı API’si ile kaynak isteği yapar | const res = await fetch('/api/data') |
Sonuç olarak, Async/Await, JavaScript’te okunabilir, temiz ve etkili asenkron kod yazmayı sağlar. async ve await kullanmayı, try/catch ile hata yönetmeyi, paralel işlemleri optimize etmeyi ve DOM’u dinamik olarak güncellemeyi öğrendiniz. Bu bilgiler, HTML DOM manipülasyonu ve backend ile veri iletişimi için kritik öneme sahiptir.
Bir sonraki adımlar: karmaşık promise zincirleri ile Async/Await kombinasyonları, promise iptali ve timeout yönetimi, React veya Vue ile asenkron fonksiyon entegrasyonu ve Node.js ile sunucu taraflı API yönetimi. Mini projelerle pratik yaparak hataları azaltabilir ve asenkron kod konusundaki becerilerinizi güçlendirebilirsiniz.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek