JavaScript Promises: Bekleyen Tekliflerden Bollywood Coşkusuna – Asenkron Büyüye Bir Desi Rehberi

JavaScript Promises: Bekleyen Tekliflerden Bollywood Coşkusuna – Asenkron Büyüye Bir Desi Rehberi

JavaScript’in tek iş parçacıklı (single-threaded) yapısı, web tarayıcılarında akıcı kullanıcı deneyimleri sunmak için tasarlanmıştır. Ancak bu yapı, ağ istekleri, dosya okuma/yazma veya zamanlayıcılar gibi uzun süren veya belirsiz zaman alan asenkron işlemleri yönetirken bazı zorlukları beraberinde getirir. İşte tam da bu noktada, JavaScript Promises (Sözler) devreye girerek, asenkron kod yazımını çok daha düzenli, okunabilir ve yönetilebilir hale getiren modern bir çözüm sunar. Bu “Desi Rehberi” ile, Promise’lerin karmaşık dünyasını Bollywood filmlerinin coşkusu ve netliğiyle keşfedecek, asenkron büyünün nasıl işlediğini adım adım anlayacaksınız.

Asenkron JavaScript’in Zorlukları ve Callback Cehennemi

JavaScript, çoğu zaman tek bir ana iş parçacığında çalışır. Bu, aynı anda birden fazla ağır işlemin doğrudan yapılamayacağı anlamına gelir. Peki, bir sunucudan veri çekerken uygulamanın donmasını nasıl engelleriz? İşte burada asenkron programlama devreye girer.

JavaScript’in Tek İş Parçacığı Yapısı

JavaScript motoru, genellikle bir anda sadece bir görevi işler. Bu, kullanıcı arayüzünün donmaması ve uygulamanın duyarlı kalması için önemlidir. Ancak bu durum, veritabanı sorguları, ağ istekleri veya büyük dosya işlemleri gibi zaman alıcı görevlerin ana iş parçacığını bloke etme potansiyeli taşır. Asenkron programlama, bu tür görevleri ana iş parçacığından ayırarak, tamamlandıklarında bize bildirimde bulunmalarını sağlar.

Geleneksel Yaklaşım: Callback Fonksiyonları

Promise’lerden önce, asenkron işlemleri yönetmenin birincil yolu callback (geri çağırma) fonksiyonlarıydı. Bir işlem bittiğinde çalıştırılacak bir fonksiyonu, o işlemi başlatan fonksiyona argüman olarak geçerdik. Örneğin, setTimeout(() => console.log('Merhaba'), 1000) gibi.

function veriCek(url, callback) {
    // Ağ isteği simülasyonu
    setTimeout(() => {
        const veri = Sunucudan gelen veri: ${url};
        callback(veri);
    }, 1500);
}

veriCek('api.example.com/kullanicilar', function(gelenVeri) {
    console.log(gelenVeri); // Sunucudan gelen veri: api.example.com/kullanicilar
});

Callback Hell: Bir Kabus Senaryosu

Birden fazla asenkron işlemin birbirine bağımlı olduğu durumlarda, callback'ler iç içe geçmeye başlar ve kod okunamaz, yönetilemez bir hal alır. Bu duruma "Callback Hell" veya "Pyramid of Doom" denir. Tıpkı Bollywood filmlerindeki karmaşık entrikalar gibi, kodunuzun akışını takip etmek imkansız hale gelir.

veriCek('kullanici', function(kullanici) {
    veriCek(kullanici/${kullanici.id}/siparisler, function(siparisler) {
        veriCek(siparis/${siparisler[0].id}/detay, function(detay) {
            console.log('Tüm detaylar:', kullanici, siparisler, detay);
        });
    });
});

Neden Daha İyi Bir Çözüme İhtiyaç Duyduk?

Callback Hell, sadece okunabilirlik sorunları yaratmakla kalmaz, aynı zamanda hata yönetimini de zorlaştırır. Her seviyede ayrı ayrı hata kontrolü yapmak, kod tekrarına yol açar ve bakımı zorlaştırır. İşte bu yüzden, asenkron işlemleri daha zarif ve yapılandırılmış bir şekilde ele alacak yeni bir mekanizmaya, yani Promise'lere ihtiyacımız vardı.

Promise Nedir? Temel Kavramlar ve Yaşam Döngüsü

Promise, asenkron bir işlemin nihai sonucunu (başarı veya başarısızlık) temsil eden bir JavaScript nesnesidir. Bir nevi, gelecekte bir değeri garanti eden bir "sözleşme" gibidir.

Promise'in Tanımı ve Amacı

Bir Promise, "sana bu işlemi yapacağıma söz veriyorum ve bittiğinde sana haber vereceğim" der. Bu haber, işlemin başarıyla tamamlandığını (çözüldüğünü - resolved) veya bir hatayla sonuçlandığını (reddedildiğini - rejected) bildirir. Promise'ler, callback'lerin neden olduğu iç içe geçme sorununu çözerek daha düz bir kod yapısı sağlar.

Promise'in Üç Hali: Pending, Fulfilled, Rejected

Bir Promise, yaşam döngüsü boyunca üç farklı durumda bulunabilir:

• Pending (Beklemede): Asenkron işlem henüz tamamlanmadı. Promise'in başlangıç halidir.
• Fulfilled (Yerine Getirildi/Başarılı): Asenkron işlem başarıyla tamamlandı ve bir değer döndürdü.
• Rejected (Reddedildi/Başarısız): Asenkron işlem bir hata ile sonuçlandı.

Bir Promise, pending durumundan fulfilled veya rejected durumuna geçtikten sonra, durumu bir daha değişmez. Bu, Promise'lerin kararlı (settled) olduğu anlamına gelir.

Bir Promise Nasıl Oluşturulur? (new Promise)

Yeni bir Promise, new Promise() yapıcı fonksiyonu ile oluşturulur. Bu fonksiyon, iki argüman alan bir yürütücü (executor) fonksiyonu alır: resolve ve reject. resolve, işlemin başarılı olduğunu belirtmek ve sonucu döndürmek için, reject ise bir hata oluştuğunu belirtmek için kullanılır.

const myPromise = new Promise((resolve, reject) => {
    const basariliMi = Math.random() > 0.5; // Rastgele başarı/başarısızlık

    setTimeout(() => {
        if (basariliMi) {
            resolve("İşlem başarıyla tamamlandı!");
        } else {
            reject("Oops! Bir hata oluştu.");
        }
    }, 2000);
});

.then(), .catch() ve .finally() Metotları

Bir Promise'in sonucunu dinlemek için .then(), .catch() ve .finally() metotları kullanılır:

• .then(onFulfilled, onRejected): Promise başarılı olduğunda onFulfilled fonksiyonu, başarısız olduğunda ise onRejected fonksiyonu çalışır. Genellikle .catch() ile hata yönetimi ayrı yapılır.
• .catch(onRejected): Sadece Promise reddedildiğinde çalışır. Zincirdeki herhangi bir hatayı yakalamak için idealdir.
• .finally(onFinally): Promise başarılı veya başarısız olsun, her iki durumda da çalışır. Temizlik işlemleri (örneğin, yükleme göstergesini kapatma) için kullanılır.

myPromise
    .then(sonuc => {
        console.log("Başarılı:", sonuc);
    })
    .catch(hata => {
        console.error("Hata:", hata);
    })
    .finally(() => {
        console.log("Promise işlemi tamamlandı (başarılı veya başarısız).");
    });

Promise Zincirleme: Asenkron İşlemleri Sıralamak

Promise'lerin en güçlü özelliklerinden biri, zincirleme (chaining) yeteneğidir. Bu, birden fazla asenkron işlemi sıralı bir şekilde, Callback Hell'e düşmeden yönetmemizi sağlar.

Zincirleme Mantığı: .then()'den .then()'e

Bir .then() metodundan bir değer döndürdüğünüzde, bu değer bir sonraki .then() metoduna argüman olarak iletilir. Eğer bir .then() metodundan bir Promise döndürürseniz, bir sonraki .then(), o Promise'in çözülmesini bekler ve çözülen değeri alır. Bu sayede, karmaşık asenkron akışları düz ve okunabilir bir şekilde yazabiliriz.

function adim1() {
    return new Promise(resolve => setTimeout(() => resolve("Adım 1 tamamlandı."), 1000));
}

function adim2(oncekiSonuc) {
    console.log(oncekiSonuc);
    return new Promise(resolve => setTimeout(() => resolve("Adım 2 tamamlandı."), 1500));
}

function adim3(oncekiSonuc) {
    console.log(oncekiSonuc);
    return new Promise(resolve => setTimeout(() => resolve("Adım 3 tamamlandı. İşte final!"), 500));
}

adim1()
    .then(adim2) // adim1'in sonucunu adim2'ye iletir
    .then(adim3) // adim2'nin sonucunu adim3'e iletir
    .then(finalSonuc => {
        console.log(finalSonuc); // Adım 3 tamamlandı. İşte final!
    })
    .catch(hata => {
        console.error("Zincirde bir hata oluştu:", hata);
    });

Zincirde Hata Yönetimi

Promise zincirlemesinde hata yönetimi oldukça basittir. Zincirdeki herhangi bir Promise reddedildiğinde, kontrol hemen en yakın .catch() bloğuna atlar. Bu, her adımda ayrı ayrı hata kontrolü yapmak yerine, tüm zincir için tek bir hata işleyici kullanabileceğiniz anlamına gelir.

function hataYapanAdim() {
    return new Promise((resolve, reject) => {
        setTimeout(() => reject("Hata oluştu! Bu adımı geçemeyiz."), 1000);
    });
}

adim1()
    .then(adim2)
    .then(hataYapanAdim) // Bu Promise reddedilecek
    .then(adim3) // Bu adım asla çalışmayacak
    .catch(hata => {
        console.error("Yakalanan Hata:", hata); // Yakalanan Hata: Hata oluştu! Bu adımı geçemeyiz.
    });

Senkron ve Asenkron Değer Döndürme Farkı

.then() bloğundan senkron bir değer (örneğin bir sayı, string veya obje) döndürdüğünüzde, bu değer otomatik olarak çözülmüş bir Promise'e sarılır ve bir sonraki .then()'e iletilir. Eğer bir Promise döndürürseniz, bir sonraki .then() bu Promise'in çözülmesini bekler.

Gerçek Dünya Senaryoları: API Çağrıları

Promise zincirleme, genellikle bir API'den veri çektikten sonra başka bir API çağrısı yapmamız gereken durumlarda kullanılır. Örneğin, bir kullanıcının ID'sini aldıktan sonra o kullanıcının profil detaylarını çekmek gibi.

fetch('/api/kullanici/me') // Promise döndürür
    .then(response => response.json()) // Response objesini JSON'a dönüştür, bu da Promise döndürür
    .then(kullanici => fetch(/api/kullanici/${kullanici.id}/profil)) // Kullanıcı ID ile profil çeker
    .then(response => response.json())
    .then(profil => console.log('Kullanıcı profili:', profil))
    .catch(error => console.error('Profil çekme hatası:', error));

Promise Kombinatörleri: Birden Fazla Promise'i Yönetmek

Bazen birden fazla asenkron işlemi aynı anda başlatmak ve sonuçlarını belirli koşullara göre yönetmek isteriz. Promise kombinatörleri, bu senaryolar için güçlü araçlar sunar.

Promise.all(): Hepsi Tamamlanana Kadar Bekle

Promise.all(), bir dizi Promise alır ve tüm Promise'ler başarıyla tamamlandığında çözülür. Çözülen değerler, Promise'lerin sırasına göre bir dizi halinde gelir. Eğer dizideki Promise'lerden herhangi biri reddedilirse, Promise.all() da reddedilir ve ilk reddedilen Promise'in hatasını döndürür. Tıpkı bir Bollywood dans grubunun tüm üyelerinin senkronize olması gibi!

const film1 = new Promise(resolve => setTimeout(() => resolve("Film 1 bitti"), 3000));
const film2 = new Promise(resolve => setTimeout(() => resolve("Film 2 bitti"), 1000));
const film3 = new Promise(resolve => setTimeout(() => resolve("Film 3 bitti"), 2000));

Promise.all([film1, film2, film3])
    .then(sonuclar => {
        console.log("Tüm filmler izlendi:", sonuclar); // [ 'Film 1 bitti', 'Film 2 bitti', 'Film 3 bitti' ]
    })
    .catch(hata => {
        console.error("Bir filmde sorun çıktı:", hata);
    });

Promise.race(): İlk Bitiren Kazansın

Promise.race(), bir dizi Promise alır ve dizideki ilk çözülen veya reddedilen Promise'in sonucunu döndürür. Diğer Promise'ler çalışmaya devam etse de, sonuçları dikkate alınmaz. Bir yarış gibi, kim önce biterse onun sonucu alınır.

const hizliYukleme = new Promise(resolve => setTimeout(() => resolve("Hızlı sunucu yanıtı"), 500));
const yavasYukleme = new Promise(resolve => setTimeout(() => resolve("Yavaş sunucu yanıtı"), 2000));

Promise.race([hizliYukleme, yavasYukleme])
    .then(sonuc => {
        console.log("Kazanan:", sonuc); // Kazanan: Hızlı sunucu yanıtı
    });

Promise.allSettled(): Tüm Sonuçları Gör (ES2020)

Promise.allSettled(), Promise.all()'dan farklı olarak, tüm Promise'lerin durumuna (başarılı veya başarısız) bakılmaksızın tamamlanmasını bekler. Her bir Promise'in sonucunu (durumu ve değeri/nedeni ile birlikte) bir dizi olarak döndürür. Bu, her bir işlemin sonucunu bilmek istediğiniz ancak birinin başarısız olmasının diğerlerini etkilemesini istemediğiniz durumlarda kullanışlıdır.

const basariliIs = new Promise(resolve => setTimeout(() => resolve("Başarılı"), 1000));
const hataliIs = new Promise((resolve, reject) => setTimeout(() => reject("Hata"), 500));

Promise.allSettled([basariliIs, hataliIs])
    .then(sonuclar => {
        console.log(sonuclar);
        /*
        [
            { status: 'fulfilled', value: 'Başarılı' },
            { status: 'rejected', reason: 'Hata' }
        ]
        */
    });

Promise.any(): İlk Başarılı Olanı Yakala (ES2021)

Promise.any(), bir dizi Promise alır ve dizideki ilk başarılı Promise'in değerini döndürür. Eğer tüm Promise'ler reddedilirse, bir AggregateError ile reddedilir. Bu, birden fazla kaynaktan veri çekmeye çalıştığınızda ve sadece birinin başarılı olması yeterli olduğunda kullanışlıdır.

const sunucu1 = new Promise((resolve, reject) => setTimeout(() => reject("Sunucu 1 kapalı"), 1000));
const sunucu2 = new Promise(resolve => setTimeout(() => resolve("Sunucu 2'den veri geldi"), 500));
const sunucu3 = new Promise((resolve, reject) => setTimeout(() => reject("Sunucu 3 hata verdi"), 1500));

Promise.any([sunucu1, sunucu2, sunucu3])
    .then(sonuc => {
        console.log("Başarılı kaynak:", sonuc); // Başarılı kaynak: Sunucu 2'den veri geldi
    })
    .catch(error => {
        console.error("Hiçbir sunucu başarılı olmadı:", error);
    });

Async/Await: Promise'ler Üzerine Şeker Kaplama

ES2017 ile tanıtılan async/await sözdizimi, Promise'ler üzerine inşa edilmiş, asenkron kodu senkron kod gibi yazmamızı sağlayan sentaktik bir şekerdir. Asenkron kodunuzu Bollywood filmlerinin akıcılığında yazmak gibidir.

Async/Await Nedir ve Neden Kullanılır?

async/await, Promise zincirlemeyi daha da basitleştirerek, asenkron kodun okunabilirliğini ve anlaşılırlığını artırır. Özellikle karmaşık asenkron akışlarda, callback hell'den sonra Promise zincirlerinin getirdiği iyileşme gibi, async/await de Promise zincirlerinin getirdiği .then() yığınını azaltır ve kodu daha "düz" hale getirir.

async Fonksiyonlar: Her Zaman Bir Promise Döndürür

Bir fonksiyonu async anahtar kelimesiyle işaretlediğinizde, bu fonksiyon her zaman bir Promise döndürür. Fonksiyonun içinde döndürülen senkron bir değer, otomatik olarak çözülmüş bir Promise'e sarılır. Eğer fonksiyonda bir hata fırlatılırsa, Promise reddedilir.

async function selamVer() {
    return "Merhaba, async dünya!";
}

selamVer().then(mesaj => console.log(mesaj)); // Merhaba, async dünya!

async function hataFirlat() {
    throw new Error("Async fonksiyonda hata!");
}

hataFirlat().catch(hata => console.error(hata.message)); // Async fonksiyonda hata!

await Operatörü: Promise'in Çözülmesini Bekle

await anahtar kelimesi, sadece async fonksiyonların içinde kullanılabilir. Bir Promise'in önüne await koyduğunuzda, JavaScript bu Promise'in çözülmesini bekler ve Promise çözüldüğünde değerini döndürür. Bu sırada, ana iş parçacığı bloke olmaz, ancak async fonksiyonun yürütülmesi duraklatılır.

function gecikmeliSelam(isim) {
    return new Promise(resolve => {
        setTimeout(() => resolve(Merhaba, ${isim}!), 2000);
    });
}

async function selamlaKullanici() {
    console.log("Selamlamaya başlıyorum...");
    const mesaj = await gecikmeliSelam("Bollywood hayranı"); // 2 saniye bekler
    console.log(mesaj); // Merhaba, Bollywood hayranı!
    console.log("Selamlama bitti.");
}

selamlaKullanici();
// Çıktı sırası:
// Selamlamaya başlıyorum...
// (2 saniye sonra)
// Merhaba, Bollywood hayranı!
// Selamlama bitti.

Try/Catch ile Hata Yönetimi

async/await ile hata yönetimi, senkron koddaki try/catch bloklarına benzer. await ile beklediğiniz bir Promise reddedilirse, bu bir hata fırlatır ve en yakın try/catch bloğu tarafından yakalanabilir.

function hataYapanPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => reject(new Error("Beklenmedik bir sorun oluştu!")), 1500);
    });
}

async function islemYap() {
    try {
        console.log("İşlem başlıyor...");
        const sonuc = await hataYapanPromise();
        console.log("Sonuç:", sonuc); // Bu satır çalışmayacak
    } catch (hata) {
        console.error("Hata yakalandı:", hata.message); // Hata yakalandı: Beklenmedik bir sorun oluştu!
    } finally {
        console.log("İşlem tamamlandı (hata olsun veya olmasın).");
    }
}

islemYap();

Bollywood Sahnesinde Asenkron Büyü: Gerçek Dünya Uygulamaları

Promises ve async/await, modern web geliştirmede vazgeçilmez araçlardır. İşte bazı gerçek dünya senaryoları:

Veri Çekme ve Gösterme Senaryoları

Bir web sayfasında kullanıcı verilerini veya ürün listesini bir API'den çekmek ve ekranda göstermek en yaygın kullanım senaryosudur. fetch API'si zaten Promise tabanlıdır.

async function urunleriGetirVeGoster() {
    try {
        const response = await fetch('/api/urunler');
        if (!response.ok) {
            throw new Error(HTTP hatası! Durum: ${response.status});
        }
        const urunler = await response.json();
        // Ürünleri HTML'e ekleme veya başka işlemler
        console.log('Ürünler başarıyla yüklendi:', urunler);
    } catch (error) {
        console.error('Ürünleri çekerken bir hata oluştu:', error);
    }
}
urunleriGetirVeGoster();

Kullanıcı Kimlik Doğrulama Akışları

Kullanıcı girişi, token yenileme gibi adımlar genellikle birden fazla asenkron API çağrısı gerektirir. Promise zincirleri veya async/await ile bu akışlar çok daha yönetilebilir hale gelir.

async function girisYap(kullaniciAdi, sifre) {
    try {
        const response = await fetch('/api/login', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ kullaniciAdi, sifre })
        });
        const data = await response.json();
        if (data.token) {
            localStorage.setItem('authToken', data.token);
            console.log('Giriş başarılı, token kaydedildi.');
            // Kullanıcıyı yönlendirme
        } else {
            throw new Error(data.mesaj || 'Giriş başarısız.');
        }
    } catch (error) {
        console.error('Giriş hatası:', error.message);
    }
}
// girisYap('kullanici123', 'sifre456');

Çoklu Resim Yükleme Örnekleri

Bir kullanıcı birden fazla dosya yüklediğinde, her bir yükleme işlemi asenkrondur. Promise.all() kullanarak tüm yüklemelerin tamamlanmasını bekleyebilir ve ardından bir başarı mesajı gösterebiliriz.

async function cokluResimYukle(resimDosyalari) {
    const yuklemePromiseListesi = resimDosyalari.map(dosya => {
        // Her dosya için ayrı bir Promise döndüren yükleme fonksiyonu
        return new Promise(resolve => {
            setTimeout(() => {
                console.log(${dosya.name} yüklendi.);
                resolve(${dosya.name} - Yüklendi);
            }, Math.random() * 2000 + 500);
        });
    });

    try {
        const sonuclar = await Promise.all(yuklemePromiseListesi);
        console.log('Tüm resimler başarıyla yüklendi:', sonuclar);
    } catch (error) {
        console.error('Resim yükleme hatası:', error);
    }
}

// Örnek kullanım
// cokluResimYukle([{name: 'foto1.jpg'}, {name: 'foto2.png'}, {name: 'belge.pdf'}]);

Animasyonlar ve Zamanlanmış İşlemler

Karmaşık animasyon sekansları veya belirli aralıklarla tetiklenen işlemler de Promise'ler ile daha kolay yönetilebilir. Örneğin, bir animasyon bittikten sonra başka bir animasyonu başlatmak.

function animasyonYap(element, sure) {
    return new Promise(resolve => {
        console.log(${element.id} animasyonu başladı.);
        setTimeout(() => {
            element.style.transform = 'translateX(100px)'; // Basit bir animasyon
            console.log(${element.id} animasyonu bitti.);
            resolve();
        }, sure);
    });
}

async function tumAnimasyonlariCalistir() {
    const kutu1 = document.getElementById('kutu1');
    const kutu2 = document.getElementById('kutu2');

    if (kutu1 && kutu2) {
        await animasyonYap(kutu1, 1500);
        await animasyonYap(kutu2, 1000);
        console.log('Tüm animasyonlar tamamlandı!');
    }
}

// HTML'de id="kutu1" ve id="kutu2" olan elementler olduğunu varsayalım
// tumAnimasyonlariCalistir();

Sonuç

JavaScript Promises ve async/await, asenkron programlamanın karmaşıklığını önemli ölçüde azaltan, modern JavaScript'in temel taşlarındandır. Callback Hell'in karanlık günlerinden, Promise'lerin getirdiği zincirleme ve hata yönetimi kolaylığına, oradan da async/await'in senkron kod yazım rahatlığına uzanan bu yolculuk, geliştiricilere güçlü ve okunabilir çözümler sunar. Tıpkı bir Bollywood filminin tüm parçalarının (müzik, dans, drama) bir araya gelerek kusursuz bir uyum içinde bir "Bollywood Coşkusu" yaratması gibi, Promises ve async/await de asenkron işlemleri yöneterek kodunuzda bir "Asenkron Büyü" yaratır. Bu araçları ustaca kullanarak, daha performanslı, daha bakımı kolay ve daha keyifli web uygulamaları geliştirebilirsiniz. Artık asenkron kod yazmak bir kabus değil, bir keyif!

SSS (Sık Sorulan Sorular)

Promise nedir?

Promise, asenkron bir işlemin nihai sonucunu (başarı veya başarısızlık) temsil eden bir JavaScript nesnesidir. Bir değerin gelecekte kullanılabilir olacağına dair bir sözleşme gibidir.

Callback Hell nedir? Promise bunu nasıl çözer?

Callback Hell, birden fazla asenkron işlemin iç içe geçmiş callback fonksiyonları ile yönetilmesi sonucu oluşan, okunması ve bakımı zor kod yapısıdır. Promise'ler, .then() metodu ile zincirleme yaparak bu iç içe geçmeyi önler ve daha düz bir kod akışı sağlar.

.then() ile .catch() arasındaki fark nedir?

.then(), bir Promise başarılı olduğunda (fulfilled) çalışacak kodu içerir ve isteğe bağlı olarak ikinci bir argüman olarak hata durumunu da işleyebilir. .catch() ise, Promise reddedildiğinde (rejected) veya zincirdeki önceki bir Promise'den bir hata fırlatıldığında çalışır. Genellikle hata yönetimini .catch() ile ayrı yapmak daha temiz bir yaklaşımdır.

async ve await ne işe yar