JavaScript ES7 async await

ES7 ile birlikte JavaScript asenkron programlamayı kolaylaştıran async ve await kullanımı ile ilgili bilgiler yer alıyor.

async ve await nedir?

async ve await ES7 ile birlikte asenkron programlama yapmayı daha da kolay hale getiren anahtar kelimelerdir.

async anahtar kelimesi fonksiyon sonucunun bir Promise olduğu belirtirken await ise sonucu Promise olan fonksiyonun bitmesini bekler.

Şimdi buraya nereden geldik bakalım.

<script>
'use strict';
  let adi = null;

  // Uzun bir AJAX veya Fetch API isteği
  function islem() {
    setTimeout(() => {
      adi = 'Yusuf SEZER';
    }, 2000);
  }

  // Yazdırma işlemi
  function yazdir() {
    setTimeout(() => {
      console.log(adi);
    }, 1000);
  }

  islem();
  yazdir();
</script>

JavaScript mantıklı olarak ilk bitecek olan fonksiyonu tamamlıyor.

Ama sonuç istediğimiz gibi olmadı.

O zaman callback yöntemini kullanalım.

<script>
'use strict';
  let adi = null;

  // Uzun bir AJAX veya Fetch API isteği
  function islem(callback) {
    setTimeout(() => {
      adi = 'Yusuf SEZER';
      callback();
    }, 2000);
  }

  // Yazdırma işlemi
  function yazdir() {
    setTimeout(() => {
      console.log(adi);
    }, 1000);
  }

  islem(yazdir);
</script>

İstediğimiz sonuç ortaya çıktı.

Ancak callback yöntemi fonksiyonların çoğalmasına ve kodların karmaşık olmasına neden oluyor.

Birde Promise yapısını kullanalım.

<script>
'use strict';
  let adi = null;

  // Uzun bir AJAX veya Fetch API isteği
  function islem() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        try {
          // Uzun işlemler
          adi = 'Yusuf SEZER';
          resolve();
        } catch (hata) {
          reject(hata);
        }
      }, 2000);
    });
  }

  // Yazdırma işlemi
  function yazdir() {
    setTimeout(() => {
      console.log(adi);
    }, 1000);
  }

  islem()
    .then(yazdir)
    .catch(hata => console.log(hata));
</script>

Promise yapısı ile islem sonrası yazdir fonksiyonun çalışacağını anlıyoruz sanki kodlar biraz daha anlamlı hale geldi.

Ancak birbirine bağlı birden fazla Promise yapısı JavaScript Chaining Metotlar yazısında yer alan durumun ortaya çıkmasına neden olur.

Burada ES7 ile birlikte gelen async ve await anahtar kelimeleri imdadımıza yetişiyor.

<script>
'use strict';
  let adi = null;

  // Uzun bir AJAX veya Fetch API isteği
  function islem() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        try {
          // Uzun işlemler
          adi = 'Yusuf SEZER';
          resolve();
        } catch (hata) {
          reject(hata);
        }
      }, 2000);
    });
  }

  // Yazdırma işlemi
  function yazdir() {
    setTimeout(() => {
      console.log(adi);
    }, 1000);
  }

  async function calistir() {
    await islem();
    yazdir();
  }

  calistir();
</script>

İşe yarar bir örnek verelim.

<script>
'use strict';
  async function toplaGel() {
    let sonuc = await fetch('https://jsonplaceholder.typicode.com/users');
    let veriler = await sonuc.json();

    console.log(veriler);
  }

  toplaGel();
</script>

Promise ile kullanımı da şöyle olacaktı.

<script>
'use strict';
  fetch('https://jsonplaceholder.typicode.com/users')
    .then(sonuc => { return sonuc.json(); })
    .then(veriler => console.log(veriler));
</script>

Son olarak işlemi biraz daha karıştıralım.

<script>
'use strict';
  async function toplaGel() {
    let sonuc = await fetch('https://jsonplaceholder.typicode.com/users');
    let veriler = await sonuc.json();
    return veriler;
  }

  toplaGel()
    .then(veriler => console.log(veriler));
</script>

JavaScript Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.