Web Geliştirmede JavaScript Promises ile Asenkron Sihirbazlığı 🪄

asteron · Bugün 01:37

Web Geliştirmede JavaScript Promises ile Asenkron Sihirbazlığı

Selam dostlar! Uzun zamandır forumda takılıyorum ve sıkça karşılaştığım bir konuya değinmek istedim: asenkron JavaScript. Özellikle API'lerle uğraşırken, dosya okurken veya basit bir zamanlayıcı kullanırken hepimiz "callback cehennemi" denen o korkunç yapıya düşmüşüzdür. İşte tam burada, bizi kurtaran kahraman: Promises (Sözler/Vaadler). Bugün, bu konuyu en temelden, pratik örneklerle ve günlük hayattan benzetmelerle anlatmaya çalışacağım. Hadi başlayalım!

Promise Nedir? Basit Bir Benzetme

Bir Promise, henüz tamamlanmamış ama gelecekte tamamlanacak (ya da başarısız olacak) bir asenkron işlemin temsilcisidir. Şöyle düşünün:

Arkadaşınıza "Akşam bize pizza sözü veriyor musun?" diye sordunuz. Arkadaşınız size bir söz (promise) verir. Bu sözün üç hali vardır:

Beklemede (Pending): Pizza henüz yolda veya fırında. Sonuç belli değil.
Yerine Getirildi (Fulfilled): Pizza kapınızda! Söz başarıyla tutuldu.
Reddedildi (Rejected): Araba bozuldu, fırın kapandı. Söz tutulamadı.

JavaScript'teki Promise de aynen böyle çalışır. Bir "söz nesnesi" oluşturursunuz ve bu nesne, ileride bir değer (pizza) veya bir hata (araba bozulması) ile sonuçlanır.

Temel Promise Yapısı ve Kullanımı

Bir Promise nasıl oluşturulur? İçinde ne var? Hemen basit bir örnekle görelim:

Kod:

const pizzaSözü = new Promise((resolve, reject) => {
    // Bu fonksiyon, Promise'in "executor"ıdır. İş burada yapılır.
    const pizzaGelmeOlasiligi = Math.random() > 0.3; // %70 başarı şansı

    setTimeout(() => {
        if (pizzaGelmeOlasiligi) {
            resolve("Margarita Pizza Geldi! 🍕"); // Söz tutuldu!
        } else {
            reject("Kurye kayboldu... 🚶‍♂️"); // Söz tutulamadı.
        }
    }, 2000); // 2 saniye sürsün
});

Burada:

new Promise(): Yeni bir söz nesnesi oluşturduk.
(resolve, reject) => { ... }: İşi yapacak olan fonksiyon. İş bittiğinde, başarılıysa resolve() fonksiyonunu, başarısızsa reject() fonksiyonunu çağırırız.
resolve(): Promise'i "başarılı" duruma getirir ve içine bir değer (burada string) gönderir.
reject(): Promise'i "başarısız" duruma getirir ve genellikle bir hata bilgisi gönderir.

Peki bu sözü nasıl dinleriz? İşte sihir burada başlıyor: .then() ve .catch() metodlarıyla.

Kod:

pizzaSözü
    .then((sonuçMesajı) => {
        console.log("Harika! " + sonuçMesajı); // Başarılı durumda çalışır.
    })
    .catch((hataMesajı) => {
        console.error("Üzgünüm... " + hataMesajı); // Başarısız durumda çalışır.
    })
    .finally(() => {
        console.log("Pizza operasyonu sona erdi."); // Her durumda (başarı/başarısızlık) çalışır.
    });

[COLOR=rgb(rgb(97, 189, 109))]Gerçek Dünya Örneği: Fetch API ile Çalışmak [/COLOR]

Promises'in en yaygın kullanım alanı, ağ istekleridir. fetch() API'si bize direkt bir Promise döndürür. Hemen bir örnek yapalım:

Kod:

function kullaniciGetir(userId) {
    fetch(`https://jsonplaceholder.typicode.com/users/${userId}`)
        .then((yanıt) => {
            if (!yanıt.ok) {
                throw new Error(`Kullanıcı bulunamadı! (HTTP ${yanıt.status})`);
            }
            return yanıt.json(); // Bu da bir Promise döndürür!
        })
        .then((kullaniciVerisi) => {
            console.log(`Kullanıcı Adı: ${kullaniciVerisi.name}`);
            console.log(`Email: ${kullaniciVerisi.email}`);
        })
        .catch((hata) => {
            console.error("İstek sırasında hata oluştu:", hata);
        });
}

kullaniciGetir(1); // İlk kullanıcıyı getir.

Burada dikkat! .then() içinden return edilen değer (yanıt.json()), bir sonraki .then() zincirine aktarılır. Bu, Promise Zincirleme (Chaining) olayının ta kendisidir ve callback karmaşasını çözen en güzel özelliktir.

Modern Sihir: async/await ile Daha Okunabilir Kod

Promise zincirleri güzel ama bazen kod derinlemesine gidebilir. ES2017 ile gelen async/await syntax'ı, Promise'leri sanki senkronmuş gibi yazmamızı sağlar. Bu, okunabilirliği inanılmaz artırır.

Aynı fetch örneğini async/await ile yazalım:

Kod:

async function kullaniciGetirAsync(userId) {
    try {
        const yanıt = await fetch(`https://jsonplaceholder.typicode.com/users/${userId}`);
        
        if (!yanıt.ok) {
            throw new Error(`Kullanıcı bulunamadı! (HTTP ${yanıt.status})`);
        }
        
        const kullaniciVerisi = await yanıt.json();
        
        console.log(`Kullanıcı Adı: ${kullaniciVerisi.name}`);
        console.log(`Email: ${kullaniciVerisi.email}`);
        
    } catch (hata) {
        console.error("İstek sırasında hata oluştu:", hata);
    } finally {
        console.log("Kullanıcı getirme işlemi bitti.");
    }
}

kullaniciGetirAsync(1);

Nasıl? Çok daha temiz değil mi? Kurallar basit:

async: Bir fonksiyonun içinde await kullanacaksanız, o fonksiyonu async keyword'ü ile işaretlemelisiniz. Bu fonksiyon otomatik olarak bir Promise döndürür.
await: Bir Promise'in önüne yazılır. JavaScript'i, o Promise sonuçlanana (fulfilled veya rejected) kadar bekletir. Sonucu döndürür.
try...catch...finally: Hata yönetimi için mükemmel bir yoldur. await ile kullanılan bir Promise reject olursa, hata catch bloğuna düşer.

Promise.all() ile Birden Fazla İşi Aynı Anda Yönetme

Diyelim ki bir sayfada 3 farklı API'den veri çekmeniz gerekiyor ve hepsinin gelmesini beklemelisiniz. Tek tek await yapmak yerine Promise.all() kullanabilirsiniz.

Kod:

async function tumVerileriGetir() {
    try {
        // Üç farklı API isteğini aynı anda başlat.
        const [postlar, yorumlar, kullanicilar] = await Promise.all([
            fetch('https://jsonplaceholder.typicode.com/posts').then(r => r.json()),
            fetch('https://jsonplaceholder.typicode.com/comments').then(r => r.json()),
            fetch('https://jsonplaceholder.typicode.com/users').then(r => r.json())
        ]);

        console.log(`${postlar.length} post, ${yorumlar.length} yorum, ${kullanicilar.length} kullanıcı yüklendi.`);
        // Burada verileri birleştirip işleyebilirsin.

    } catch (hata) {
        console.error("Verilerden biri yüklenemedi:", hata);
        // Promise.all'da BİR TANE bile hata olsa, catch'e düşer.
    }
}

Promise.all(), içine verilen tüm Promise'ler başarıyla tamamlanırsa sonuçları bir dizi olarak döndürür. Biri bile başarısız olsa, tüm işlem reject olur. Eğer hataları ayrı ayrı yönetmek isterseniz, Promise.allSettled() metoduna da göz atmanızı öneririm.

**Son Sözler**

Promises ve async/await, modern JavaScript geliştirmenin olmazsa olmazı. İlk başta kafa karıştırıcı gelse de, üzerine biraz pratik yapınca ne kadar güçlü ve temiz bir yapı olduğunu göreceksiniz. Unutmayın, her async/await arkasında bir Promise yatar.

Umarım bu rehber, asenkron dünyada yolunuzu biraz daha aydınlatmıştır. Takıldığınız yer olursa yorumlarda sorabilirsiniz, forumda görüşürüz!

Not: Örnekler basit ve anlaşılır olması için düzenlenmiştir. Gerçek uygulamalarda hata yönetimini daha detaylı yapmayı unutmayın.

Ara

Ara

Web Geliştirmede JavaScript Promises ile Asenkron Sihirbazlığı 🪄

asteron

Tema özelleştirme sistemi

Tam ekran yada dar ekran