Javascript’te Promise Kullanımı

Promise tanımı ES6 ile Javascript dünyasına girdi, aslında daha önce bazı kütüphaneler ile kullanılabiliyordu artık bağımsız olarak kullanılabilir oldu. Javascript’in en meşhur özelliklerinden olan asenkron çalışma yapısına çok uygundur. Bir işlemin o an bitmesini beklemeden başarılı ya da başarısız bir sonuç için girilen fonksiyonları sonuca bağlamamızı sağlar.

Event‘ler ile de yapabiliyorduk aslında bu tarz bloklama yapmaması gereken işlemleri. Ama bir event’i dinlemeye başlamadan olup geçmesi ihtimali gibi bazı kullanışsız tarafları vardı. Aşağıdaki örnekte load event’i için biz tanımlama yapana kadar görsel yüklenmiş ve event tetiklenmiş olabilir. Bu event yapısındaki kodumuzun çalışmamasına sebep olacaktır fakat promise yapısında olay gerçekleşmiş olsa bile doğru fonksiyonumuz promise tarafından çalıştırılacaktır. Ayrıca bazı durumlarda bir işlem için bir kaç event tetiklenebilirken Promise’de durum böyle değildir ya başarılı ya da başarısız fonksiyonları çalıştırılır.

var img1 = document.querySelector('.img');

// event dinleme
img1.addEventListener('load', function() {
  // görsel yüklendi 
});

// burada img1 nesnesinin Promise dönen bir ready metodu olduğunu varsayalım
img1.ready().then(function(){ /*başarılı*/ }, function(){ /*başarısız*/ })

Bu yapısıyla, işlemin ne zaman gerçekleştiğinden bağımsız bir kod yazarak, daha önce bahsettiğim asenkron çalışma mantığına tam uyum sağlamış oluyoruz.

Promise.prototype.then()

Bir promise nesnesine ait bu metot ile başarılı ve başarısız sonuçlar için fonksiyonlar tanımlayarak işlem sonucunu kullanabiliriz. Yukarıdaki örneğimizde kullanımını görebiliyoruz.

Promise.prototype.catch()

Bu metot ile de sadece başarısız dönüşler için fonksiyon tanımlayabiliriz. catch ve then metotları promise nesnesini döndürdükleri için birbirlerine bağlanarak(chain) kullanılabilir, bunun detaylarına aşağıda değineceğim. Then ve Catch metodlarını bir kaç kez de kullanabiliriz.

img1
 .ready()
 .then(function(){ /*başarılı*/ })
 .then(function(){ /*başarılı tekrar*/ })
 .catch(function(){ /*başarısız*/ });

Promise Oluşturma

Promise sınıfına parametre olarak 2 parametreli bir fonksiyon verilerek oluşturulur. Cümle zor oldu örnek yapalım iyisi mi.

var prm = new Promise(function(resolve, reject){
  sayi = 1;
  if(sayi > 2){
    reject(sayi);
  }else{
    resolve(sayi);
  }
  
});

prm.then(function(sayi){
  console.log("Başarılı", sayi)
}, function(sayi){
  console.log("Başarısız",sayi)
})
# konsolda "Başarılı 1" yazacaktır

Çok basit bir Promise nesnesi oluşturduk. sayi adında bir değişken tanımlayıp buna bağlı olarak başarılı(resolve) ya da başarısı(reject) fonksiyonlarını parametre olarak verdik.

Zincirleme Then Kullanımı

Az önce de kısaca bahsettiğim gibi then metodunu art arda kullanabiliriz. Burada dikkat edilmesi gereken kullanışlı bir özellik var. Then metoduna tanımladığımız fonksiyonun return değeri bir sonraki then için parametre olmuş oluyor. Şöyle ki;

var prm = new Promise(function(resolve, reject){
  sayi = 1;
  if(sayi > 2){
    reject(sayi);
  }else{
    resolve(sayi);
  }  
});

prm.then(function(sayi){
  console.log("Asıl sayı", sayi);
  return sayi+1;
}).then(function(yeniSayi){
  console.log("Sayı artı bir", sayi);
  return yeniSayi*2;
}).then(function(yeniSayi){
  console.log("Sayı artı bir çarpı iki", yeniSayi);
})

/* konsola şunları yazacaktır
Asıl sayı 1
Sayı artı bir 2
Sayı artı bir çarpı iki 4
*/

Kaynaklar;
https://developers.google.com/web/fundamentals/primers/promises
https://developer.mozilla.org/tr/docs/Web/JavaScript/Reference/Global_Objects/Promise
http://es6-features.org/#PromiseUsage

Bir Cevap Yazın