Javascipt Callback, Promise, Async Await kullanımı ve Farkları

Javascipt ecmascript6 asenkron işlem sıra kontrollerinin Callback, Promise, Async Await kullanımı ve Farklarını örnekleriyle birlikte sizler için derledim.

• İçindekiler
• Asenkron Nedir?
• Asenkron Callback Sıralı İşlem Neden Kullanılır?
• Asenkron Callback Sıralı İşlem Yöntemleri?
• Callback Hell Kullanımı
• Promise Chain Kullanımı
• Async Await Kullanımı

Asenkron Nedir?

Javascipt her istek kendi içerisinde asenkron programlama non bloking Event based olarak çalışır. Aynı anda 2 istek geldiğinde sıraya koymaz ikisinide işleme alır hangisi daha önce biterse onu geri döner bekleme yapmaz.

Diğer yazılım dillerinde örnek php thread basic sistemde istekler sıraya konarak senkron programlama olarak çalışır. Listelenmiş istekler sıraya konur ve biri bitmeden diğerine geçmez.

Asenkron Callback Sıralı İşlem Neden Kullanılır

Projelerimizde ilk olarak ürünler, sonra ona ait diğer veriler listelenmesi gibi sıralı işlemlere ihtiyac duyarız yani ilk olarak ürün id listeden almamız gerekiyor ki sonra ürün bilgilerini çekelim. Ürün id gelmeden ürüne ait bilgileri 2 işlemde çekmemiz gerekiyor.

İşte burada devreye sıralı işlemleri bizim kontrol etmemiz gerekiyor. Aksi taktirde sistem hata ile karşılaşır çünkü ürünler listesi geç gelebilir asenkron olarak çalıştığında 2 işlemde aynı anda çalışacağı için sırayla çalışan bir yapı kurmamız gerekiyor.

İlk işlemden gelen sonuç callback aşamasında 2 işlemi hata almadıysak gelen ürünid gore bizim kontrolümüz ile yapılandırmamız gerekli.

Asenkron Sıralı İşlem Yöntemleri?

Callback Hell, Promise Chain ve Async Await olarak 3 farklı yöntem olarak kullanım yapabiliriz. Örnek Kullanımları:

    const user = { id: 10, name: 'ismail' };
    const friends = [ { id: 11, name: 'kenan' }, { id: 12, name: 'murat' } ];

    const getUser = () => {
      return new Promise((resolve, reject)=>{
        resolve(user);
      })
    }

    const getFriends = (userId) => {
        return new Promise((resolve,reject) => {
            resolve(friends);
            //reject('Bir Hata Oluştu');
        })
    }
  

Callback Hell Kullanımı

    //callback hell (1. Yöntem)
    let userId;
    getUser()
    .then(function (user) {
        userId = user.id;
        console.log(userId);
        getFriends(userId).then(function (friends) {
            console.log(user);
            console.log(friends);
        });
    });
  

Promise Chain Kullanımı

Promise callback function olarak aldığı 2 tane parametre var resolve, reject işler yolunda giderse resolve, bir sıkıntı var reject kullanıyoruz.

    // promise chain = zincir demek (2. Yöntem)
    getUser()
      .then((data)=>{
        console.log(data);
        return getFriends(data.id)
      })
      .then((friends) => {
            console.log(friends);
      })
      .catch((error)=>{
        console.log(error);
      })
  

Async Await Kullanımı

async çalışabilmeniz için fonksiyon olarak async tanımlamanız gerekiyor. Mantığı işlem sırası belirterek çalışabilmenizi sağlıyor. Javascript asenkron bir dil ve işlem sırası olmadan tüm işlemler aynı anda çalışabilir demiştikya burada Async fonksiyonunda await keywordü ile kontrolünü ve işlem sırasını biz belirleyebiliyoruz.

async await yapısında bir işlem bitmeden diğer işleme geçme yapmaz asenkron olan javascript dilinde bu önemli bir özellik callback, promise ile de bu işlemi yapabiliriz ama en temiz kod ve çalışma mantığı async await yapısıdır.

    //async await yapısı (3. Yöntem)
    async function asenkronAkis(){
      try{
        const user    = await getUser();
        const friends = await getFriends(user.id);
        console.log(user);
        console.log(friends);
      }catch(error){
        console.log(error);
      }

    }

    asenkronAkis();