JavaScript'de Async Fonksiyonlar Nasıl Kullanılır? Yeni başlayanlar ve deneyimli yazılımcılar için kullanışlı ipuçları ve örnekler içeren kapsamlı bir rehber Async fonksiyonları kullanarak kodların performansını arttırın ve daha verimli hale getirin Tamamen Türkçe kaynak!
JavaScript'te async fonksiyonlar, asenkron kod parçaları oluşturmak için kullanılır. Bu kod parçaları, bir işlem tamamlanana kadar diğer işlemleri bekletmeden çalışabilir ve böylelikle daha hızlı ve doğru bir uygulama geliştirme imkanı sunarlar. Ancak, async fonksiyonların kullanımı konusunda henüz bilgisi olmayanlar için bu konuda bir rehber hazırladık. Bu rehber, JavaScript programcılarına async fonksiyonları nasıl kullanacaklarını öğretmek için tasarlanmıştır.
Async fonksiyonların kullanımı oldukça basit ve esnektir. Çalıştırılacak kod blokları, birer promise olarak tanımlanırlar ve async fonksiyon içerisinde await anahtar kelimesi kullanılarak sırayla işlemler gerçekleştirilir. Bunun yanında, callback fonksiyonları da async fonksiyonların bir yöntemi olarak kullanılabilir. Bu yöntemde, async fonksiyon tamamlandığında çalışması gereken bir fonksiyon belirlenir ve bu fonksiyon async fonksiyon tamamlandığında çalışır.
Async Fonksiyon Nedir?
JavaScript programlama dilinde async fonksiyonlar, daha önce senkron olarak çalışan kod parçalarını asenkron hale getirmek için kullanılırlar. Senkron kodların çalışması, sırayla bir işlevin tamamlanmasını beklerken, asenkron kodlar arka planda işlem yapabilir. Bu sayede, daha doğru ve hızlı bir uygulama geliştirebilirsiniz.
Async fonksiyonların çalışması, diğer işlemlerden bağımsızdır ve bu nedenle içerikler arasında patlamayan bir uygulamanın oluşturulmasına olanak tanır. Async fonksiyonlar, hem kullanım kolaylığı sağlar hem de daha karmaşık işlemlerin asenkron bir şekilde yönetilmesine olanak tanırlar.
Bir async fonksiyon, function anahtar kelimesi ile tanımlanır ve içeriği de bir Promise nesnesi döndüren bir tanımla çevrilir. Async fonksiyonlar, geleneksel JavaScript standartlarına kıyasla daha kısa yazılır ve okunabilirliği artırır.
Async Fonksiyonlar Neden Kullanılır?
Async fonksiyonlar, JavaScript programcılarının senkron olarak çalışan kod parçalarını asenkron hale getirmelerine olanak tanıyan bir yapıdır. Bu durum, uygulamalarda daha doğru ve hızlı işlemler yapılmasına yardımcı olur. Async fonksiyonlar sayesinde, web sayfalarında sıkça kullanılan asenkron işlemler (örneğin, veri okuma veya yazma, API çağrıları vb.) daha kolay bir şekilde gerçekleştirilebilir.
Async fonksiyonlar, callback fonksiyonlarına alternatif olarak kullanılabilen Promiseler veya ES8 ile birlikte gelen Async / Await söz dizimleri gibi daha okunaklı ve daha iyi yöntemleri de kullanmaya imkan sağlarlar. Bununla birlikte, hataların doğru bir şekilde yönetilmesi de çok önemlidir. Bu sayede, uygulamanın performansı daha da artar.
Callback Fonksiyonlar ile Async İşlem Yapmak
Async fonksiyonlar ile birlikte yaygın olarak kullanılan yöntemlerden biri de callback fonksiyonlarıdır. Callback fonksiyonları, async fonksiyonunun tamamlandıktan sonra çalışacak kodu belirlemek için kullanılır. Bu sayede, async kod işleminin bittiğinden emin olunur ve buna göre kodun geri kalanı çalıştırılır.
Callback fonksiyonları, birkaç parametre ile birlikte kullanılır. İlk parametre, hata oluştuğunda geri çağırılacak olan hata fonksiyonudur. İkinci parametre ise, async fonksiyonu tamamlandığında çalışacak olan geri çağırma fonksiyonudur.
Örnek olarak, bir dosyanın okunması için async fonksiyonu kullanabilirsiniz. Async fonksiyon dosya okuma işlemini gerçekleştirir ve okuma tamamlandığında geri çağırma fonksiyonunu kullanarak okunan dosyayı işleyerek bir sonuç döndürür.
| Parametre | Açıklama |
|---|---|
| error | Async fonksiyonunda hata oluşması durumunda çalışacak olan fonksiyon. |
| data | Async fonksiyonunun tamamlanması durumunda çalışacak olan fonksiyon, geriye bir sonuç döndürür. |
Callback fonksiyonları kullanırken, sıralı işlem adımlarının kontrolü oldukça önemlidir. Aksi takdirde kodun okunması ve yönetilmesi oldukça zor hale gelebilir.
Promiseler ile Callback Fonksiyonlarını Geliştirmek
Async fonksiyonları kullanarak callback fonksiyonlarına zamandan tasarruf edebilirsiniz. Ancak, callback fonksiyonları karmaşık hatalara neden olabilir.
Bu nedenle, Promiseler, callback fonksiyonlarına alternatif olarak kullanılabilen, daha okunaklı ve daha iyi bir yöntemdir. Promiseler, bir işlemi tamamlamaya yönelik bir söz verir ve işlem tamamlandığında ya başarı ya da başarısızlık durumu bildirir.
Promiseler, bir dizi işlemi sırayla veya aynı anda yapmak için kullanılabilir. Bu, kodun daha düzenli ve daha okunaklı hale getirilmesini sağlar. Normalde bir callback fonksiyonunda olduğu gibi, her bir işlem tamamlandığında, sonraki işlem devam eder.
Promiseler, hem hata yakalama hem de kod okunabilirliği açısından faydalıdır. Başarısız oldukları zaman, hataları kolayca izlemek için bir 'catch' bloğu ekleyebilirsiniz. Bu pratik hata ayıklama yöntemi, uygulamanın daha çabuk ve kolay şekilde hata ayıklanmasını sağlar.
Örneğin, birden fazla API çağrısı gerektiren bir işleminiz varsa, Promiseler kullanarak daha okunaklı ve daha uygun bir yapı kurabilirsiniz. Promiseler, birden fazla asenkron olay sonucunu alma ve manipüle etmeyi kolaylaştırmaktadır.
Async / Await Kullanarak Callback Fonksiyonlarını Geliştirmek
Async / Await söz dizimi, ES8 ile birlikte gelen bir özelliktir ve callback fonksiyonlarına alternatif olarak kullanılabilir. Bu yapı, kodunuzu daha net ve okunaklı hale getirmenizi sağlar. Async fonksiyonuna "async" ifadesi eklenir ve "await" ifadesi ise işlem tamamlanana kadar bekletir. Böylece kodun daha iyi anlaşılması ve hata ayıklanması daha kolay hale gelir.
Async / Await kullanırken, "try-catch" blokları ile hata yönetimini kolayca yapabilirsiniz. Async fonksiyonunuz hata döndürürse, "catch" bloğu çalışır ve hatanın nasıl yönetileceğine dair işlemler yapılabilir. Bu sayede hata yönetimi daha doğru ve hızlı bir şekilde yapılabilir.
Ayrıca, Async / Await söz dizimi kullanarak kodunuzu daha az kod yazarak halledebilirsiniz. Callback fonksiyonlarını kullanırken, görev zincirlemesi yapmanız gerekirken, Async / Await söz dizimi ile görev zincirleme işlemleri otomatik olarak gerçekleştirilir. Bu sayede daha az kod yazmanız mümkün olur.
Özet olarak, Async / Await söz dizimi, callback fonksiyonlarına alternatif olarak kullanılabilecek daha net ve okunaklı bir yapıdır. Hata yönetimi kolayca yapılabildiği gibi, daha az kod yazımı ile de işlemler gerçekleştirilebilir. Bu nedenle JavaScript geliştiricileri, Async / Await yapısını kullanarak daha doğru ve hızlı uygulamalar geliştirebilirler.
Async Fonksiyonlarında Hata Yönetimi
Async fonksiyonları kullanırken, hataların doğru bir şekilde yönetilmesi oldukça önemlidir. Özellikle, Promise tabanlı bir işlemde, hata durumları, geri çağırma fonksiyonları ile yönetilebilir.
Hataların yönetimi esnasında, try-catch yapısı kullanılabilir. Bu yapıya göre, try bloğu içindeki kodlar çalışır ve herhangi bir hata oluştuğunda catch bloğu işletilir. Ayrıca, catch bloğunda hatanın görüntülenmesi veya işlenmesi için uygun uygulamalar yazılabilir.
Async fonksiyonlarda birden fazla Promise'nin zincirleme halde kullanılması durumunda, hataların yönetimi daha da önem kazanır. Bu durumda, Promise'lerin zincir halindeki sonuçlarını takip etmek için then() fonksiyonları kullanılabilir ve her bir then() şubesinde hataların yönetimi ayrı ayrı sağlanabilir.
Ek olarak, Promise zincirindeki tüm döndürülen verilerin işlenmesi gerektiğinde, Promise.all() fonksiyonu kullanılabilir. Bu fonksiyon, zincir halindeki tüm Promise'ların tamamlanmasını bekler ve tamamlanma durumundaki tüm sonuçları işler.
Hata yönetimi konusunda, async/await söz dizimini kullanmak da oldukça faydalıdır. Bu söz dizimi, Promise zincirinin baştan sona akışını daha açık ve kolay anlaşılır bir hale getirir. Bunun yanı sıra, try-catch bloklarını da daha sade bir biçimde yazmaya olanak tanır.
Her zaman hata senaryolarını önceden düşünmek ve bu durumlara karşı planı hazır bulundurmak, async fonksiyonlarında başarılı bir hata yönetimi için önemli bir adımdır.
Örnek Uygulama
Bir örnek uygulama oluşturarak async fonksiyonlarını daha iyi anlayabiliriz. Bu örnek uygulama, çeşitli kaynaklardan veri toplama ve işleme yapacak bir uygulamadır. Verileri almak için async fonksiyonlar kullanılacak ve toplanan tüm veriler birleştirilecektir.
İlk adım olarak, verileri almak için async fonksiyonlar kullanarak farklı kaynaklardan veriler toplayalım. Verileri toplamak için Promise.all() kullanacağız. Bu, birden çok promise'ı tek bir promise olarak birleştirecektir. Şöyle bir kod yazabiliriz:
const fetch = require("node-fetch");async function getTodos() { const [todo1, todo2, todo3] = await Promise.all([ fetch("https://jsonplaceholder.typicode.com/todos/1").then((res) => res.json()), fetch("https://jsonplaceholder.typicode.com/todos/2").then((res) => res.json()), fetch("https://jsonplaceholder.typicode.com/todos/3").then((res) => res.json()) ]); return { todo1, todo2, todo3 };}Sonraki adım, async fonksiyonlarını kullanarak aldığımız verileri işlemektir. Bu örnekte, topladığımız "todo" verilerini birleştireceğiz. Bunu yapmak için şöyle bir fonksiyon yazabiliriz:
async function combineTodos() { const todoList = await getTodos(); const combined = `${todoList.todo1.title} - ${todoList.todo2.title} - ${todoList.todo3.title}`; return combined;}Son olarak, veri işleme fonksiyonunu çağırarak alınan hataları yönetebiliriz. Bunun için try-catch kullanabiliriz.
(async () => { try { const combinedTodos = await combineTodos(); console.log(combinedTodos); } catch (err) { console.log("Error occurred:", err); }})();Bu örnek uygulama, async fonksiyonlarının nasıl kullanıldığını anlamamız için iyi bir örnektir. Verilerin toplanması, işlenmesi ve hataların yönetimi gibi adımlar, asenkron bir şekilde gerçekleştirilir.