JavaScript ES6 Promise

JavaScript kütüphanelerinde sıklıkla kullandığımız bir özellik olan Promise artık JavaScript ile birlikte geliyor.

JavaScript Promise işlem sonuçlarını JavaScript Chaining Metotlar yazımdaki yöntem gibi kullanabilmemize imkan veriyor.

JavaScript Promise kullanımı;

<script>
"use strict";
  let sonuc = false;

  let islem = new Promise(function(resolve, reject) {
    if (sonuc) {
      resolve("Başarılı işlem");
    } else {
      reject("Başarısız işlem");
    }
  });

  islem
    .then(function(data) {
      console.log(data);
    })
    .catch(function(data) {
      console.log(data);
    });
</script>

JavaScript promise nesnesini new anahtar kelimesi ile oluşturuyor ve parametresine, işlemlerin yapılacağı anonim fonksiyonu yazıyoruz.

Anonim fonksiyon işlem başarılı olduğunda resolve fonksiyonuna, işlem hatalı veya olumsuz olduğunda reject fonksiyonuna parametrelerine yazılan bilgileri iletir.

Promise nesnesini, nesne değişken adı ile birlikte kullanıyoruz.

İşlem başarılıysa yani resolve çağrılmışsa then metodu, işlem başarısızsa yani reject çağrılmışsa catch metodu çalıştırılır.

Promise yöntemi karmaşık gibi görünebilir.

Promise yöntemi kullanılmadan yapılmış hali;

<script>
"use strict";
  let sonuc = false;

  let islem = function(resolve, reject) {
    if (sonuc) {
      resolve("Başarılı işlem");
    } else {
      reject("Başarısız işlem");
    }
  }

  islem(resolve, reject);

  function resolve(data) {
    console.log(data);
  }

  function reject(data) {
    console.log(data);
  }
</script>

Örnekte islem fonksiyonunu çalıştırdık hatalı işlem resolve, başarılı işlem reject için ayrı ayrı fonksiyon yazdık.

Belki bu küçük örnek için pek kullanışlı görünmeyebilir.

Ancak daha uzun kodlarda Promise kullanılmadan yapıldığında kodlar daha da karışacak ve kodların bakımı zorlaşacaktır.

JavaScript ile herhangi bir Ajax isteği gönderdiğimizde genel olarak işlem başarılı ya da işlem hatalı olmak üzere iki tür geri bildirim alırız.

Geri bildirimleri genellikle callback yöntem ile bir fonksiyona geçirip çeşitli işlemler yaparız.

<script>
  "use strict";

  function getURL(url, successFunction, errorFunction) {
    let req = new XMLHttpRequest();
    req.open("GET", url, true);

    req.onload = function() {
      if (req.status == 200) {
        successFunction(req.response);
      } else {
        errorFunction("Sayfa yüklenemedi");
      }
    }
    req.onerror = function() {
      errorFunction("Hata oluştu");
    }
    req.send();
  }

  function successFunction(data) {
    console.log(data.responseText);
  }

  function errorFunction(msg) {
    console.log(msg);
  }

  getURL("//www.yusufsezer.com.tr", successFunction, errorFunction);
</script>

Örnekte Ajax istediği başarılı olduğunda successFunction isimli fonksiyona Ajax isteği sonucu gönderilecek herhangi bir hata ile karşılaştığında errorFunction isimli fonksiyona hata ve uyarı mesajları gönderilecektir.

Herşey normal gibi görünse de sonucun başarılı ve hatalı olması durumunda ayrı ayrı fonksiyon yazdık ve yazdığımız kodlar biraz karmaşıklaştı.

Burada callback’in daha esnek bir yöntemi olan “Promise” nesnesini kullanabiliriz.

<script>
"use strict";

  let getURL = function(url) {

    return new Promise(function(successFunction, errorFunction) {
      let req = new XMLHttpRequest();
      req.open("GET", url, true);

      req.onload = function() {
        if (req.status == 200) {
          successFunction(req.response);
        } else {
          errorFunction("Sayfa yüklenemedi");
        }
      }

      req.onerror = function() {
        errorFunction("Hata oluştu");
      }
      req.send();
    });
  }

  getURL("//www.yusufsezer.com.tr").
  then(function(data) {
    console.log(data.responseText);
  }).catch(function(msg) {
    console.log(msg);
  });
</script>

Promise kullanarak her callback için ayrı ayrı fonksiyon yazma ve kod karmaşıklığının önüne geçtik kodumuz daha anlamlı ve daha düzenli oldu.

Promise nesnesi all ve race metotlarına sahiptir.

Promise nesnesi all metodu birden fazla promise sonucunu tek then ve catch bloğuna yönlendirmemizi sağlar.

<script>
"use strict";

  let req1 = new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('First!');
    }, 1000);
  });
  let req2 = new Promise(function(resolve, reject) {
    setTimeout(function() {
      reject('Second!');
    }, 2000);
  });

  Promise.all([req1, req2]).then(function(results) {
    console.log('Then: ', results);
  }).catch(function(err) {
    console.log('Catch: ', err);
  });
</script>

Promise all metodu tüm promise işlemlerinin bitmesini bekler. Herhangi bir hata ile karşılaşırsa catch bloğu çalıştırılır.

Promise nesnesi race metodu birden fazla promise sonucunu tek then ve catch bloğuna yönlendirmemizi sağlar.

<script>
"use strict";

  let req1 = new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('First!');
    }, 1000);
  });
  let req2 = new Promise(function(resolve, reject) {
    setTimeout(function() {
      reject('Second!');
    }, 2000);
  });

  Promise.race([req1, req2]).then(function(results) {
    console.log('Then: ', results);
  }).catch(function(err) {
    console.log('Catch: ', err);
  });
</script>

Promise race metodu işlemlerden hangisi daha önce işini bitiriyorsa ilk olarak işini bitiren promise sonucunu gerçekleştirir.

JavaScript Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.