JavaScript Callback, Promise, Async/Await: Kullanım ve Farklar

Callback, Promise ve async/await, JavaScript'te asenkron kodu yönetmek için kullanılan üç yaklaşımdır. Callback bir fonksiyonu başka bir fonksiyona parametre olarak verir, Promise bir işlemin ileride başarılı veya başarısız sonuçlanacağını temsil eden bir nesne sunar, async/await ise Promise'i senkron görünen bir sentaksla kullanmanızı sağlar.

Konularımıza başlamadan önce asenkron ve senkron programlama arasındaki farkı kısa bir özetle açıklayalım.

Senkron programlamada bir fonksiyon bitmeden diğeri çalışmaya başlamaz; yani birbirlerini beklerler, bekleyen fonksiyonun cevabı dönmeden diğerine geçilmez. Asenkron fonksiyonlar ise aynı anda başlatılabilir ve birbirlerinin sonucunu beklemeden çalışmaya devam eder; hangisinin sonucu önce çıkarsa o sonuç önce görünür. JavaScript tek bir iş parçacığıyla (single-thread) çalışır, ama event loop (olay döngüsü) sayesinde asenkron işlemleri bloklamadan yönetir. Yani JavaScript bir satırı okuyup çıktısını beklemeden diğer satıra geçebilir; asenkron işlemleri bir kuyruğa alır ve sırası geldikçe çalıştırır.

Aşağıdaki tablo bu üç yaklaşımı kısaca karşılaştırır.

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

Callback, bir fonksiyonu başka bir fonksiyona parametre olarak verip kullanmaya denir. Bu şekilde kullanarak fonksiyonun belirli bir işlem bittikten sonra ç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; süresi az olan hangisi olursa o önce çıkacaktır. Callback kullanarak bunun istediğimiz sırayla çıkmasını istersek, şu şekilde yapabiliriz.

Callback kullanmaktaki amacımız, önce hangi fonksiyonun çalışacağını ve sonucu ne zaman göstereceğini belirlemektir.

Fakat callback kullanımında birkaç problem vardır:

• Fonksiyondan dönecek hataları çözecek standart bir yöntemin olmaması, yani hataların sessizce yutulması
• Fonksiyonun beklenenden erken, hiç, ya da birden fazla kez çağrılması
• "Callback hell" denilen, iç içe çok fazla callback kullanılması ve kodun okunurluğunun ve yönetiminin zorlaşması

Yukarıdaki örnekte sıralayacağımız değer sayısı artsaydı, çok daha fazla iç içe callback yazmamız gerekecekti. Callback fonksiyonlardaki bu problemler yüzünden Promise kavramı oluşturuldu.

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

Promise, adının Türkçe karşılığından da anlaşılacağı üzere bir "söz"dür. Mesela internetten bir sipariş verdiğinizde, size bir sipariş sözü verilir; yani elinize bir mesaj veya mal geçecektir. Buna "promise" denir. Bildirimi beklemeye "pending", cevap başarılıysa yani sipariş size ulaşacaksa "resolved", siparişiniz iptal olduysa "rejected" denir. Başarısız durumda hata çözümleme (error handling) yapılarak başka bir çözüm yoluna gidilir.

• Bir Promise'in değeri sonradan değiştirilemez, yani immutable'dır.
• Bir Promise sadece bir kez başarılı veya başarısız olur.
• Promise oluştururken bize iki işlev sunulur: resolve ve reject.
• 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şturup döndürecek. Oluşturduğumuz Promise'teki if bloğu true ise resolve olacak ve then içinde çözülerek gönderdiğimiz order parametresini dönecek. Eğer false olursa reject olacak ve catch bloğunda yakalanıp konsolda gösterilecek.

Fakat callback fonksiyonlarda oluşan callback hell sorunu burada da oluşmaya başladı. Bunun çözümü için async/await fonksiyonlar kullanılmaya başlandı. Bu fonksiyonlar, geliştirici ve kodu okuyan insanlar için kodun asenkron olmasına rağmen senkron görünmesini sağlar.

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

Bu fonksiyonların amacı, birbirini beklemeyen asenkron fonksiyonları senkron gibi okunabilir hale getirmemizi sağlamaktır. Bir fonksiyon başarılı olduğunda başka bir fonksiyon çalıştırmak istediğimizde ve bu sırada bekleme yapmak istediğimizde bu yapıyı kullanırız. Mantık olarak Promise ile aynıdır, sadece yazımı daha anlaşılırdır.

• Bir fonksiyonun başına async yazıldığında o fonksiyon her zaman bir Promise döner ve içeride await ile çözülebilir.
• 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 kullandığımız then işlemini await üstlenir.

Async/await fonksiyonu için bir örnek oluşturalım.

Yukarıdaki örnekte bir "deviceList" fonksiyonumuz var; bunu bir servise istek atıyormuş gibi düşünelim. Bir Promise'imiz var ve bu Promise'in içinde bir if bloğumuz var. Bu true olursa datalarımız 5 saniye içinde yüklenip resolve edilecek; tersi olursa data alımında bir sorun olacak ve reject edilecek.

Alt kısımda tanımladığımız "getDevices" fonksiyonu bir async fonksiyondur. Try/catch bloğumuz, await ettiğimiz fonksiyondan dönen cevap başarılıysa fonksiyonumuz konsola datamızı basacaktır. Başarısız olursa catch bloğuna düşüp "Datalar Alınamadı!!" hatasını göreceğiz. Await ettiğimiz kısımda datalar gelene, yani 5 saniye geçene kadar konsolda bir şey göremeyeceğiz; işlem sonuca vardığında ise önce datamızı, ardından "Datalar Alındı!!" mesajını göreceğiz.

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

Yukarıda üç adet sahte istek fonksiyonu yazdık ve her birinin içinde bir Promise var. Bunların her birini async fonksiyonumuzun içinde çağırıp await verdik. Try/catch bloğumuz her birinin cevabını kontrol edecek; bir tanesi bile reject olursa onu catch'e düşürüp reject'ten gelen mesajı basacak. Buradaki örnekte çıktımız "reject2!" olacak.

Promise'lerin her biri resolve olsaydı ve try bloğunun içinde her sonucu konsola yazdırsaydık, her istek sırayla çalışıp yazdırdığımız sıraya göre çıktı alacaktık. Buna da bir örnek yapalım.

Burada konsolda göreceğimiz sonuç resolve2, resolve1, resolve3 sırasıyla olur, ama bu çıktıları görmek için yaklaşık 6 saniye bekleriz; çünkü tüm await'lerin çözülmesini ve bize başarılı dönmesini bekleriz.

Nelere Dikkat Etmelisiniz?

• Callback'leri sadece çok basit, tek seviyeli senaryolarda kullanın; birden fazla adım iç içe girdiğinde Promise veya async/await'e geçin.
• Async fonksiyonlarda hata yönetimini try/catch ile mutlaka yapın; aksi halde reddedilen bir Promise sessizce geçip önemli bir hatayı gizleyebilir.
• Birden fazla bağımsız asenkron işlemi paralel çalıştırmak istediğinizde, art arda await yazmak yerine Promise.all gibi yöntemleri değerlendirin; bu, toplam bekleme süresini kısaltır.

Özetlemek gerekirse, callback, Promise ve async/await fonksiyonlarının tanımını ve nasıl çalıştıklarını anlatmaya çalıştık. Hepsi aslında asenkron çalışan JavaScript'i daha yönetilebilir hale getirmek için kullanılan yapılardır. Özellikle async/await yapısı, kodunuzu daha okunabilir hale getiren ve asenkron fonksiyonları basit bir şekilde senkron gibi gösteren bir yoldur.

Sıkça Sorulan Sorular

Callback yerine her zaman Promise mi kullanmalıyım?

Zorunlu değil, ama çoğu modern kodda önerilir. Basit, tek seferlik geri çağırmalarda callback yeterli olabilir; birden fazla asenkron adım birbirine bağlıysa Promise veya async/await daha okunaklı sonuç verir.

Async/await, Promise’in yerini mı alıyor?

Hayır, async/await Promise üzerine kurulu bir sentakstır. Arka planda hala Promise çalışır; async/await sadece bu Promise'leri daha okunabilir bir şekilde yazmanızı sağlar.

Async/await ile hata yönetimi nasıl yapılır?

Try/catch bloğu kullanılır. Await edilen Promise reject olursa, kontrol catch bloğuna geçer ve hatayı orada yakalarsınız.

Birden fazla asenkron işlemi aynı anda çalıştırmak için ne kullanmalıyım?

Promise.all veya Promise.allSettled gibi yöntemleri kullanın. Bunlar birden fazla Promise'i paralel başlatıp hepsinin sonuçlanmasını tek seferde beklemenizi sağlar.

İlginizi Çekebilecek Diğer Yazılım Rehberlerimiz

React'te asenkron veri çekme senaryolarını useEffect ile nasıl yöneteceğinizi merak ediyorsanız React Hooks Nedir ve Nasıl Kullanılır? yazımıza göz atabilirsiniz. Farklı bir dil öğrenmek isterseniz Go Programlama Diline Giriş yazımız iyi bir başlangıç noktasıdır.

Referanslar

• MDN Web Docs - Promise
• MDN Web Docs - Async/Await