Tasarım Kodlama

JavaScript Promise Kullanımı

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

Promise, sırayla gerçekleşmesi gereken görevlerle başa çıkmak için standart ve daha temiz bir yöntem sağlar.

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.

Promise Kullanımı
Promise Kullanımı

İş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 –

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.

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.

İşleri daha da okunabilir hale getirmek için, .then (undefined, hataFonksiyon) için bir kısayol olan .catch() yöntemini kullanıyoruz.

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 –

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.

 

Yorum yap