Js Async Await / Promise

Selamlar herkese. Bugünkü yazımda sizlere async await ve promise yapılarından bahsetmek istiyorum. İnternette bunlar ilgili çok örnek, çok video var bu yüzden ben direk async await ve promise’i beraber kullandığım bir örnek yapıp, çoğu insanın kafasında ki soru işaretlerini kaldırabileceğimi düşünüyorum.

ES7 ile beraber hayatımıza giren async await kavramı bizi aslında promise’nin uzun yazım tarzından kurtardı ve sürekli işlem sonunda .then() .then() .. yazıp kodlarımızı uzatmak yerine sadece async await yazarak tabi ki try catch ile hata kontrolümüzü yaparak kod bloklarımızı daha kısa tutmamıza olanak sağladı.

Bu gif aslında tam da dediğim olayı anlatmak üzere yapılmış bir gif.

Şimdi size projelerimde kullandığım async await yapısını göstereceğim.

Burada async await bir yapı var, API’den veri çekerken kullandığım bir yapı. Fonksiyon başına async yazmak zaten zorundayız, fonksiyon içinde de hangi işlemimizin beklemesi gerektiğini belirten await yapısını koymamız gerekiyor.

Burada await fecth(…) dediğim de aslında türkçe meali :

Sen apiden veri çekilmesini bekle, aşağıya geçme, ne zamanki veri geldi promise resolve true döndü o zaman alt satırdaki koda geç dedik.

Alt satır içinde aynısı geçerli.

Biliyorsunuz async await’ler sonucunda bir promise döndürürler.

Peki async await kullandık, ama promise yapısına ne zaman gerek var ?

Güzel soru. Bakın şimdi.

Burada sıra ile ve bekleme olmadan sırası ile console.log’larımızı bastıracaktır.

Okey sorun yok, ama mesela “fenerbahçede” işlem yaptırıp, bir bekleme koymak istesem, işlem sonunda aşağıdaki satıra geçmesini istesem bunu nasıl yaparız?

Tabiki de async await ile. Tamam hadi koyalım o zaman.

Hımmm. Bir gariplik var sanki. Tamam async await kullandık ama, biraz tuhaf oldu sanki, 2 yukarıdaki örneğimde, sunucudan veri gelmesini bekliyordu(API), orada bir sunucu işlemi vardı ancak burda işlem falan yok bekleme yapmaz ki :/

Ee ne yapıcaz o zaman. İşte burada promise yapısını da devreye sokmak gerek.

Şimdi kodları inceleyelim.

1. console.log(“sahin”) → Bunda bir sorun yok ekrana yazdırdık.
2. await team(); → Burada team() fonksiyonuna await(bekle) dedik. Team fonksiyonuna gittik. Ve bir promise(söz) verdiğini söyledik. Dedik ki türkçe meali :

Bak promise sen delikanlı adamsın sözünde durursun bende çok inatçı birisiyim (await), sen sözünde durana kadar bir sonraki adıma geçmeyeceğim.

Promise’de tamam diyor lanet olsun al sana söz(resolve), team değişkenine atadığı değeri söz olarak alıp console.log(team) diyerek yazdırabiliriz.

3. await color (); → Aynı söz mantığı burada da var. Burada farklı bir yol olarak, değerimizi resolve içerisine yazdık, ve sözü almak için then() diyerek resolve içerisinde yazan yazıyı aldık ve console da gösterdik. 2 yöntemde uygundur şu aşamada.

Peki eğer sözlerde hata olsa çıktımız nasıl olacak ?

Resolve kaldırdım, haliyle söz veremicek yada reject döndü, bir şekilde hata oldu promise yapısında, işte o zaman çıktımız sadece;

olacaktır. Await koymuştuk ya hani function başına await team();
Promise de hata çıktığı için aşağı satıra geçmedi kod yapısı. Çalıştırmadı. Senkron bir yapımız olmuş oldu yani.

İşte aslında async await / Promise yapılarının tüm mantığı budur.

Umarım faydalı bir yazı olmuştur. Okuduğunuz için teşekkür ederim.

Mutlu kodlamalar :)