Bu yazıda async/await fonksiyonların neden ve nasıl kullanıldığını açıklamaya çalışacağım.
Şimdi elimizde yukarıdaki gibi bir fonksiyon olsun. Javascript, senkron ve single-thread bir yapıya sahiptir. Dolayısıyla yukarıdaki kod, öncelikle ‘cat’ çıktısını ekrana basar ancak bizim setTimeout içerisindeki console.log çıktısını yazdırmayı beklemeden bir alt satıra geçer ve ‘butterfly’ çıktısını, iki saniye sonra ise ‘dog’ çıktısını ekrana basar. Peki ya biz iki saniye bekleyip ‘dog’ çıktısını ekrana bastıktan devam etmesini istiyorsak?
Bunun daha güzel ve uygulanabilir bir örneğini daha iyi anlamak açısından setTimeout kısmında bir api’ ye istek atarak response’ tan aldığımız bir değeri tanımladığımız bir değişkene atayıp sonucun ne olacağını görmek daha doğru olacaktır. Öyleyse aşağıdaki kodu inceleyelim.
Biz burada fetchAgeofEmpires fonksiyonunda bir api’ ye istek atarak dönen response içerisinden bir değeri bir değişkene atayıp bunu getAgeofEmpires fonksiyonu içerisinde yazdırmak istedik. Javascript ise bizim api’ den gelen response’ un bitmesini beklemeden bir alt satırı çalıştırdığından ‘expansion’ değişkeni initialize edilmeden yazdırılmaya çalışıldı ve haliyle ‘expansion is not defined’ hatası alındı. Kod çıktısı aşağıdaki gibidir.
Peki biz bu sorunun önüne nasıl geçebiliriz? Yani Javascript’ e sen önce çağrılan fonksiyonun işini bitir sonra bir alt satırı çalıştır’ ı nasıl söyleyebiliriz? Bunun için async/await fonksiyonlar devreye giriyor. Burada bilmemiz gereken en önemli şey ise await denilerek işleminin sonucu alınana kadar beklenmesini istediğimiz fonksiyonun Promise bir değer return etmesi gerektiğidir. Şimdi aşağıdaki kodu inceleyelim.
Yukarıda sonucunun beklenmesini istediğimiz fonksiyonumuzu Promise bir değer return edecek şekilde düzenledik. Nerede sonlanmasını istiyorsak da resolve(true) kısmını o kod bloğu içerisine yazdık. Await fonksiyonumuzu çağırdığımız fonksiyonumuza da async diyerek artık bu fonksiyonun asenkron çalışması gerektiğini söyledik. Bunların sonucunda ise expansion değişkenine sorunsuz bir şekilde yapılarak ekrana yazdırılmış oldu. Son olarak kodun çıktısı ise aşağıdaki gibi olmuştur.
