JavaScript Yapısında Asenkron Programlama: Promise ve Async/Await ile sıralı kodu işleyin Bu makalede, başlangıç seviyesindeki bir programcı bile CPU zamanını en iyi şekilde kullanarak web uygulamalarına daha zengin işlevsellikler ekleyebilir Hadi başlayalım!

Bu makalede, JavaScript'in asenkron programlama yapısı ve sıralı kod işleme konusu ele alınmaktadır. Geleneksel olarak, programlama dillerinde kodun sırası önemlidir ve işlemler sırayla gerçekleştirilir. Ancak, asenkron programlama ile kodun düzenli olmayan bir şekilde işlemesine izin verilir. Bu, programların daha hızlı çalışmasını sağlayabilir ancak kodların anlaşılması daha zor hale getirebilir.

JavaScript'te, asenkron programlama yapısı Promise ve Async/Await yapılarını kullanarak sıralı kod işleme konusu ele alınmaktadır. Promise, asenkron işlemleri yönetmek için kullanılır. Bu yapı, bir işlem tamamlandığında ne yapılması gerektiğini belirten bir ifadeden oluşur. Promise zincirleme kullanarak, birbirine bağlı Promise'lerle işlem yapabilir ve sonuçlarını yönetebilirsiniz. Ayrıca, Promise fonksiyonları kullanılarak tüm Promise'lerin tamamlanması veya yalnızca bir tanesinin tamamlanması beklenen işlemler gerçekleştirilebilir.

Async/Await yapısı, ES7 ile gelen bir yapıdır. Bu yapı, asenkron işlemleri daha kolay yönetebilmenize ve sıralı kod yazabilmenize olanak tanır. Async fonksiyonları tanımlayarak, bu yapıyı kullanabilirsiniz. Bu makalede, örnek bir uygulama geliştirerek Promise ve Async/Await yapılarının kullanımını göstereceğiz. Bu yapılar, sıralı kod işleme konusunda büyük bir yardımcıdır ve JavaScript programlama dilinin gücünü artırmaktadır.

Asenkron Programlama Nedir?

Asenkron programlama, işlem başlatma ve tamamlama işlemlerinde sırayı beklemeden devam etmek anlamına gelir. JavaScript dilinde de birçok işlem asenkron şekilde gerçekleşmektedir. Bu yapının temel amacı, kodların daha hızlı ve verimli şekilde çalışmasını sağlamaktır. Kullanıcılar bu sayede web sayfalarındaki etkileşimleri daha hızlı ve akıcı bir şekilde deneyimleyebilirler.

Özellikle web geliştirme alanında asenkron programlama yapısının önemi oldukça büyüktür. Kullanıcılar sayfaları ziyaret ettiğinde, yapılan işlemlerin hızlı ve verimli şekilde tamamlanması beklenir. İşte asenkron yapısı sayesinde, bu işlemler sıraya alınmayarak daha hızlı ve akıcı şekilde gerçekleştirilebilir.

Promise Nedir?

JavaScript'in asenkron programlama yapısında işlemleri sıralı bir şekilde gerçekleştirmenin yollarından biri ise Promise yapısıdır. Promise, asenkron işlemlerimizi yönetmek ve sonuçlarını işlemek için kullanılan bir nesnedir. Promise yapısının çalışma mantığı, bir işlem başlatıldığında sonucu dönene kadar bekleyip, sonuç döndüğünde işleme devam eder. Bu sayede, bir işlem sırasında diğer işlemlere devam edebiliriz.

Promise yapısını kullanarak işlemlerimizi sıralı olarak işleyebiliriz. İşlem bittiğinde sonucu döndürmek yerine, geriye bir Promise nesnesi döndürülür. Promise nesnesi, işlemin sonucunu beklemek üzere tasarlanmış bir yapıdır. İşlem tamamlandığında, Promise nesnesi resolve() metodu çağrılarak sonucu döndürür. Eğer işlem başarısız olursa reject() metodu çağrılarak hata mesajı döndürülür.

Promise yapısını kullanarak asenkron işlemlerimizi yönetebiliriz. Örneğin, bir dosya yükleme işlemi sırasında kullanıcının sayfadan ayrılmasına izin vermek istemiyoruz. İşlem sırasında, Promise yapısı ile işlemimizi yönetebilir ve sonucu bekledikten sonra işlemi tamamlamamız mümkün olacaktır. Ayrıca, bir API sorgusu sonucunu beklemek üzere Promise yapısını kullanabiliriz. Sorguya cevap verildiğinde, sonucu alarak işleme devam edebiliriz.

Promise Zincirleme

Promise yapısında birbirine bağlı işlemler gerçekleştirmek oldukça önemlidir. Bu sayede önceki işlemin sonucunu alarak bir sonraki işlemi gerçekleştirebiliriz. Bunun için Promise zincirleme kullanılır. Zincirlemede önce bir Promise işleminin sonucunu alırız ve bu sonucu bir sonraki işleme aktarırız. Bu işlemi istediğimiz kadar tekrarlayarak sonuçta elde etmek istediğimiz sonucu elde ederiz.

Promise zincirleme kullanırken Promise'lerin sonucunda elde edebileceğimiz hataları önemsememiz gerekiyor. Eğer zincirlemeyi doğru şekilde yapmazsak bir sonraki işleme geçemeden önceki işlemin hatasını kontrol etmeliyiz. Bunun için try-catch blokları kullanabiliriz.

Promise zincirleme yapısı, sıralı ve bağlı işlemlerin tek tek yazılmasına göre daha okunaklı ve daha az kodlama gerektirir. Kodlama disiplini gerektirse bile hataya imkan vermez ve daha düzenli ve etkili bir programlama sağlar.

Promise Fonksiyonları

Promise Fonksiyonları, JavaScript asenkron programlama yapısını yönetmek için kullanılan önemli araçlardan biridir. Promise nesnesi, bir işlem sonuçlanana kadar beklemek yerine, işlem devam ederken başka işlemleri gerçekleştirmemizi sağlar.

Bunun yanı sıra, Promise fonksiyonları da kullanarak bir dizi işlemi yönetebilir ve sonuçlarını bekleyebiliriz. Örneğin, Promise.all() fonksiyonu, birden fazla işlemi aynı anda yürütüp, sonuçlarını beklememizi sağlar. Bu, özellikle paralel işlemler yaparken büyük bir avantaj sağlar.

Bir diğer popüler Promise fonksiyonu ise Promise.race() fonksiyonudur. Bu fonksiyon, birden fazla işlemi çalıştırır, ancak sadece ilk sonuç döndüğü zaman geri döner. Bu özellik, sadece ilk sonucun ne olacağını bilmemiz gereken durumlarda kullanışlıdır.

Promise fonksiyonlarını kullanarak, asenkron işlemleri birleştirebilir ve sonuçları yönetebiliriz. Bunlar, modern web uygulamalarının asenkron yapısını yönetmek için vazgeçilmez araçlardır.

Error Handling

Promise yapısında hata yönetimi oldukça önemlidir. Eğer bir Promise işlemi başarısız olursa ve hata fırlatırsa, bu hata yukarıdaki Promise zincirleme işleminin tamamını etkileyebilir. Bu nedenle, her Promise zinciri aynı zamanda hata yönetimini de içermelidir.

Promise yapısında hata yönetimi için then() fonksiyonunun ikinci parametresi kullanılır. Bu parametre, işlem başarısız olduğunda ne yapılacağını belirleyen bir fonksiyondur. Bu fonksiyonun içinde hata yönetimi yapılır ve kullanıcılara hata ile ilgili gerekli bilgiler gösterilir.

Aşağıdaki örnekte, fetch() fonksiyonu ile bir API'dan veri çekildiğinde, then() fonksiyonunun ikinci parametresi kullanılarak hata yönetimi yapılmaktadır:

fetch('https://example.com/api/data').then(response => {  if (!response.ok) {    throw new Error('API request failed');  }  return response.json();}).then(data => {  // verilerle çalışma işlemi}).catch(error => {  // hata yönetimi  console.error(error);});

Yukarıdaki örnekte, first then() fonksiyonu ile API'dan veriler çekildi ve eğer işlem başarısız olursa ikinci parametre olarak verilen throw fonksiyonu çalıştırılarak hata fırlatıldı. Daha sonra, ikinci then() fonksiyonu ile verilerle çalışma işlemi gerçekleştirildi. Eğer herhangi bir hata olursa, catch() fonksiyonu çalışarak hata yönetimi yapılır.

Async/Await Yapısı

JavaScript'in ES7 sürümü ile gelen Async/Await yapısı sayesinde asenkron işlemlerimizi daha kolay ve anlaşılır bir şekilde yönetebiliriz. Bu yapı, özellikle Promise yapısının some-ugly-kod ile atlatılması gereken zorluklarına alternatif olarak kullanılabiliyor.

Async fonksiyonları tanımlarken fonksiyon isminin başına async anahtar kelimesini ekleyerek bu özelliği kullanabilirsiniz. Ardından await anahtar kelimesiyle beklenmesi gereken asenkron işlemi işaretleyebilirsiniz. Bu sayede programlama yaptığımızda sanki senkron bir yapıdaymışız gibi kodlarımızı düzenleyebiliriz.

Async/Await yapısı daha düzenli ve okunabilir kodlar yazmamıza yardımcı olan önemli bir özelliktir. Ayrıca, Async/Await yapısı ile sıralı kod yazarak Promise zincirleme kullanmak yerine daha kolay bir şekilde işlem yapabilirsiniz.

Bununla birlikte, Async/Await yapısı Promise yapısına dayanır ve onu kullanmanız gerekebilir. Async fonksiyonunuz bir Promise'den dönen bir değerle çalışırsa, bunu aşağıdaki örnekte gösterildiği gibi await ile bekletebilirsiniz:

async function getData() {  const response = await fetch('https://example.com/api/data');  return response.json();}

Bu örnek, asenkron olarak çalışan bir API'den veri almak için bir Async fonksiyonunu göstermektedir. fetch() fonksiyonu, Promise döndürür ve await kullanarak response json nesnesini bekleyebiliriz. Bu şekilde veri alındıktan sonra geri döndürebiliriz.

Async/Await yapısı, özellikle büyük projelerde uzun Promise zincirlerini yönetmek için daha okunaklı bir yapıya sahip olmanızı sağlar. Sıralı kod yazmak ve hata yönetimini kolaylaştırmak isteyenleri de mutlu eder.

Bu yapının en önemli faydası, kodunuzu daha anlaşılır ve daha organizeli bir şekilde yapmanıza yardımcı olması ve arka planda asenkron olarak çalışan fonksiyonlarla başa çıkmak için size daha iyi bir alternatif sunmasıdır.

Async Fonksiyonları

JavaScript'te Async fonksiyonları, fonksiyonun başına "async" anahtar kelimesi eklenerek tanımlanır. Bu, fonksiyonun asenkron olarak çalışacağını belirtir. Async fonksiyonları, Promise kullanımını basitleştirir ve daha okunaklı bir kod yazımı sağlar.

Async fonksiyonları, Promise'lerle birlikte kullanıldığında, bir işlem tamamlandığında asenkron olarak çalışan bir başka işlemi tetikleyebilir. Async/await yapısı, JavaScript'teki Promise yapısını daha da güçlendirir.

Async fonksiyon kullanımı biraz farklıdır. Fonksiyonun içindeki işlemler, await anahtar kelimesiyle belirtilir. Bu şekilde, fonksiyonun, işlemler tamamlanana kadar duraklamasını sağlayabiliriz.

Örneğin, bir dosyanın okunması ve içeriğinin yazdırılması gibi işlemlerin ardışık bir şekilde gerçekleştirilmesi gerekiyorsa, Async fonksiyon kullanarak bu işlemleri kolayca yönetebiliriz.

Aşağıda, bir örnek Async fonksiyon tanımı verilmiştir.

async function readFile(filePath) {  let fileContent = await fetch(filePath);  console.log(fileContent);}

Yukarıdaki örnekte, readFile isimli Async fonksiyonu tanımlanmıştır. Bu fonksiyon, fetch() fonksiyonu aracılığıyla bir dosyanın içeriğini okur ve console.log() fonksiyonu kullanılarak içeriği yazdırır. await anahtar kelimesi, fetch() fonksiyonu işlem tamamlanana kadar işlemi duraklatır.

Örnek Uygulama

Örnek uygulamamızda, kullanıcıların bir kitap listesi ile etkileşimde bulunabileceği bir uygulama yapacağız. Bu uygulamada, kullanıcının kitapları arama, listeleme ve favorilere ekleme gibi işlemleri gerçekleştirebilecekleri bir arayüz sunacağız.

Uygulamamızda, Axios kütüphanesi ile bir API kullanacağız. Bu API'den gelen verileri Promise yapısını kullanarak işleyeceğiz. İlk olarak, kullanıcının listelemek istedikleri kategoriyi seçmesi için bir seçim menüsü oluşturacağız. Kullanıcı bir kategori seçtikten sonra, API'den bu kategorideki kitapların verilerini çekeceğiz ve listelemeyi gerçekleştireceğiz.

Kullanıcının kitapları araması için bir arama çubuğu ekleyeceğiz. Arama çubuğuna yazılan kitap isimlerine göre, API'den verileri çekeceğiz ve kullanıcıya sonuçları göstereceğiz. Ayrıca, kullanıcının kitapları favorilere eklemesi için bir buton ekleyeceğiz. Bu butona tıklandığında, kitabın bilgilerini local storage'a kaydedeceğiz.

Uygulamamızda, Async/Await yapısını kullanarak da işlemler yapacağız. Örneğin, kullanıcının bir kitabı favorilerden çıkarmak istediğini düşünelim. Bu işlemi gerçekleştirirken, local storage'dan veriyi silerken Async/Await yapısından faydalanacağız.

Tüm bu işlemleri gerçekleştirirken hataların yönetimini de unutmayacağız. Promise yapsında olduğu gibi Async/Await yapısında da bir hata oluştuğunda bunu kullanıcıya bildireceğiz.

Sonuç olarak, örnek uygulamamızda Promise ve Async/Await yapısını kullanarak kullanıcının kitapları yönetebileceği bir uygulama geliştirdik. Bu uygulama, Promise ve Async/Await yapısını kullanmayı öğrenmek isteyenler için iyi bir örnek teşkil edebilir.