Bu eğitimde yeni nesil JavaScript teknolojileri olan async/await ve promises ile fonksiyonlara asenkron davranışlar kazandırmayı öğreneceksiniz Nodejs ve modern web uygulamaları için vazgeçilmez olan bu tekniklerle programlama becerilerinizi güçlendirin!

Merhaba! Bu makalede, JavaScript kodlarında asenkron davranışların nasıl eklenileceğini öğreneceksiniz. Bunun için Async/Await ve Promises kullanacağız. Bu teknolojiler, fonksiyonların daha okunaklı ve sürdürülebilir hale getirilmesine yardımcı olan özel fonksiyon türleri ve nesnelerdir.

Async fonksiyonlar, JavaScript kodlarında asenkron davranışlar sergilemek için kullanılır. Bunun yanı sıra, Promise'lar tarafından döndürülen sonuçların daha kolay işlenmesi için de Async fonksiyonlar kullanılır. Üstelik, Await ifadesi sayesinde, programın ilerlemesi belirli bir işlem tamamlanmadan önce durdurulabilir.

JavaScript'te Promises kullanımı, asenkron kodun yönetimi için kullanılan özel bir nesne türüdür. Bir Promise nesnesi oluşturulur ve bu nesne üzerinde .then() ve .catch() fonksiyonları kullanılarak sonuçların yönetimi sağlanır. Birden fazla Promise zincirleme olarak kullanılabildiğinden, farklı Promise'ler zincir halinde bağlanarak görevlerin yönetilmesi ve aralarındaki bağımlılıkların sağlanması kolaylaştırılabilir. Promises kullanırken, bir dizi Promise'in hepsi tamamlandığında çalışması gereken bir durumda Promise.all() kullanılabilir.

Async fonksiyonlar, kodları daha okunaklı ve sürdürülebilir hale getirir. Await ifadesi ise, asenkron bir işlemin tamamlanması için kullanılır. Async/await kullanırken, herhangi bir hata durumunda hatanın yönetilmesi için try-catch yapısı kullanılabilir. Bu sayede kod hataları daha kolay yönetilebilir.

Sonuç olarak, Async/Await ve Promises kullanarak JavaScript kodları daha sürdürülebilir hale getirilebilir ve asenkron davranışların daha kolay yönetilebilir hale getirilmesine yardımcı olunabilir. Bu yeni teknolojiler sayesinde, JavaScript geliştiricileri daha kaliteli, okunaklı ve sürdürülebilir kodlar üretebilirler.

Async ve Await Nedir?

Async fonksiyonlar, Javascript programlamada çok önemli bir yer tutmaktadır. Bu özel fonksiyonların amacı, diğer fonksiyonların asenkron bir şekilde çalışmasına olanak sağlamaktadır. Böylece, uzun süren işlemler sonucunda elde edilen verilerin işlenmesi daha kolay hale gelir. Fonksiyonun içinde yer alan işlemlerin tamamlanması beklenmeden, programın diğer kısımları da çalışmaya devam eder. Bu sayede, programların daha hızlı ve verimli bir şekilde çalışması sağlanır.

Await ifadesi, asenkron function çağrılarının tamamlanmasını beklediği için Async fonksiyonların etkin bir şekilde kullanımı için gereklidir. Await ifadesi, ilgili fonksiyonun tamamlanmasını bekler ve sonucunu döndürür. Böylece, fonksiyonun sonucuna göre programın daha uygun bir şekilde yönlendirilmesi sağlanır. Await ifadesi, farklı işlemlerin birbirlerine bağımlılığı olan durumlarda da sonuçların doğru bir şekilde döndürülmesini ve işlenmesini sağlar.

Promises Nedir?

JavaScript'te asenkron kodun yönetimi için Promises kullanılır. Promise'lar, belirli bir işlem yapmak için parametre verildiğinde, bu işlemin tamamlanmasıyla ilgili geri bildirimleri yönetir. Yani, Promise'lar, bir işlemi yürütmeye başlar ve işlem tamamlandığında, bu işlemin başarılı bir şekilde tamamlandığını ya da bir hata oluştuğunu belirtir.

Promise'lar, fonksiyonların bir arada çalıştırılmasına imkân tanır ve aralarındaki bağımlılıkları kontrol etmek için kullanılabilir. Örneğin, bir web sitesi üzerinde bir dizi işlem yapıyorsanız ve her işlem bir önceki işlemin sonucuna dayanıyorsa, Promise'lar aracılığıyla bu işlemleri zincirleyebilirsiniz.

Promise'ların kullanımı basit ve anlaşılırdır. Promise nesnesi oluşturulur ve ardından .then() ve .catch() fonksiyonları kullanılarak sonuçların yönetimi sağlanır. .then() fonksiyonu, Promise tamamlandığında başarılı bir şekilde geri dönüş yapar. Öte yandan, .catch() fonksiyonu, Promise tamamlandığında bir hata oluşması durumunda çağrılır.

Ayrıca, bir dizi Promise'in tamamlanması gerekiyorsa, Promise.all () fonksiyonu kullanılabilir. Promise.all () fonksiyonu, bir dizi Promise'in tamamlandığında çalışır ve tüm Promise'lerin sonucunu tek bir dizi içinde döndürür.

Promises Kullanımı

JavaScript'te Promises kullanmak için ilk adım, bir Promise nesnesi oluşturmaktır. Bir Promise, bir işlemi gerçekleştirmek için kullanılır ve bir sonuç döndürür. Promise nesnesi, .then() ve .catch() fonksiyonları kullanılarak sonuçların yönetimi sağlanır.

.then() fonksiyonu, Promise nesnesi tamamlandığında çalışacak kodu tanımlar. .catch() fonksiyonu ise, Promise nesnesi tamamlanırken herhangi bir hata oluşursa çalışacak kodu tanımlar.

Bir örnek olarak, bir resim yüklemek için Promise nesnesi kullanılabilir. Resim yükleme işlemi tamamlandığında .then() fonksiyonu, resmin başarıyla yüklendiğini doğrulayan bir mesaj gösterir. Eğer resim yükleme işlemi başarısız olursa, .catch() fonksiyonu hata mesajı gösterir.

Örnek:
```let imagePromise = new Promise((resolve, reject) => { let image = new Image(); image.src = 'example.com/image.jpg'; image.onload = () => resolve('Resim yüklendi'); image.onerror = () => reject('Resim yüklenirken hata oluştu');});imagePromise.then((message) => { console.log(message);}).catch((error) => { console.error(error);});```

Yukarıdaki örnekte, imagePromise adlı bir Promise nesnesi oluşturulur. Bu nesne üzerinde, resmin yükleme işlemi tamamlandığında çalışacak .then() fonksiyonu ve herhangi bir hata durumunda çalışacak .catch() fonksiyonu tanımlanır.

JavaScript'te Promises kullanarak kodların daha okunaklı ve sürdürülebilir hale getirilmesi sağlanır. Promise zincirleme gibi özellikleri kullanarak, farklı Promise'ler zincir halinde bağlanarak görevlerin yönetilmesi ve aralarındaki bağımlılıkların sağlanması kolaylaştırılabilir. Bir dizi Promise'in hepsi tamamlandığında çalışması gereken bir durumda Promise.all() kullanılabilir.

Promise Zincirlemesi

JavaScript ile asenkron kod yazmak oldukça yaygınlaştı. Bu nedenle, farklı fonksiyonlar arasında bağımlılıkların oluşması ve bu bağımlılıkların yönetiminin sağlanması gerekmektedir. Promise zincirlemesi bu bağımlılıkların sağlanmasında önemli bir yere sahiptir.

Birçok durumda, bir Promise diğer bir Promise'in sonucuna bağlı olacaktır. Bu durumda Promise zincirleme kullanarak bu bağımlılıkların yönetimi kolaylaştırılabilir. Zincirin başlangıcında, ilk Promise çalıştırılır ve ardından bu Promise'in sonucuna bağlı olarak bir diğer Promise çalıştırılır ve bu zincirleme devam eder. Zincirleme sayesinde, önceki Promise'in sonucu bir sonraki Promise'in parametresine aktarılır ve zincirleme bu şekilde devam eder.

Özetle, Promise zincirlemesi, farklı Promise'ler arasındaki bağımlılıkların yönetimini kolaylaştırır ve kodun daha okunaklı hale gelmesine yardımcı olur. Ayrıca, zincirleme kullanarak, birçok farklı işlem zincir halinde bağlanabilir ve bu zincirleme sayesinde hataların yönetimi de kolaylaştırılabilir.

Promise All

JavaScript'te, bir dizi Promise'in hepsi tamamlandığında çalışması gereken durumlarda Promise.all() fonksiyonu kullanılır. Bu fonksiyon, birden fazla Promise nesnesini kabul eder ve tüm Promise'lerin tamamlanmasını bekler. Tüm Promise'ler tamamlandığında, bir dizi sonuç değeri döndürür.

Promise.all() fonksiyonu, özellikle birden fazla asenkron işlem birbiriyle bağımlıysa ve her işlem tamamlandığında sonucu işlemek gerektiğinde kullanışlıdır. Örneğin, birkaç farklı dosyadan veri çekilirken ve bu verilerin tamamı alındığında birleştirilmesi ve işlenmesi gerektiğinde, Promise.all() fonksiyonu kullanılabilir.

Bir örnek kullanımı, bir dizi URL'den veri alıp her birindeki veriyi bir objede depolamaktır. Hepsinin tamamlanmasını beklemek için Promise.all() kullanılır. Aşağıdaki örnek kod, iki URL'den veri alır ve her bir veritabanı sonucunu objeye ekler:

const fetchData = async (url) => {  const response = await fetch(url);  return response.json();}const urls = [  'https://jsonplaceholder.typicode.com/todos/1',  'https://jsonplaceholder.typicode.com/todos/2'];const fetchDataFromUrls = async () => {  const promises = urls.map(url => fetchData(url));  const results = await Promise.all(promises);  const data = results.reduce((acc, cur) => ({...acc, ...cur}), {});  console.log(data);}fetchDataFromUrls();

Yukarıdaki örnekte, fetchData() fonksiyonu, fetch API'sini kullanarak her bir URL'den veri çeker. Ve fetchDataFromUrls() fonksiyonunda, her URL için bir Promise nesnesi oluşturulur ve Promise.all() fonksiyonu kullanılarak tüm Promise'lerin tamamlanması beklenir. Tüm veriler toplandıktan sonra, reduce() methodu kullanılarak bir objede birleştirilir.

Async ve Await Kullanımı

Async fonksiyonlar, kodun daha okunaklı ve sürdürülebilir olmasını sağlayan özel fonksiyonlardır. Bu fonksiyon türü, Promise'lerin daha kolay işlenmesine olanak tanır ve bir dizi asenkron işlemi daha kolay yönetilebilir hale getirir. Bunun yanı sıra, Async fonksiyonlar, kodu daha basit ve anlaşılır bir hale getirir ve bu sayede okunması daha kolay hale gelir.

Await ifadesi ise, asenkron bir işlemin tamamlanmasını bekleyerek programın ilerlemesini engeller. Böylece fonksiyonlar, içerisindeki asenkron işlemleri tam olarak tamamlandıktan sonra devam eder. Bu da daha güvenilir bir kod yazımına olanak tanır ve hatalı sonuçlarla karşılaşma riskini azaltır.

Try-Catch Kullanımı

Async/await kullanırken, hata yönetimi büyük önem taşır. Herhangi bir hata durumunda, hatanın yönetimi için try-catch yapısı kullanılabilir. Bu yapı, hata yakalamada oldukça başarılı ve kolaydır.

Try bloğu içindeki kodlar çalıştırılırken, eğer bir hata meydana gelirse catch bloğu devreye girer ve burada hata yönetilir. Böylece, programın çökmesi engellenir. Ayrıca, hata yönetimi sayesinde, hatanın sebebi de tespit edilip gerekli aksiyonlar alınabilir.

Async/await kullanırken try-catch yapısının kullanılması, sadece hata yönetimi açısından değil, aynı zamanda kodun daha okunaklı ve sürdürülebilir olması açısından da önemlidir. Hataya özel mesajlar ve çözüm önerileri de try-catch yapısı içinde yer alabilir.

Sonuç

JavaScript kodlarının asenkron davranışlarını yönetmek için Async/Await ve Promises kullanmak, kodların daha sürdürülebilir ve okunaklı hale gelmesini sağlar. Promise nesneleri, asenkron kodların geri bildirimlerini yönetirken, async/await yapısı kodların daha anlaşılır olmasını sağlar.

Promise zincirleme yöntemiyle, farklı Promise'lerin birbirine bağlanması kolaylaştırılırken, Promise.all() kullanarak, bir dizi Promise'in tamamlandığında tetiklenecek bir durum yönetilebilir. Async/await kullanırken, hata durumlarına karşı try-catch yapısı kullanılarak yönetimi kolay hale getirilebilir.

Bu yöntemlerin kullanımı, JavaScript kodlarının daha iddialı ve sürdürülebilir hale gelmesini sağlar. Async/Await ve Promises yöntemlerinin kullanılması, web uygulamalarının performansını ve hızını artırırken, anlaşılırlığını ve okunabilirliğini de olumlu yönde etkiler.