Bir önceki makalede Callback Hell'in ne kadar korkunç olabileceğini gördük. İç içe geçmiş callback'ler, okunması imkansız kod ve dağınık hata yönetimi... İşte Promises (Söz Nesneleri) tam da bu sorunu çözmek için JavaScript'e eklendi. Bu makalede Promise'ların nasıl çalıştığını ve hayatımızı nasıl kolaylaştırdığını öğreneceğiz.
Promise Nedir?
Promise, gelecekte tamamlanacak (veya başarısız olacak) bir işlemi temsil eden nesnedir. Gerçek hayattan bir analoji:
Restoran Örneği:
- Sipariş veriyorsunuz → Promise oluştu
- Mutfak hazırlıyor → Promise "pending" (beklemede)
- Yemek geliyor → Promise "fulfilled" (gerçekleşti) ✅
- Malzeme yok, yapılamıyor → Promise "rejected" (reddedildi) ❌
Promise'ın Üç Durumu
┌─────────────────┐
│ PENDING │
│ (Beklemede) │
└────────┬────────┘
│
┌──────────────┴──────────────┐
▼ ▼
┌─────────────────┐ ┌─────────────────┐
│ FULFILLED │ │ REJECTED │
│ (Başarılı) ✅ │ │ (Başarısız) ❌ │
└─────────────────┘ └─────────────────┘| Durum | Açıklama |
|---|---|
| Pending | İşlem devam ediyor, sonuç belli değil |
| Fulfilled | İşlem başarıyla tamamlandı |
| Rejected | İşlem başarısız oldu |
Promise ile Çalışmak: .then() ve .catch()
// Bir Promise döndüren fonksiyon (API çağrısı simülasyonu)
function veriGetir(url) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (url) {
resolve({ mesaj: "Veriler başarıyla geldi!" });
} else {
reject("URL belirtilmedi!");
}
}, 1000);
});
}
// Promise'ı kullanma
veriGetir("/api/kullanicilar")
.then(function(veri) {
console.log("Başarılı:", veri.mesaj);
})
.catch(function(hata) {
console.log("Hata:", hata);
});.then() - Başarı Durumu
Promise başarıyla tamamlandığında (fulfilled) .then() içindeki callback çalışır:
siparisVer("Pizza")
.then(function(siparis) {
console.log("Siparişiniz hazır:", siparis);
});.catch() - Hata Durumu
Promise reddedildiğinde (rejected) .catch() içindeki callback çalışır:
siparisVer("Pizza")
.then(function(siparis) {
console.log("Siparişiniz hazır:", siparis);
})
.catch(function(hata) {
console.log("Sipariş başarısız:", hata);
});Promise Chaining: Zincirleme
Promise'ların gerçek gücü zincirleme yeteneğidir. Her .then() yeni bir Promise döndürür:
kullaniciBul(123)
.then(function(kullanici) {
console.log("Kullanıcı bulundu:", kullanici.isim);
return siparisleriniGetir(kullanici.id);
})
.then(function(siparisler) {
console.log("Siparişler:", siparisler.length, "adet");
return sonSiparisDetay(siparisler[0].id);
})
.then(function(detay) {
console.log("Son sipariş detayı:", detay);
})
.catch(function(hata) {
console.log("Bir şeyler yanlış gitti:", hata);
});Callback Hell ile karşılaştırın:
// ❌ Callback Hell
kullaniciBul(123, function(kullanici) {
siparisleriniGetir(kullanici.id, function(siparisler) {
sonSiparisDetay(siparisler[0].id, function(detay) {
console.log(detay);
}, function(hata) { console.log(hata); });
}, function(hata) { console.log(hata); });
}, function(hata) { console.log(hata); });
// ✅ Promise Chain
kullaniciBul(123)
.then(kullanici => siparisleriniGetir(kullanici.id))
.then(siparisler => sonSiparisDetay(siparisler[0].id))
.then(detay => console.log(detay))
.catch(hata => console.log(hata));Gerçek Hayat Örneği: Renk Animasyonu
Callback Hell makalesindeki örneği Promise ile yazalım:
function renkDegistir(renk, sure) {
return new Promise((resolve) => {
setTimeout(() => {
document.body.style.backgroundColor = renk;
resolve();
}, sure);
});
}
// Kullanımı - düz ve okunabilir!
renkDegistir('red', 1000)
.then(() => renkDegistir('orange', 1000))
.then(() => renkDegistir('yellow', 1000))
.then(() => renkDegistir('green', 1000))
.then(() => renkDegistir('blue', 1000))
.then(() => console.log("Animasyon tamamlandı!"));Tek .catch() Hepsini Yakalar
Promise zincirinde herhangi bir noktada hata olursa, zincir durur ve .catch() çalışır:
adim1()
.then(() => adim2())
.then(() => adim3()) // Burada hata olursa
.then(() => adim4()) // Bu çalışmaz
.then(() => adim5()) // Bu da çalışmaz
.catch(hata => {
// Ama bu çalışır!
console.log("Hata yakalandı:", hata);
});Gerçek Hayat Örneği: API'den Veri Çekme
function haberleriGetir() {
return new Promise((resolve, reject) => {
setTimeout(() => {
const basarili = Math.random() > 0.3; // %70 başarı şansı
if (basarili) {
resolve([
{ baslik: "JavaScript 2024 Güncellemesi" },
{ baslik: "Web Geliştirme Trendleri" },
{ baslik: "React vs Vue Karşılaştırması" }
]);
} else {
reject("Sunucu yanıt vermiyor!");
}
}, 1500);
});
}
// Kullanım
console.log("Haberler yükleniyor...");
haberleriGetir()
.then(haberler => {
console.log("Haberler yüklendi!");
haberler.forEach((haber, index) => {
console.log(`${index + 1}. ${haber.baslik}`);
});
})
.catch(hata => {
console.log("Haberler yüklenemedi:", hata);
});Promise'dan Değer Döndürme
.then() içinden değer döndürdüğünüzde, o değer bir sonraki .then()'e aktarılır:
function sayiAl() {
return new Promise(resolve => {
setTimeout(() => resolve(5), 1000);
});
}
sayiAl()
.then(sayi => {
console.log("İlk değer:", sayi); // 5
return sayi * 2;
})
.then(sayi => {
console.log("İkinci değer:", sayi); // 10
return sayi + 3;
})
.then(sayi => {
console.log("Son değer:", sayi); // 13
});Gerçek Hayat Örneği: Kullanıcı Profil Sayfası
function kullaniciBilgisiGetir(id) {
return new Promise(resolve => {
setTimeout(() => {
resolve({ id: id, isim: "Ahmet", email: "ahmet@email.com" });
}, 500);
});
}
function takipciSayisi(kullaniciId) {
return new Promise(resolve => {
setTimeout(() => {
resolve(1250);
}, 300);
});
}
function sonGonderiler(kullaniciId) {
return new Promise(resolve => {
setTimeout(() => {
resolve([
"Bugün hava çok güzel!",
"Yeni proje üzerinde çalışıyorum",
"JavaScript öğreniyorum 🚀"
]);
}, 400);
});
}
// Profil sayfasını oluştur
let kullanici;
kullaniciBilgisiGetir(123)
.then(k => {
kullanici = k;
console.log("Kullanıcı:", kullanici.isim);
return takipciSayisi(k.id);
})
.then(takipci => {
console.log("Takipçi sayısı:", takipci);
return sonGonderiler(kullanici.id);
})
.then(gonderiler => {
console.log("Son gönderiler:");
gonderiler.forEach(g => console.log(" - " + g));
})
.catch(hata => {
console.log("Profil yüklenemedi:", hata);
});.finally() - Her Durumda Çalışır
Başarılı veya başarısız, her durumda çalışacak kod için .finally() kullanılır:
yuklemeyiBaslat();
veriGetir("/api/veriler")
.then(veri => {
tabloGuncelle(veri);
})
.catch(hata => {
hataGoster(hata);
})
.finally(() => {
yuklemeyiBitir(); // Her durumda çalışır
});Özet
Bu makalede öğrendiklerimiz:
✅ Promise, gelecekte tamamlanacak bir işlemi temsil eder
✅ Üç durumu var: pending, fulfilled, rejected
✅ .then() başarı, .catch() hata durumunda çalışır
✅ Promise chaining ile düz, okunabilir kod yazılır
✅ Tek .catch() tüm zincirdeki hataları yakalar
✅ .finally() her durumda çalışır
Bir sonraki makalede kendi Promise'larımızı nasıl oluşturacağımızı öğreneceğiz.
