Promise Nedir?
Bir JavaScript Promise henüz tamamlanmamış ancak gelecekte belli bir noktada gerçekleşecek bir işlemin sonucunu temsil eder. Böyle bir işlemin bir örneği bir ağ isteğidir. Örneğin API gibi bir kaynaktan veri aldığımızda, yanıtın ne zaman alınacağını kesin olarak belirlememizin bir yolu yoktur.
Bu ağ isteğinin tamamlanmasına bağlı başka işlemlerimiz varsa bu sorunlu olabilir. Promise olmadan, sırayla yapılması gereken eylemlerle başa çıkmak için geri çağrıları kullanmamız gerekirdi. Yalnızca bir eşzamansız eylemimiz varsa, bu bir sorun olmak zorunda değildir. Ancak, birden fazla async (eşzamansız) adımı sırayla tamamlamamız gerekiyorsa, geri çağrılar yönetilemez hale gelir ve rezil callback cehennemi ile sonuçlanır. İşte size callback cehennemi için bir örnek
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
birseyYap(function(istek1) { baskaBirseyYap(istek1, function(istek2, err) { if (err) { hataYakala(err); } dahaFazlaYap(istek2, function(istek3, err) { if (err) { baskaHataYakala(err); } dahaFazlaSon(istek3, function(err) { if (err) { dahaBaskaHataYakala(err); } // Tamam }); // dahaFazlaSon }); // dahaFazlaYap }); // baskaBirseyYap }); // birseyYap |
Promise, sırayla gerçekleşmesi gereken görevlerle başa çıkmak için standart ve daha temiz bir yöntem sağlar.
|
1 2 3 4 5 6 7 8 |
birseyYap() .then(baskaBirseyYap) .catch(hataYakala) .then(dahaFazlaYap) .then(dahaFazlaSon) .catch(dahaBaskaHataYakala) |
Promise Oluşturma
Promise constructor kullanılarak bir Promise oluşturulur. Bu, tek parametresi olarak iki bağımsız değişkeni (resolve & reject) içeren bir işlevi kabul eder.
|
1 2 3 |
var promise = new Promise( function(resolve, reject) { /* Promise içeriği */ } ) |
İşlev içinde, istediğimiz asenkron görevi gerçekleştirebiliriz. Promise yerine getirilmiş olarak işaretlemek için, isteğe bağlı olarak döndürmek istediğimiz bir değeri ileterek resolve() işlevini kullanırız. Promise reddedildi veya başarısız olarak işaretlemek için, isteğe bağlı olarak bir hata mesajı iletecek reject() öğesini çağırırız. Bir promise yerine getirilmeden veya reddedilmeden önce bekleme durumundadır..
İşte bir XMLHttpRequest uygulamasının ortak bir promise örneği –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function getir(url) { return new Promise(function(resolve, reject) { var req = new XMLHttpRequest(); req.open('GET', url); req.onload = function() { if (req.status == 200) { resolve(req.response); /* PROMISE ALINDI*/ } else { reject(Error(req.statusText)); /* PROMISE REDDEDİLDİ*/ } }; req.onerror = function() { reject(Error("Ağ Hatası")); }; req.send(); }); } |
Promise Kullanma
Promise oluşturduktan sonra onu gerçekten kullanmamız gerekir. Promise-ified işlevini yürütmek için, bunu herhangi bir normal işlev gibi çağırabiliriz. Ancak, bu bir promise olduğundan, şimdi işleve ekleyebileceğimiz ve Promise artık beklemediğinde yürütülecek olan .then() yöntemine erişebiliyoruz.
.then() yöntemi iki isteğe bağlı parametreyi kabul eder. İlk olarak, promise yerine getirilmesi halinde çağrılan bir işlev, ikincisi, promise reddedilirse çağrılan bir işlevdir.
|
1 2 3 4 5 6 7 8 9 |
var url="index.html"; getir(url) .then(function(response) { /* başarılı */ }, function(err) { /* hatalı */ }) |
Promise Hata Yakalama
Başarılı ve hatalı olması durumda çalıştırılacak işlevler isteğe bağlı olduğundan, daha iyi okunabilirlik için bunları iki .then() öğesine bölebiliriz.
|
1 2 3 4 5 6 7 8 9 10 |
var url="index.html"; getir(url) .then(function(response) { /* başarlılı Fonksiyon */ }, undefined) .then(undefined, function(err) { /* hatalı Fonksiyon */ }) |
İşleri daha da okunabilir hale getirmek için, .then (undefined, hataFonksiyon) için bir kısayol olan .catch() yöntemini kullanıyoruz.
|
1 2 3 4 5 6 7 8 9 10 |
var url="index.html"; getir(url) .then(function(response) { /* başarılıFonksiyon */ }) .catch(function(err) { /* hatalıFonksiyon */ }) |
Promise Zincirleme
Sözlerdeki gerçek değer, sırayla yürütmemiz gereken birden fazla asenkron fonksiyona sahip olduğumuzdur. Bir eşzamansız işlevler dizisi oluşturmak için .then() ve .catch() yöntemlerini birlikte zincirleyebiliriz.
Bunu, bir başarı veya hata işlevi içinde başka bir söz döndürerek yaparız. Örneğin –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
new Promise(function(resolve, reject) { setTimeout(() => resolve(1), 1000); // (*) }).then(function(result) { alert(result); // 1 return result * 2; }).then(function(result) { // (***) alert(result); // 2 return result * 2; }).then(function(result) { alert(result); // 4 return result * 2; }); |
Zincir içindeki bir promise çözüldüyse, sıradaki bir sonraki başarı işlevine (.then()) geçecektir. Öte yandan, bir promise reddedilirse, sıradaki bir sonraki hata işlevine (.catch()) atlar.
Promise Paralel Olarak Yürütme
Bir grup promise dolu işlevi paralel olarak yürütmek ve sonra yalnızca tüm promiseler yerine getirildiğinde bir eylem gerçekleştirmek istediğimiz durumlar olabilir. Örneğin, bir grup resmi getirmek ve bunları sayfada görüntülemek istiyorsak.
Bunu yapmak için iki yöntemi kullanmamız gerekiyor. İlk olarak, Array.map() yöntemi, bir dizideki her öğe üzerinde bir eylem gerçekleştirmemize izin verir ve bu eylemlerin sonuçlarının yeni bir dizisini oluşturur.
İkinci olarak, Promise.all() yöntemi yalnızca bir dizideki her vaat çözümlendiğinde çözülen bir vaat döndürür. Dizi içindeki herhangi bir tek vaat reddedilirse, Promise.all() prmoise de reddedilir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
function getir(url) { return new Promise(function(resolve, reject) { var req = new XMLHttpRequest(); req.open('GET', url); req.onload = function() { if (req.status == 200) { resolve(req.response); /* PROMISE RESOLVED */ } else { reject(Error(req.statusText)); /* PROMISE REJECTED */ } }; req.onerror = function() { reject(Error("Ağ Hatası")); }; req.send(); }); } var arrayURL = ['n1.json', 'n2.json', 'n3.json', 'n4.json']; var arrayPromise = arrayURL.map(getir); Promise.all(arrayPromise) .then(function(arraySonuc) { /* başarılı bir oldu*/ }) .catch(function(hata) { /* hata oldu */ }) |
Yorum Yap