ES6 Promise ve Async/Await ile JavaScript'te veri işlemleri yapmak, daha hızlı ve verimli kod yazmanızı sağlar Bu makalede, Promise ve Async/Await konularını derinlemesine öğrenecek ve kullanımına dair pratikler yapabileceksiniz JavaScript'te veri işlemlerini en etkili şekilde gerçekleştirmek isteyenler, bu makaleyi kaçırmayın!
JavaScript, günümüzün en popüler programlama dillerinden biridir. Ancak JavaScript, asenkron işlemlerde bir miktar karmaşıklık içerir. ES6 Promise ve Async/Await, JavaScript'te veri işlemlerinin daha okunaklı ve basit hale getirilmesine yardımcı olan iki modern tekniktir. Bu makalede, ES6 Promise ve Async/Await'in kullanımı ele alınacak ve veri işlemlerinin daha basit ve etkili hale getirilmesinin nasıl sağlandığı açıklanacaktır.
ES6 Promise Nedir?
ES6 Promise, JavaScript'te asenkron işlemleri kolaylaştıran ve okunaklı hale getiren bir özelliktir. Bir Promise, bir işlem sonucunu veya hata durumunu temsil eden bir JavaScript nesnesidir. Promise, API çağrıları, dosya okuma/yazma gibi işlemleri kolaylaştırır ve kodun daha az girintili hale gelmesini sağlar. Bu nedenle, Promise, JavaScript'te çok yaygın olarak kullanılır.
Bir Promise, üç durumu temsil edebilir: bekleyen, çözülmüş veya reddedilmiş. Bekleyen durum, işlemin tamamlanmamış olduğunu gösterir. Çözülmüş durum ise işlemin başarılı bir şekilde tamamlandığını gösterirken, reddedilmiş durum ise işlemin hatalı bir şekilde tamamlandığını gösterir.
Promise, asenkron işlemleri daha anlaşılır hale getiren bir dizi yöntem sunar. Promise zincirlerinin kullanılması sayesinde birden fazla asenkron işlemi sırayla belirli bir sırayla çalıştırabilir ve bir sonraki işlem için önceki işlem tamamlandığında bekleyebilirsiniz.
Promise'leri kullanarak, kodunuzu daha kolay yönetebilir ve hataları daha rahat bir şekilde yönetebilirsiniz. Ayrıca, kodunuz daha az girintili hale gelebilecek ve daha okunaklı hale gelecektir.
Async/Await Nedir?
JavaScript'te veri işlemleri yapmak için kullanılabilecek modern bir teknik olan Async/Await, asenkron işlemleri yönetmek için idealdir. Bu teknik, async fonksiyonların oluşturulmasına ve işlemlerin yürütülmesine olanak sağlamaktadır. Async sözcüğü, asenkron demektir ve aynı anda birden fazla işlemin gerçekleştirilmesine izin verir.
Async/Await, önceki yöntemlere kıyasla daha düzenli ve kullanımı daha kolaydır. Bu modern teknik kullanılarak, JavaScript kodu daha az yazılır ve daha az hata ortaya çıkar. Async/Await kullanılarak oluşturulan kodlar, Promise zincirlerine kıyasla daha okunaklı ve anlaşılırdır. Async fonksiyonları içeren JavaScript kodları, hatanın yönetimi açısından Promise zincirlerine göre daha iyi bir yapıya sahiptir.
Async/Await kullanılarak yapılan işlemler için herhangi bir işlem sırası veya sıralama belirtilmemiştir. Bu nedenle, işlemlerin yürütülmesi daha hızlı olur. Async/Await, AJAX, HTTP istekleri, sunucu tarafı işlemleri ve daha birçok işlem için kullanılabilir. Eğer bir web sayfasının ana işlevlerinde Asenkron işlemler kullanılmamışsa, sayfanın yavaş açılması ve işlem yapması beklenir.
Async Fonksiyonlar
JavaScript'te birçok zaman asenkron olarak çalışan işlemler vardır. Async fonksiyonlar, bu asenkron işlemlerin yürütülmesi için kullanılır ve Promise nesnelerinin üzerine kuruludur. Genellikle bunlar, istek-yanıt işlemleri gibi veri işleme işlemleridir ve callback fonksiyonları yardımıyla geri dönüş yaparlar. Ancak, bu şekilde kod yazmak çok zor ve hataya açık olabilir. İşte burada Async fonksiyonlar devreye girer.
Async fonksiyonlar, JavaScript'te Promise zincirlerinde yer alan birçok problemi hafifletmek için tasarlanmıştır. Bu sayede basit, düzenli ve daha okunaklı bir kod yazılabilir. Ayrıca Async fonksiyonlar, hata yönetimi açısından da daha iyi bir kontrol sağlar. Bu fonksiyonlar, Promise nesnelerinin üzerine kuruludur ve Promise döndürmek yerine bir değer döndürürler. Bu sayede daha kolay bir kullanım ve daha az kod yazma imkanı sağlarlar.
Bir Async fonksiyonu tanımlarken, fonksiyonun başına "async" anahtar kelimesini eklemek gerekir. Bu fonksiyonun herhangi bir yerinde await anahtar kelimesini kullanarak işlem yapılabilir. await, Promise’in sonucunu beklediği için, asenkron işlemin tamamlanmasını bekler. Bu sayede asenkron işlem basit bir şekilde yönetilir ve kodun anlaşılabilirliği artar.
Await Anahtar Kelimesi
Await Anahtar Kelimesi
JavaScript'te async fonksiyonlar kullanarak asenkron işlemleri yönetmek mümkündür. Ancak, async fonksiyonun içinde bir Promise nesnesinin değerini beklemek ve sonucunu almak için await anahtar kelimesi kullanılır. Böylece işlem tamamlanana kadar kodun beklemesi sağlanır ve hata yönetimi daha kolay hale gelir.
await anahtar kelimesi, sadece async fonksiyonlar içinde kullanılabilir ve sadece Promise objelerinin sonucunu döndüren fonksiyonlarla çalışır. Bu, işlem tamamlanana kadar kodun devam etmesini engeller ve işlem tamamlandıktan sonra sonucu alarak işleme devam eder.
Birçok durumda, await anahtar kelimesi kullanılarak Promise zincirleri oluşturmaktan kaçınılabilir ve daha okunaklı ve anlaşılır bir kod yazılabilir. Aynı zamanda, await anahtar kelimesi sayesinde hatalar da daha iyi yönetilebilir ve kod yazımını daha kolay hale getirir.
Async/Await'in Avantajları
Async/Await, Promise zincirlerine göre daha okunaklı bir kod üretimi sağlar.
Birçok Promise zinciri, yan yana sıralanmış then bloklarından oluştuğu için kodun okunması zorlaşabilir.
Async/Await ile, bu zincirleri oluşturmaya gerek kalmaz ve daha az kod ile aynı verileri elde edebilirsiniz.
Ayrıca, Async fonksiyonlar ile hataların daha iyi yönetilmesi mümkündür.
Await anahtar kelimesi, Promiselerin değerlerinin geri dönmesini beklerken, kodun çalışmasını durdurur ve hatanın daha iyi takip edilmesine olanak tanır.
Bu sayede, hataları takip ederken daha az kod yazmanız gerekir.
Promise ve Async/Await Arasındaki Farklar
Promise ve async/await, JavaScript'te veri işlemleri yapmak için en yaygın kullanılan iki yaklaşımdır. Promise, JavaScript'in sunduğu bir özellik olup, birden çok işlemin birbirine bağlanarak işlemlerin ardışık olarak yürütülmesini sağlar. Async/await ise, daha sonradan Promise ile birlikte kullanılmaya başlayan ve asenkron işlemlerin ilk başardaşmasını sağlayan bir yöntemdir.
Bu iki yaklaşım arasındaki en önemli fark, Async/await'in Promise zincirleri oluşturma ve çalıştırma zorunluluğunun olmamasıdır. Bunun yerine, Async/await ile kodlar daha okunaklı ve daha kolay anlaşılabilir hale getirilerek, hatanın da daha iyi yönetilmesi sağlanır. Ayrıca, Promises'in içerisinde bulunan state'lerin yönetimi de Async/await kullanıldığında kolaylıkla yapılabilir.
| Promise Yöntemi | Async/await Yöntemi |
|---|---|
| Promises zinciri ile işlemler | Daha az kod ve daha okunaklı işlemler |
| State'leri yönetmek için ekstra işlemler gerektirir | State'leri yönetmek için extra işlemlere gerek yoktur |
| Promise zincirlerini okumak çok zordur | Async/await kullanımı daha kolay anlaşılır |
Promise ve Async/await arasındaki tercih, kod yazarken işlemlerin kapsamı ve ihtiyaçları doğrultusunda değişebilir. Ancak, genel olarak Async/await, daha okunaklı ve daha az kod gerektirmesi nedeniyle son zamanlarda daha sık tercih edilen bir yaklaşım olarak karşımıza çıkmaktadır.
Promise ve Async/Await Örnekleri
Bu örnekler, gerçek hayattaki senaryolarda ne kadar yararlı olabileceğini göstermek için yapılmıştır. Promise kullanarak asenkron veri işlemleri yapmak için aşağıdaki örnek inceleyebilirsiniz:
| Adı | Yaşı |
|---|---|
| Ahmet | 25 |
| Mehmet | 30 |
| Adı | Yaşı |
|---|---|
| Fatma | 22 |
| Ayşe | 27 |
Async/Await kullanarak aynı işlemi yapmak için ise aşağıdaki örnek incelenebilir:
- 1
- 2
- 3
- 4
- 5
- 6
Bu örnekler, Promise ve Async/Await'in farklı senaryolarda nasıl kullanılabileceğini göstermektedir. Bu özellikleri kullanarak daha karmaşık veri işlemleri de yapabilir ve JavaScript kodunuzu daha güçlü hale getirebilirsiniz.
Promise Örneği
Promise, asenkron işlemlerle uğraşırken çok kullanışlı bir özelliktir ve birçok JavaScript framework'ünde kullanılmaktadır. Aşağıdaki örnekte, bir API'den veri çekme işlemi Promise ile gösterilecektir.
Örneğimizde, bir futbol takımının maç sonuçlarını çekeceğiz. API endpoint'imiz https://api.example.com/result'dir. İlk önce fetch() fonksiyonunu kullanarak API'den verilerimizi çekeceğiz ve sonrasında Promise nesnesiyle işlem yapacağız.
| HTTP Metodu | Endpoint | Açıklama |
|---|---|---|
| GET | /result | Futbol takımının son 5 maç sonucu |
const endpoint = 'https://api.example.com/result'; fetch(endpoint) .then(response => response.json()) .then(data => { // Verilerimiz burada kullanabiliriz console.log(data); }) .catch(error => { // Hata işleme burada yapılır console.error(error); }) Yukarıdaki örnekte, öncelikle API endpointimizi bir değişkene atayarak çağırıyoruz. Daha sonra fetch() fonksiyonunu kullanarak endpointe bir HTTP GET isteği gönderiyoruz. Aynı zamanda fetch(), bir Response nesnesi döndürür. Bu nesne JSON formatında verilerimizi içerecektir.
Sonrasında, Promise'de then() yöntemini kullanarak, JSON verilerimizi alırız. Verilerimiz doğru bir şekilde işlendiyse, ikinci then() yöntemi yapılacak ve sonucumuzu kullanabiliriz. Ayrıca, catch() yöntemini kullanarak, hataların daha iyi işlendiğinden ve kullanıcıya bildirildiğinden emin oluruz.
Async/Await Örneği
Async/Await, JavaScript'te veri işlemlerini yönetmek için oldukça kullanışlı bir tekniktir. Şimdi, Async/Await kullanarak bir API'den veri çekme işlemine bir göz atalım:
async function getData() { try { let response = await fetch('https://api.example.com/data'); let data = await response.json(); console.log(data); } catch (error) { console.log(error); }}getData();Bu örnekte, async kelimesi ile başlayan ve async fonksiyonu tanımlayan bir fonksiyon oluşturduk. Daha sonra, try/catch bloğunda bir HTTP isteği gönderdik ve response nesnesi içindeki veriyi JSON formatında aldık. Data değişkeninde veriyi aldıktan sonra bu data değişkeninin içindeki veriyi konsola yazdırdık.
Bu örnekte gördüğümüz gibi, Async/Await Promise zincirleri oluşturmak yerine daha okunaklı ve mantıklı bir şekilde asenkron işlemleri yönetmemizi sağlar. Ayrıca, hatanın daha iyi yönetilmesini sağlamak için try/catch bloğunu kullanırken daha az kod yazmanızı sağlar.