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ı
• Callback Promise kullanarak apiden Axios ile veri çekelim
• Async Await Kullanımı
• Async Await kullanarak apiden json veri çekelim

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);
      })
  

Promise 2. Örneğimiz resolve,reject yapısını iyi kavramamız için.

const islemYap = (dgr) => {
  return new Promise ((resolve, reject) => {
    if(dgr === 1){
      resolve("Başarılı");
    } else {
      reject("Hatalı");
    }
  })
}

islemYap(1)
.then((data) => {
  console.log(data);
})
.catch((e) => {
  console.log(e);
});

Callback Promise kullanarak apiden Axios ile veri çekelim

Mantığı dahada kavramak için bir örnek daha yapalım ve bu sefer promise ve promise.all işlemleri ve axios ile bağlanarak json veriyi çekelim.

  //Kurulum komutu:
  npm install --save axios

  //axios ile apiye bağlanalım ve userları veri listesi olarak çekelim
  const getUsers = () => {
    return new Promise (async (resolve, reject) => {
      const { data}  = await axios("https://jsonplaceholder.typicode.com/users");
      resolve(data);
    })
  }

  //axios ile apiye bağlanalım postid verisini çekelim
  const getPost = (postid) => {
    return new Promise (async (resolve, reject) => {
      const { data}  = await axios("https://jsonplaceholder.typicode.com/posts/" + postid);
      resolve(data);
    })
  }

  const users = await getUsers();
  const post  = await getPost(1);

  console.log(users);
  console.log(post);

  //nodejs dosyamızı çalıştıralım
  npm callbackaxios.js

  //Promise.all ile topluda yapabiliriz. Tüm promise'ları çalıştırabiliyoruz
  Promise.all([getUsers(), getPost(1)]).then(console.log).catch(console.log);

  //nodejs dosyamızı tekrar çalıştıralım
  npm callbackaxios.js

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();
  

Async Await kullanarak apiden json veri çekelim

Mantığı kavramak için bir örnek daha yapalım ve bu sefer sıralı işlem, async ile asenkron, await kullanarakta veri gelene kadar bekle diyerek fetch ile bağlanarak json veriyi çekelim.

    //fetch yoksa kuralım
    npm install node-fetch

    //fetch projemize dahil edelim
    const fetch = require("node-fetch");

    async function asenkronVeriCek(){
      //await beklemesini sağlıyor.
      const users  = await (
        await fetch("https://jsonplaceholder.typicode.com/users")
      ).json();

      const post  = await (
        await fetch("https://jsonplaceholder.typicode.com/posts/1")
      ).json();

      console.log("Users:", users);
      console.log("Post:", post);
    }


    asenkronVeriCek();
  

Async Await kullanarak apiden axios ile json veri çekelim

Mantığı dahada kavramak için bir örnek daha yapalım ve bu sefer sıralı otomatik işlem, async ile asenkron, await kullanarak veri gelene kadar bekle, axios ile bağlanarak json veriyi çekelim.

  //Kurulum komutu:
  npm install --save axios

  const axios = require('axios');

  ( // anonim çalışması için
  async function asenkronVeriCek(){
    //await beklemesini sağlıyor.
    const { data:users}  = await axios("https://jsonplaceholder.typicode.com/users");

    const { data:post }  = await axios("https://jsonplaceholder.typicode.com/posts/1");


    const { data:post2 }  = await axios("https://jsonplaceholder.typicode.com/posts/2");


    console.log("Users:", users);
    console.log("Post:", post);
    console.log("Post2:", post2);
  }
  )();

  //asenkronVeriCek(); pasif halde çünkü anonim çalışsın dedik
  
  //nodejs dosyamızı terminalden komut ile çalıştıralım
  node callbackaxios.js