ECMAScript 6 – Async / Await Keywordleri

Merhaba,

Bu makalemizde JavaScript’in doğal olan asenkron yapısına karşı hakimiyet sağlamamıza yarayan Async ve Await keywordleri üzerine konuşuyor olacağız.

İlk olarak yukarıda da bahsedildiği gibi JavaScript’in asenkron yapısı üzerine konuşalım.
JavaScript anatomik olarak asenkron yapıya sahip script dilidir. Yani çağrılan fonksiyonları satır satır işlememekte bilakis asenkron temelli paralel bir çalışma sergilemektedir ve çıktıları işlem sıralamasından ziyade yapılan işlemlerin süreleri baz alınarak belirlemektedir.

let metot1 = () => {
    console.log("metot1");
};
let metot2 = () => {
    console.log("metot2");
};
let metot3 = () => {
    console.log("metot3");
};
metot1();
metot2();
metot3();

Yukarıdaki kod bloğunu incelerseniz eğer sırasıyla “metot1”, “metot2” ve “metot3” çağrılmakta ve bu süreç asenkron bir şekilde ceyran etmektedir. Çıktı olarak ise sırasıyla;
metot1
metot2
metot3
sonucu alınmaktadır.
“La hoca bunun neresi asenkron layn?” diyenleriniz olabilir. Tabi burada fonksiyonlarımızın işlev maliyetleri neredeyse yok denecek kadar az olduğundan ve işlev süreleri ise mikrosaniye cinsinden hemen hemen birbirlerine yakın olduğundan çıktı olarak çağrılma sırasına uygun bir şekilde sonuçlar elde edilmiştir. Ama aşağıdaki gibi fonksiyonların işlev süreleriyle oynarsak;

let metot1 = () => {
    setTimeout(() => {
        console.log("metot1");
    }, 5000);
};
let metot2 = () => {
    setTimeout(() => {
        console.log("metot2");
    }, 3000);
};
let metot3 = () => {
    setTimeout(() => {
        console.log("metot3");
    }, 4000);
};
metot1();
metot2();
metot3();

çıktı olarak;
metot2
metot3
metot1
sonucunu verecektir. Neden mi? “metot1″in beş saniye, “metot2″nin üç saniye ve “metot3″ün dört saniye işlev süresi vardır. Dolayısıyla süreç asenkron işleyeceğinden dolayı tüm metotlar aynı anda paralel bir şekilde tetiklenecek ve işlev süresi kısa olan öncelikli çıktı verecektir. Nedeni budur…

“Peki hoca bu fonksiyonları bir başka fonksiyon içerisinde çağırsak… O zaman senkron olmaz mı?” diye söylediğinizi duyar gibiyim. Eee hadi dediğinizi uygulayıp, beraber inceleyelim.

let metot4 = () => {
    metot1();
    metot2();
    metot3();
};
metot4();

Yukarıdaki gibi oluşturduğumuz fonksiyonu çağırdığımızda gene benzer sonuçla karşılaşıyoruz.
metot2
metot3
metot1

Hatta araya farklı işlemler tıkıştırıp deneyelim;

let metot4 = () => {
    metot1();
    console.log("ara işlem 1");
    metot2();
    console.log("ara işlem 2");
    metot3();
};

metot4();

ara işlem 1
ara işlem 2
metot2
metot3
metot1
Yok! Nuh diyor, peygamber demiyor…

“Eee, peki bu durumda ne yapıyoruz hoca?”
Eskiden metotlarımızı callback fonksiyonlara çevirerek öncelikleri zahmetli bir şekilde belirtebiliyorduk. Tabi sonraki süreçlerde aynı mantıkta callback fonksiyonlarını pratik kullanabilmek için geliştirilmiş Promise Yapısını kullanarak çalışmalarımızı icra ediyorduk.

Promise yapısını kullanarak süreci nasıl senkron hale getirdiğimizi inceleyelim.

let metot1 = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("metot1");
            resolve("");
        }, 5000);
    });
};
let metot2 = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("metot2");
            resolve("");
        }, 3000);
    });
};
let metot3 = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log("metot3");
            resolve("");
        }, 4000);
    });
};

Fonksiyonlarımızı Promise yapısına çevirdikten sonra aşağıdaki gibi kullanabilmekteyiz;

metot1().then(() =>
    metot2().then(() =>
        metot3().then()
    )
);

İşte bu şekilde kullandığımızda metotlarımız belirtilen sırada tetikleneceğinden dolayı sistem senkron işlemiş olacaktır ve beklenen çıktı alınacaktır.
metot1
metot2
metot3

“La hoca, biz JavaScript’te senkron çalışmak için bunca uğraşa mecburmuyuz?” diye serzenişte bulunduğunuzu da duyar gibiyim. Durun… Hemen yelkenleri suya indirmeyin. Bu içeriği boşuna yazmıyoruz 🙂 Tabi ki de gelecek vaadeden bir dil kendindeki bu aksaklığı daha pratik bir şekilde çözüme kavuşturmak için çabalayacaktır. Dolayısıyla ECMAScript çabalamış ve netice olarak async ve await keywordleri ile süreci senkron hale getirme imkanı tanımıştır.

Burada C# ile bir kıyas yapmak istiyorum. C#, özü itibariyle senkron bir programlama dilidir. Lakin asenkron programalama yapabilmek için birçok yöntem arasında async ve await komutları kullanılır. async ile işaretlenmiş metot içerisinde asenkron bir işlem uygulanacağı metoda bildirilir ve await keywordü ile de hangi işlem olduğu işaretlenir. Yani C#’ta async ve await keywordleri senkron çalışmayı asenkron hale getirmektedir.

ECMAScript’te ise durum tam tersidir. Özü itibariyle asenkron olan bir dildeki işleyişi senkron gibi yönetebilmek için yine async ve await keywordleri kullanılır.

ECMAScript’te async ve await keywordlerini kullanırken dikkat etmeniz gerekenler;

• Kullanılacak fonksiyon async ile işaretlenip metot içerisinde asenkron bir işlem olacağı bildirilmelidir,
• await ile işaretlenecek olan fonksiyon geriye Promise nesnesi döndürmelidir,
• Örneklerde kullanmadık lakin sizler kesinlikle try – catch yapısı eşliğinde kontrol mekanizmasında çalışınız,
• await keywordüne null değerini verirseniz bir hataya neden olmamaktadır,
• await keywordüne Promise nesnesi haricinde bir değer verirsek direkt olarak pass(geç) edecektir. Benzer mantıkla geriye Promise dönmeyen herhangi bir fonksiyon verirseniz eğer gene pass işlemine tabi tutulacaktır.

Yukarıda metotların tanımlandığı en sonuncu Promise geri dönüşlü hallerini baz alarak aşağıdaki gibi async ve await keywordlerini kullanabiliriz.

async function executeAsync() {
    await metot1();
    await metot2();
    await metot3();
}
executeAsync();

Süreç senkron işleyeceğinden dolayı çıktı beklendiği gibi olacaktır.

Evet… Bir yazımızın daha sonuna gelmiş bulunmaktayız. Bol bol faydalanmanız dileğiyle…

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…