Promise'lar ve Promise Zincirleri
JavaScript’te Promise'lar (Promises), asenkron (asynchronous) işlemlerin sonucunu temsil eden ve işlemin başarılı mı yoksa hatalı mı bittiğini takip edebileceğiniz nesnelerdir. Promise Zincirleri (Promise Chains) ise birden fazla asenkron işlemi sıralı olarak yürütmenizi sağlayan yapıdır. Bu yapı, bir web uygulamasındaki veri akışını kontrol etmek için hayati öneme sahiptir ve kodun daha okunabilir ve yönetilebilir olmasını sağlar. Promise kullanmak, callback fonksiyonlarının neden olduğu “callback hell” sorununu ortadan kaldırır ve işlemleri adım adım yönetmenize olanak tanır.
Örneğin, kişisel web sitesi, blog, e-ticaret veya haber sitesi gibi projelerde, veriyi sunucudan çekmek, kullanıcı yorumlarını göstermek veya ürün stok bilgilerini almak gibi işlemler asenkron olarak gerçekleştirilir. Promise Zincirleri, bu adımların belirli bir sırayla çalışmasını garanti eder. Bu süreci bir evi inşa etmeye veya bir odayı dekore etmeye benzetebiliriz: temeli sağlam atarsınız, duvarları örersiniz ve ardından odanın dekorasyonunu tamamlarsınız; her adım bir diğerine bağlıdır.
Bu eğitimde, Promise oluşturmayı, then, catch ve finally metodlarını kullanarak başarılı veya hatalı sonuçları yönetmeyi, ve karmaşık Promise Zincirleri kurmayı öğreneceksiniz. Ayrıca bu bilgileri kişisel web sitesi veya e-ticaret gibi gerçek senaryolarda nasıl uygulayabileceğinizi göreceksiniz. Eğitim sonunda asenkron işlemleri düzenli ve hatasız bir şekilde yönetebileceksiniz.
Temel Örnek
javascript// Basic Promise example
const veriGetir = () => {
return new Promise((resolve, reject) => {
const basarili = true; // simulate success/failure
if (basarili) {
resolve("Veri başarıyla alındı"); // success
} else {
reject("Veri alınamadı"); // failure
}
});
};
veriGetir()
.then(sonuc => console.log(sonuc)) // handle success
.catch(hata => console.error(hata)); // handle failureBu örnekte veriGetir fonksiyonu bir Promise döndürür. Promise yapıcısı (constructor) resolve ve reject adında iki parametre alır. resolve başarılı sonucu, reject ise hatayı temsil eder. basarili değişkeni işlemin sonucunu simüle eder.
veriGetir() çağrıldığında bir Promise döner. then başarılı sonucu, catch ise hatayı yönetir. Böylece callback iç içe geçmesi (callback hell) önlenir. Örneğin bir blog sitesinde önce yazılar çekilir, sonra yorumlar alınır; her adım Promise Zinciri içinde sıralanır ve okunabilir, yönetilebilir bir akış sağlanır.
Pratik Örnek
javascript// Practical example with Promise chaining in e-commerce context
const urunleriGetir = () => {
return new Promise(resolve => {
setTimeout(() => resolve(\["Ürün 1", "Ürün 2", "Ürün 3"]), 1000);
});
};
const stokBilgisiAl = (urun) => {
return new Promise(resolve => {
setTimeout(() => resolve(`${urun} stokta mevcut`), 500);
});
};
urunleriGetir()
.then(urunler => {
console.log("Ürünler:", urunler);
return stokBilgisiAl(urunler\[0]); // first product stock info
})
.then(stok => console.log(stok))
.catch(hata => console.error("Hata:", hata))
.finally(() => console.log("İşlem tamamlandı"));Bu pratik örnekte urunleriGetir fonksiyonu 1 saniye sonra ürün listesi döndürür. stokBilgisiAl fonksiyonu, seçilen ürün için 0.5 saniye sonra stok bilgisini döndürür.
Promise Zinciri urunleriGetir() ile başlar. İlk then, ürünleri yazdırır ve ilk ürünün stok bilgisini almak için stokBilgisiAl çağrılır. İkinci then, stok bilgisini yazdırır. catch hataları yakalar ve finally her durumda çalışır. Bu zincir, bir odanın dekorasyonunu adım adım yapmak gibi işlemleri düzenli ve öngörülebilir şekilde yürütür.
En iyi uygulamalar ve yaygın hatalar:
En iyi uygulamalar:
- Async/await kullanarak kodun okunabilirliğini artırın.
- Hataları her zaman catch veya try/catch ile yönetin.
- Her asenkron işlemi küçük ve anlaşılır fonksiyonlara ayırın.
-
Paralel işlemler için Promise.all kullanın, performansı artırın.
Yaygın hatalar: -
Hataları yok saymak, sessiz başarısızlıklara yol açar.
- then içinde Promise dönmemek zinciri kırar.
- Çok fazla iç içe then kullanmak kodu karmaşıklaştırır.
- finally kullanmamak kaynak temizliği fırsatını kaybettirir.
Hata ayıklama ipuçları:
- console.log ve debugger kullanarak Promise durumlarını takip edin.
- Her then’in değer veya Promise döndürdüğünden emin olun.
- Ağ isteklerini ve setTimeout/intervalleri kontrol ederek bellek sızıntılarını önleyin.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| Promise | Asenkron işlemi temsil eden nesne | const p = new Promise((res, rej) => res("Başarılı")) |
| then | Başarılı sonucu yönetir | p.then(sonuc => console.log(sonuc)) |
| catch | Hataları yönetir | p.catch(hata => console.error(hata)) |
| finally | Her durumda çalışır | p.finally(() => console.log("Tamamlandı")) |
| Promise.all | Paralel Promiseleri yönetir | Promise.all(\[p1, p2]).then(sonuclar => console.log(sonuclar)) |
| Promise.race | İlk tamamlanan Promise’i döndürür | Promise.race(\[p1, p2]).then(sonuc => console.log(sonuc)) |
Özet ve sonraki adımlar:
Bu eğitimde Promise'lar ve Promise Zincirlerinin temel özelliklerini, then, catch ve finally metodlarını ve asenkron işlemleri sıralı şekilde yürütmeyi öğrendiniz. Artık kişisel web sitesi, blog, e-ticaret veya haber sitesi projelerinde asenkron işlemleri düzenli ve hatasız yönetebilirsiniz.
Promises, DOM manipülasyonu ve backend iletişimiyle entegre edilerek dinamik veri görüntülemeyi ve API çağrılarını güvenli şekilde yönetmeyi sağlar.
Bir sonraki adım olarak async/await, Promise.all, Promise.race ve gerçek API entegrasyonları konularını inceleyebilirsiniz. Bu konular, JavaScript’te asenkron programlamadaki yetkinliğinizi güçlendirecektir.
🧠 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