Javascript Callback, Promise, Async Await Kullanımı ve Farkları

Konularımıza başlamadan önce asenkron ve senkron programlama arasındaki farkı küçük bir özet şeklinde açıklamak istiyorum.

Senkron programlamada bir fonksiyon bitmeden diğeri çalışmaya başlamaz yani birbirlerini beklerler bekleyen fonksiyonun cevabı dönmeden diğerine geçilmez. Fakat asenkron fonksiyonlar aynı anda çalışmaya başlarlar ve birbirlerinin sonucunu beklemeden çalışmaya devam ederler. Hangisinin sonucu önce çıkarsa o sonuç gösterilir. Javascript’in çalışma mantığı single-thread şeklindedir ve asenkron çalışır. Yani bir satırı okuyup çıktısını bekleyip diğer satıra geçmez. Her bir satırı okur ve belirli bir sıraya yerleştirir. Bu çalışma mantığı çok detaylı bir konu olduğu için sonraki yazılarımda değineceğim.

Callback Nedir ve Nasıl Çalışır?

Callback, bir fonkisyonu başka bir fonkisyona parametre olarak verip kullanmaya denir. Bu şekilde kullanılarak senkron bir şekilde çalışmasını sağlayabiliriz.

Bir örnekle açıklamaya çalışalım.

Yukarıdaki örnekte gördüğünüz üzere "printAll” fonksiyonu çağırıldığında her zaman farklı bir sırada çıktı göreceğiz. Hiçbir çıktı birbirini beklemeyecek ve süresi az olan hangisi olursa o ilk çıkacaktır. Callback kullanarak bunu istediğimiz sırayla çıkmasını istersek eğer şu şekilde yapabiliriz.

Callback kullanmaktaki amacımız aslında önce hangi fonksiyonun çalışacağını ve sonuç göstereceğini belirlemektir.

Fakat callback kullanımında birkaç problem vardır. Bunlara örnek olarak;

• Fonksiyondan dönecek hataların çözümüyle başa çıkacak bir metot olmaması yani hataların yutulması
• Fonksiyon çağırılırken erken veya hiç gelmemesi, az veya çok çağırılması
• “Callback hell” denilen iç içe çok fazla callback kullanılması ve kodun okunurluğunun ve yönetiminin zorlaşması

Yukarda yaptığımız örnekte de görebileceğiniz üzere daha fazla sıralayacak değerimiz olsaydı çok daha fazla iç içe callback yazmak gerekecekti.

Callback fonksiyonlardaki problemlerden dolayı Promise kavramı oluşturulmuştur.

Promise Nedir ve Nasıl Çalışır?

Promise aslında Türkçe çevirisinden de anlayabileceğimiz üzerine sözdür. Mesela internetten bir sipariş veriyorsunuz.  Size bir sipariş sözü verildiğini biliyorsunuz yani elinize bir mesaj veya bir mal geçecek buna “promise”, buradan gelen bildirimi beklemeye “pending”, cevap başarılı yani sipariş size ulaşacak ise “resolved”, siparişiniz iptal olduysa “rejected” oluyor. Bu başarısız durumda da hata çözümleme(error-handling) yapılarak başka bir çözüm yoluna gidiliyor.

• Promise olan bir değişkenin değeri değiştirilemez yani immutabledır.
• Sadece bir kere başarılı veya başarısız olurlar.
• Promise oluştururken bize iki adet işlev sunar bunlar resolve ve rejecttir.
• Resolve başarılı durumlar için, reject ise başarısız durumlar için kullanılır.

Yukarıda yaptığımız callback örneğini bu kez promise ile yapalım.

Burada oluşturduğumuz “printorder” fonksiyonu bize bir promise oluşturacak ve döndürecek. Oluşturduğumuz promise if bloğu eğer true ise resolve olacak ve then içinde çözülerek gönderdiğimiz order parametresini dönecek. Eğer false olur ise reject olacak ve catch bloğunda yakalanarak konsolda gösterilecek.

Fakat callback fonksiyonlarda oluşan callback hell olayı burada da oluşmaya başladı. Bunun çözümü için async-await fonksiyonlar kullanılmaya başlandı. Aslında bu fonksiyonlar geliştirici ve kodu okuyan insanlar için kodun asenkron olmasına rağmen senkron gözükmesini de sağlar.

Async Await Fonksiyon Nedir ve Nasıl Çalışır?

Bu fonksiyonların amacı senkron olan yani çağırıldığı şekilde ve birbirlerini beklemeyen fonksiyonları, asenkron hale çevirmemize yarar. Bir fonksiyon başarılı olduğunda başka bir fonksiyon çalıştırmak istersek ve o sırada bu işlemi bekletmek istersek bu yapıyı kullanırız. Promise kullanım mantığının aynısıdır sadece daha anlaşılır bir yapıdır.

• Bir fonksiyonun başına async yazıldığında her zaman promise return eder ve await ile içerde çözümlenir.
• Await sadece async fonksiyonların içinde çalışır.
• Await promise setlenene kadar işlemi bekletir ve setlendikten sonra sonucu döndürür.
• Promise’te kullanılan then işlemini await halleder.

Async-await fonksiyon için bir örnek oluşturalım.

Yukarıdaki örnekte bir “deviceList” fonksiyonumuz var. Bunu bir servise istek atıyormuşuz gibi düşünelim.  Bir promise’imiz var ve bu promise’in içinde bir if bloğumuz var. Eğer bu “true” olur ise datalarımız 5 saniye içinde yüklenecek ve resolve edilecek, eğer tersi olur ise data alımında bir sorun olacak ve reject edilecek.

Bu fonksiyonumuz alt kısmında tanımladığımız “getDevices” fonksiyonumuz bir “async” fonksiyon. Try-catch bloğumuz ile await ettiğimiz fonksiyondan dönen cevap başarılı ise fonksiyonumuz konsola datamızı basacak. Başarısız ise catch in içine düşerek “Datalar Alınamadı!!” hatasını göreceğiz. Await ettiğimiz kısımda datalar gelene kadar yani 5 saniye geçene kadar konsolda bir şey göremeyeceğiz. Ancak o işlem bir sonuca vardığında diğer satıra geçecek ve önce bize datamızı ardından da “Datalar Alındı!!” mesajını gösterecek.

Tek bir istekte nasıl bir yazım olduğunu gördük. Birde birkaç tane istek attığımız ve birden fazla await yazdığımızı düşünelim.

Yukarda 3 adet sahte istek fonksiyonu yazdık ve içlerinde birer promise var.  Bunların her birini async fonksiyonumuzun içinde çağırdık ve await verdik. Try -catch bloğumuz her birinin cevabını kontrol edecek ve bir tanesi bile reject olur ise onu catch e düşürüp reject’ten gelen mesajı basacak. Buradaki örnekte çıktımız “reject2!” olacak.

Fakat eğer promiselerin her biri resolve olsaydı ve try bloğunun içinde her bir sonucu konsola yazdırsaydık her bir istek sırası ile çalışacak ve yazdırdığımız sıraya göre çıktı alacaktık. Birde öyle bir örnek yapalım.

Burada konsolda göreceğimiz sonuç resolve2, resolve1, resolve3 olur ama bu çıktıları görmek için 6 saniye bekleyecektik. Yani bütün await olan fonksiyonların çözülmesini ve bize başarılı dönmelerini.

Özetlemek gerekirse sizlere callback, promise ve async-await fonksiyonların tanımını ve nasıl çalıştıklarını anlatmaya çalıştım. Hepsi aslında asenkron çalışan Javascript’i senkron bir hale getirmek için kullanılan yapılardır. Özellikle async-await yapısı kesinlikle kullanılması gereken, kodunuzu daha okunabilir hale getiren ve asenkron fonksiyonları çok basit bir şekilde senkron hale dönüştüren bir yoldur.