BeğenmedimYetersizİdare Ederİşime yaradıMükemmel (4 kişi oy kullandı. 5 üzerinden ortalama puan 5.00, oy kullanmak istemez misin?)
Loading...
JavaScript Webmaster Yazılım

3 adımda Javascript Promises Yapısı

Javascript Promises yapısı veri kontrol ve işlemlerinin asektron sistem ile yapılmasını sağlar.

Merhaba arkadaşlar, Javascript’in popülerliğinin her geçen gün daha fazla artması ama buna karşılık Türkçe kaynak sıkıntısının aynı düzende devam etmesi nedeniyle Javascript’in temel işlevleri konusunda Türkçe içerikler üretmeyi planladım. Bugün sizlere 3 adımda Javascript Promises yapısı hakkında karşınıza çıkabilecek tüm detayları aktarmayı planlıyorum. Dilerseniz daha fazla uzatmadan içeriğimize geçelim.

Javascript, başlangıcından bu yana oldukça olgunlaşan bir “programlama dili”. Başlangıçta sadece uygulamalara ve web sitelere hareketlilik getirmesi amaçlanırken, bugün geldiğimiz noktada o kısmı da CSS3 ile birlikte CSS’e bırakıp, daha modern işlevler görmemizi sağlamakta. Promise de bu olgunlaşma sürecinde aramıza katılan yapılardan birisi. Peki neden Javascript promise yapısı kullanılmalı?

Promises Nedir? Neden Promise kullanmalıyım?

Promise; genel anlamıyla eş zamansız çalışan Javascript dilinin, eş zamanlı ve birbiri ardına fonksiyonların sırasıyla cevap vermesini hali hazırda sağlamakta. Kullanılma amacı da aldığınız verilerin kontrolünü sağlarken veya onları işleyip, istenilen sonucu sorgulamak isterken; sonuç sonrası alınan cevabı, önceki işlemlerin ardından gerçekleştirmektir. Bunu callback fonksiyonlar ile de yapabilirken, Promise bize daha fazla açık yazım ve okunabilirlik sağlamakta.

Basit Javascript Promise Yapısı

const aos = new Promise((resolve,reject) => {
    var sum = 1+1;
    if(sum==2) {
        resolve('Success');
    } else {
        reject('Failed');
    }
})

aos.then((message) => {
    console.log(message);
}).catch((message) => {
    console.log(message)
})

Yapının verilip, ezbere kaçılmaktansa kodun açıklanması gerektiğini düşünenlerdenim. Kodun yapısını anlatmaya başlayalım:

Öncelikle new Promise söz dizimi ile bir Promise oluşturup bunu const değişken tanımlama operatörü ile aos değişkenine tanımladık. Javascript değişken tanımlamada var, let ve const farkı adlı yazımızda, tanımla operatörlerini inceleyebilirsiniz. Ardından içerisinde sum değişkene 1+1’in toplamını attık. Bunu if ile sorguladık. Eğer toplam 2’ye eşit ise resolve ile Succes text’i dışarı aktardık. Eğer eşit değil ise reject ile bunu da dışarı atıyoruz.

Dışarı attığımız bu verileri, bir alt bölümde then ve catch ile yakalayıp, işleme şansına sahibiz. resolve olarak veri gönderiyorsak bunu then ile yakalayabiliyor iken; eğer reject ile veriyi dışarı aktardıysak catch ile bunu işleyebiliyoruz. Örneğin yukarıdaki kod yapısının çıktısı;

Success  

Çünkü 1+1’in sonucu 2’ye eşit ve bunun sonucunda veri resolve ile dışarı aktarılıyor. Aktarılan veriyi, alt bölümde then ile yakalayıp; konsola yazdırıyoruz.

Fonksiyon Entegrasyonu

Fonksiyonel kullanım, bizim promise söz dizimini herhangi bir değişkene atamaktan kurtarıyor. Fakat yine de bu fonksiyonu alt bölümde tanımlamamız gerekecek.

function job() {
    return new Promise(function(resolve, reject) {
        resolve();
    });
}

let promise = job();

promise.then(()=> {
    console.log('Success');
}).catch(() => {
    console.log('Error')
})

Yine kodumuzu açıklamak gerekir ise, öncelikle içinde return ile döndüreceğimiz promise söz diziminin yer aldığı bir fonksiyon oluşturduk. Aşina olduğumuz, resolve(olumlu) ve reject(olumsuz) parametreleri ile yine dışarıya veri aktarabiliyoruz. Yukarıdaki kodumuzda resolve ile dışarıya olumlu bir şeylerin olduğunu ilettik.

Fonksiyonu bir değişkene tanımlayıp, ardından bu değişkeni then ve catch ile sorguluyoruz. Promise söz dizimi içinde, resolve ile dışarıya olumlu bir cevap verdiğimiz için then bölümünde yer alan işlem bölümü yani konsola yazdırma komutu çalışacak.

Javascript Promise Yapısında Özel Durumlar

Mevcut promise yapısını then/catch işlev bölgesinde tekrar döndürmek

function test(state) {
    return new Promise(function(resolve, reject) {
        if (state) {
            resolve('success');
        } else {
            reject('error');
        }
    });
}

let promise = test(true);

promise.then(function(data) {
    console.log(data);

    return test(false);
}).catch(function(error) {
    console.log(error);
})

Üst kısmı, önceki fonksiyonel promise kullanımı kısmında detaylı olarak anlatmıştık. Bizim bu başlıktaki ilgi alanımız alt kısım. test fonksiyonuna giden true parametresi, promise söz dizimi içinde resolve ile ‘success’ çıktısını bize teslim ediyor. Then ile yakanan data yazdırılıyor. Buraya kadar her şey normal. Asıl olay burada başlıyor. Hemen konsola yazdırma kodunun altında test fonksiyonu bu sefer false parametresi ile return edilmiş. Bu veriler ile sonuç reject ile catch sorgulama bölümüne gitmemize sebep oluyor. Bu nedenle ekrana ‘error’ sonucu çıkıyor.

Çıktı:

success,error

Throw kullanımı

Throw, then içerisinde veri işlenir iken bir sorun ile karşılaşılması sonrası verinin catch bölümüne çıktı yapabilmesini sağlayan bir yapıdır. Throw ile veri gönderebilir ve bunu hemen then’e yani bitişik olan catch sorgulama alanında işleyebilirsiniz.

function test(state) {
    return new Promise(function(resolve, reject) {
        if (state) {
            resolve('success');
        } else {
            reject('error');
        }
    });
}

let promise = test(true);

promise.then(function(data) {
    console.log(data);
    throw 'Error was occured';
}).catch(function(error) {
    console.log(error);
})

test fonksiyonuna true parametresi verilmiş ve bu da üst bölümde başarılı bir şekilde resolve edilmiş iken birdenbire önümüze throw yapısı çıkıyor. Throw yapısı ile then bölümünde verileri işlerken bir sorun oluştuğunu belirtiyoruz ve bir mesaj veya veri ile bunu catch kısmına aktarıyoruz. Catch kısmında da gelen mesajı konsola yazdırıyoruz.

Çıktı: 

success
Error was occured

Tek satır Reject İşlemi

Then veya catch ile sorguladığınız bir yapıya herhangi bir yapıdan data gönderdiğinizde eğer promise değil ise bu otomatik olarak then bölümüne düşer. Peki catch durumuna düşürmek istiyorsak? Bunu da 

return Promise.reject(catchKismindaYaklanacakVeri);

ile ya da

throw catchKismindaYakalanacakVeri;

ile yapabiliriz.

Bu yazımızda Javascript Promises yapısı hakkında genel ve özel tüm durumlardan bahsettik. İlerleyen günlerde ekleyeceğimiz quiz ve testler ile promises mantığını daha fazla pekiştirebileceksiniz. Siz de bu süreçte bu sayfadan promise yapısı hakkındaki soruları çözebilirsiniz.

Ahmet Onur

2012 yılından bu yana dijital teknolojiler alanında; yönetim, delegasyon, yazılım ve girişimcilik üzerine yürüttüğüm çalışmalar, okuduğum kaynaklar ve kazandığım tecrübeler doğrultusunda yazılar paylaşıyorum. İlginiz ve okuduğunuz için teşekkür ederim!

Yorum yap

yorum yapmak için buraya tıklayın.

Reklam