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

Telif Hakkı:
Problemi Şikayet Et!HAKKIMDA
Yazılım Uzmanlığı konusunda 11 yılı aşkın süredir Türkiye'de Cumhurbaşkanlığı olmak üzere Kurumlara ve Tüzel kişilere; Yön verme, Yücelik Sağlama ve Büyüme gereksinimlerinden doğan Yazılım ihtiyaclarına çözümler sunmaktayım.
<html>
<body>
<h5>
Yazılım
&
Teknoloji
</h5>
<p>
Dünyasına
Hoş Geldiniz.
</p>
</body>
</html>
Son Eklenen Konular
Nginx Nedir, Nasıl Çalışır, Kurulumu, Hata ve Çözümü
03 Haziran, 2022
Web Site | Web Tasarım | Web Yazılım
27 Nisan, 2022
Html URL ASCII Karakter kodları
04 Mart, 2022
Jquery Alert, Sweet alert, Dialog Kullanımı
03 Mart, 2022
Doğal Seo Çalışması Nasıl Yapılır?
19 Şubat, 2022
En Çok Okunanlar
Google api key nasıl alınır?
26 Eylül, 2013
Youtube Video'sunu Gif Yapma Gif'e Çevirme
17 Ağustos, 2013
linux çeşitleri nelerdir?
13 Ağustos, 2013
Php ile bot nasıl yapılır?
22 Eylül, 2013
Ajax ile sayfa yenilenmeden resim yükleme nasıl yapılır?
04 Ekim, 2013
İlgili İçerikler
-
08 Aralık, 2021 890
Vuejs 3 Routing İşlemleri Ve Router Kullanımı
-
06 Aralık, 2021 1776
Vuejs 3 Kullanımı. Nasıl Kurulur, Vue 3 Gelen Yenilikleriyle Nasıl Proje Geliştirilir?
-
15 Ağustos, 2021 5013
Nuxt.js Nedir? Nuxt.js Nasıl Kurulur? Nuxt.js ile Vue.js Projesi Nasıl Geliştirilir?
-
24 Temmuz, 2021 1478
Nodejs ReactJs Array functions Kullanım Yöntemleri
-
22 Temmuz, 2021 1961
React Nedir, Nasıl Kurulur, Reactjs Öğrenerek Proje Nasıl Geliştirilir?
-
01 Temmuz, 2021 4070
Nextjs kurulumu ve Nextjs ile React projesi nasıl yapılır?