Javascript Async Await Nedir Nasıl Kullanılır? (yukarı)
Asenkron Çalışma Nedir? (yukarı)
Asenkron bir nevi sıralı çalışma diyebiliriz. Bir fonksiyonun çalışması başka bir fonksiyondan gelen bir değere ya da o fonksiyonun başarılı olup olmamasına bağlı çalışması gerekebilir. Örnek vermek gerekirse bir kullanıcıdan şifre kullanıcı adını aldınız daha sonra bunun bilgilerini almak için önce o kullanıcının kullanıcı adı ve şifresi doğru mu gibi bir sorgulama sonrasında kullanıcı bilgilerini almanız gerekmektedir. Bu tarz durumlarda javascript’de promise kullanırız ve async await ile bunu daha anlaşılır bir yapıya bürümüş oluruz.
Kısaca Promis’i hatırlayalım (yukarı)
Promise söz vermek mânasına gelir ve bir işin bitip bitmediği hususunda kesin bir dönüş yapar. Kullanıcı adı doğruysa resolve yaparız eğer kullanıcı adı şifre doğru değilse reject ile reddederiz. Burada fonksiyonu kullanırken then ve catch ile hata olup olmadığını yakalarız.
Çok Promise çok söz demektir (yukarı)
Çok fazla işlem sırasından geçmesi gereken bir yapınız varsa 1’den fazla promise kullanırız bu durumlarda then ve catch’leri ayırmak her birinden dönen değerleri bir bakışta anlamak ve diğer promise ile olan bağlantısını kurmak zor olmaktadır.
Çözüm: await ile bekletmek (yukarı)
Async await yapısı ile try cathc yapısı kullanılır ve her bir fonksiyonun önce bitmesini bekle daha sonra diğerine geç diyebiliriz. Örnek bir kod yapısına bakalım. Bu örneği daha önce anlattığım Javascript Promise yazısında yazmıştım. Şimdi bunu async await ile nasıl düzenleriz ona bakalım.
Kod:
async function getResultWithAwait() {
try {
const name = document.querySelector("#name").value;
const nameControl = await checkName(name);
displayResult.textContent = "Kullanıcı:" + result;
console.log("İsim doğru: " + result);
} catch (error) {
displayResult.textContent = error;
console.warn("Hata var" + error);
}
}
Burada 2 nokta var. Fonksiyon başındaki async ifadesi. Bununla bu fonksiyonun bir asenkron yapıda olacağını belirtiyoruz. Peki Promise ile kullandığımız then cathc nerede? nameControl adlı değişkende bir ifade görüyoruz. await checkName(name) . Await ile bu fonksiyonun bir promise yapıda olduğu dolayısıyla bir resolve ya da reject olayına sahip olduğunu belirtiyoruz. Eğer checkName adlı fonksiyon resolve olursa resolve ile döndürülen şey nameControl değişkeninin içinde yer almış oluyor.
Bütün catch’ler tek bir yerde (yukarı)
Peki resolve değil de reject olursa fonksiyonumuz? Burada ise try catch yapısındaki catch bizi karşılıyor. try içerisinde herhangi bir await ile belirlenen fonkiyon reject’e düşerse try orada kesilir ve catch’e düşer. Yani bütün Promise rejectleri try yapısındaki catch’e bağlıdır.
Async await yapısı gerçekten önemli ve çok kullanılmaktadır. Yorumlar kısmına takıldığınız yerleri yazarsanız yardımcı olmaya çalışırım. Burada
mozilla sitesinde açıklamalar mevcut isterseniz bakabilirsiniz.
