Bu makalede, Async ve Await fonksiyonları hakkında detaylı bilgi edineceksiniz JavaScript'in bu iki özelliği, asenkron kodların yönetimini kolaylaştırır ve kodunuzu daha okunaklı hale getirir Async ve Await kullanarak, programınızın daha hızlı ve verimli olmasını sağlayabilirsiniz İşte Async ve Await fonksiyonları hakkında tüm detaylar!
Callback fonksiyonları, fonksiyonların diğer fonksiyonlara argüman olarak geçirilebilmesini sağlayan bir programlama yöntemidir. Yani bir fonksiyon, başka bir fonksiyona argüman olarak geçirilir ve daha sonra, tamamlandığında geri çağrılacak olan bir fonksiyon belirtilir. Bu geri çağrılacak fonksiyon, tamamlanma aşamasındaki durum hakkında bilgi sağlamak için kullanılır.
Bu yöntem, özellikle asenkron işlemler için kullanışlıdır. Örneğin, bir dosya indirme işlemi asenkron olarak gerçekleştiriliyorsa, işlem tamamlandığında geri çağrılacak bir fonksiyona ihtiyaç duyulabilir. Bu yöntemle, işlem tamamlandığında indirilen dosyayla ilgili işlemler gerçekleştirilebilir.
JavaScript programlama dilinde async işlemler gerçekleştirirken, callback fonksiyonları yerine Promise kullanmak oldukça popüler hale gelmektedir. Promise, bir işlemi yapmak için gereken süreyi belirlemekte veya bir asenkron işlemi sonlandırmak için kullanılmaktadır. Promise için verilen süre sonrasında işlemin tamamlanması durumunda "resolve" fonksiyonu çağrılır. Eğer hata ile karşılaşılırsa, "reject" fonksiyonu çalışır.
Promise kullanmanın en önemli avantajı, callback fonksiyonlarının sıkıntıya sebep olan callback cehennemine yani callback hell adı verilen duruma düşmek zorunda kalmadan kodun daha okunaklı hale getirilmesidir. Birçok işlerin çoğaltılması gereken durumlarda, Promise'ler kodlamayı oldukça kolaylaştırmaktadır. Bu sayede tarayıcıların askıda kalmış işlemsel işlemlerini aynı anda yürütebiliyoruz.
Bir Promise yapısı, "then" ve "catch" iki fonksiyonlarını gösterir. "then" işlemi tamamlandığında çalışan fonksiyonu ifade ederken, "catch" işlemde herhangi bir hata olduğunda çalışan fonksiyonu ifade etmektedir. Promise'lerin kullanım kolaylığı sayesinde ve daha okunaklı hale gelmesi gibi özellikleri, callback fonksiyonlarının kullanım talebinde bir azalma yaşanmasını sağlamıştır.
- Promise kullanmak, kodun okunaklılığını arttırır.
- Callback cehennemine düşme riski ortadan kalkar.
- Promise'ler, bazı asenkron işlemlerde kolaylık sağlar ve kodun hatalarını daha hızlı tespit etme olanağı sağlar.
Promise'ler genellikle, asenkron işlemler ve dosya yükleme işlemlerinde yoğun olarak kullanılmaktadır. Promise'lere yeni başlayanlar için, öğrenme aşamasında zorluk yaşanıyor olsa da, zaman içinde kullanıcılara sağladığı kolaylık nedeniyle, önemini hızla arttırmaktadır.
Async ve Await fonksiyonları, JavaScript'teki asenkron işlemlerin daha okunaklı ve kolay yönetilebilir hale gelmesini sağlayan bir yöntemdir. Async fonksiyonları async anahtar kelimesiyle tanımlanırken, olası hatalar için ise try-catch blokları kullanılır. Await ise, async fonksiyon içerisindeki bir işlem tamamlanmadan bir sonraki işlemin çalışmasını engelleyerek, işlemin doğru sırayla çalışmasını sağlar.
Async ve Await fonksiyonları, callback fonksiyonlarına göre daha okunaklı, kolay yönetilebilir ve daha az hata riski olan bir işlem yöntemidir. Bu fonksiyonlar genellikle aynı anda birden fazla asenkron işlem çalıştırılan programlarda kullanılır. Bununla birlikte, bu fonksiyonlar sadece asenkron işlemlerle sınırlı değillerdir, aynı zamanda senkron işlemlerle de kullanılabilirler.
Async ve Await fonksiyonlarının kullanımı, basit ve anlaşılırdır. Sadece async anahtar kelimesi kullanarak fonksiyonu tanımlarsınız ve kod bloklarını await anahtar kelimesiyle işaretlersiniz. Bunların yanı sıra, async fonksiyonlarının içinde de fonksiyonlar çağrılabilir ve await anahtar kelimesi kullanarak işlemlerin tamamlanmasını bekleyebilirsiniz.
Tabloda ise, async/await fonksiyonlarının callback fonksiyonlarına göre avantajları şu şekildedir:
| Async/Await Fonksiyonları | Callback Fonksiyonları |
|---|---|
| Daha okunaklı kod | Karmaşık ve okunaksız kod |
| Daha kolay yönetilebilir | Zaman alıcı yönetim |
| Daha az hata riski | Yüksek hata riski |
Async ve Await fonksiyonları, modern JavaScript programlama dillerinin gelişimi için önemli bir adımdır. Bu yöntem sayesinde, JavaScript kodları daha okunaklı, daha yönetilebilir ve daha az hata riski olan bir programa dönüşür. Bunların yanı sıra, koddaki hataları kabul etmek için kullanılan try-catch blokları bu fonksiyonlar içinde kullanılabilir, bu da hataların daha iyi yönetilmesini sağlar.
Async and Await Fonksiyonları Neden Kullanılmalıdır?
Asenkron bir programlama modelini kullanan JavaScript'te, callback fonksiyonları en sık kullanılan tekniklerden biridir. Ancak yüksek performans gerektiren uygulamalarda, callback fonksiyonlarının bir dizi dezavantajı vardır: kodun okunması zorlaşabilir, hataların ayıklanması zordur ve işlem sırasındaki hataların izlenmesi zordur. Bu nedenle, callback fonksiyonlarının yerine async ve await fonksiyonlarına başvurulabilir.
Async ve await fonksiyonları, kodun okunmasını ve anlaşılmasını kolaylaştırmak için tasarlanmıştır. Yalnızca bu fonksiyonlar, işlem sırasında hataların izlenmesi, kodun ayıklanması ve işlemlerin tamamlanmasına kadar beklenmesi gibi konularda avantajlar sağlayabilir.
- Async fonksiyonları, kodun daha akışkan bir şekilde yazılmasına izin verir.
- Await fonksiyonları, sabırsızlığı önler ve sırayla yürütülen işlemleri daha anlaşılır hale getirir.
- Async ve await fonksiyonları, kodu daha az karmaşık hale getirir ve daha az hata üretir.
- Callback fonksiyonlarından farklı olarak, async ve await fonksiyonları sayesinde programlama hataları kolaylıkla bulunabilir.
Özetle, async ve await fonksiyonları kullanımı ile JavaScript kodları daha okunaklı, hata ayıklaması daha kolay ve performansı daha yüksek hale gelir. Bu fonksiyonlar, bir dizi işlemi sıraya sokmak, one-by-one exectue (teker teker çalıştırmak) etmek, sonuçları beklemeden çalışmaları sağlamak veya async kümesleme gibi çok sayıda alanda kullanışlıdır.
Async ve Await Fonksiyonlarının Nasıl Kullanılacağı
Async ve Await fonksiyonlarının kullanımı oldukça basittir. Async bir fonksiyon tanımlamak için, fonksiyonun başına async anahtar kelimesi eklenir. Bu işaret, fonksiyonun promise döndüreceği anlamına gelir. Await anahtar kelimesinin kullanımı ise biraz farklıdır. Fonksiyonun içinde bir await ifadesi kullanıldığında, JavaScript yürütüm mekanizması, bu işlemin bitmesini bekleyecektir.
Örnek olarak, bir fetch işlemi gerçekleştiren bir fonksiyon async-await yöntemiyle yazılmış olabilir. Böylece, fonksiyon bitmeden önce fetch işlemi tamamlanacaktır ve dönen sonuca göre ilerleme sağlanacaktır. Aşağıdaki örnek, kullanıcı adı ve şifre kullanarak bir giriş işleminin gerçekleştirilmesini sağlar:```async function login(user) { try { const response = await fetch('https://api.example.com/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(user) }); const data = await response.json(); return data; } catch (error) { console.error(error); }}```Yukarıdaki örnekte, bir kullanıcı nesnesi, login fonksiyonuna iletilir ve bu nesne fetch metodu aracılığıyla sunucuya gönderilir. Sonrasında, sunucudan dönen yanıt response değişkeninde saklanır ve async-await yöntemiyle gerçekleştirildiği için, yanıtın gelmesi beklenir. İlk await ifadesini tamamladıktan sonra, jsonStringify metodu ile JSON formatına dönüştürülür ve tekrar await ifadesi ile sunucudan gelen yanıt data değişkenine atanır. Dönen sonuç, login fonksiyonundan döndürülür.
Async ve Await fonksiyonları, callback fonksiyonlarına göre daha okunaklı bir kod yazmanızı sağlar ve error yönetimi de daha kolaydır.
Async Fonksiyonlarının Kullanımı
Async fonksiyonları, JavaScript'te işlemlerin senkronize bir şekilde çalıştırılmasından ziyade asenkronize bir şekilde yürütülmesini sağlayan özelliklerdir. Bu özellikler, birçok işlevi daha çabuk, seri halinde veya sırayla işlem yapmak istediğimiz durumlarda bize yardımcı olabilir.
Async fonksiyonların kullanımı oldukça basittir. Bir fonksiyonun başına ‘async’ kelimesini eklemek, onu asenkronize hale getirmeye yeterlidir. Örneğin:
async function sayHello() { return "Merhaba";}Bu fonksiyon asenkron hale getirildiği için, bir sonuç döndürdüğünde, bir Promise nesnesi döndürür. Bu nesne, sayHello() fonksiyonunun işletilmesi tamamlandığında, değeri içeren bir Promise olacak.
Async fonksiyonların avantajları, callback fonksiyonlarında olduğu gibi, kod karmaşıklığının ve hatanın azaltılmasıdır. Ayrıca async fonksiyonlar, kod yazarken daha hızlı bir geliştirme sürecine sahip olmamızı sağlar.
Burada kod örneği ile bir asenkron fonksiyonun kullanımına örnek verebiliriz:
async function getData() { const response = await fetch('https://jsonplaceholder.typicode.com/todos/1'); const data = await response.json(); return data;}getData().then(data => console.log(data));Burada, ‘async function getData()’ ifadesiyle, bir asenkron fonksiyon oluşturduk. Ardından ‘await’ anahtar kelimesini kullanarak, bir API çağrısı yaptık ve sonuçlarını ‘response’ değişkenine atadık. Daha sonra, ‘await response.json()’ ifadesiyle, verileri JSON biçiminden aldık ve değişkene atadık. Son olarak ‘return data;’ ifadesi ile verileri döndürdük. Bu asenkron fonksiyon, ‘getData().then(data => console.log(data));’ ifadesi ile çağrıldı ve sonuç konsol çıktısı olarak alındı.
Await Fonksiyonlarının Kullanımı
Await fonksiyonları, bir async fonksiyonu içinde kullanılan bir anahtar sözcüktür. Bu sözcük, fonksiyonun sonuçlandırılması için beklemesi gereken bir Promise nesnesi döndürecektir. Bu şekilde, async fonksiyonunun içindeki değerlerin ve sonuçların diğer alanlarda kullanılması beklenmeden önce bitirilmesi sağlanır.
Bir async fonksiyonu, bir Promise nesnesi olarak dönüştüren bir sözde Promise fonksiyonu kullanarak tanımlanabilir. Aşağıdaki örnek async fonksiyonunun çalışma şeklini gösterir:
```JSasync function exampleFunction() { let result = await promiseFunction(); console.log(result);}
function promiseFunction() { return new Promise((resolve, reject) => { setTimeout(() => resolve("Merhaba Dünya!"), 1000); });}
exampleFunction(); // output: "Merhaba Dünya!"```
Bu örnek fonksiyon, async ve await sözcükleriyle kullanılarak asynchronous bir şekilde çalışır. Fonksiyon, promiseFunction() fonksiyonunu çağırır ve await sözcüğü sonucun dönmesini beklemek için işlemi duraklatır. Daha sonra, sonuçlariçin bir değişken tanımlanır ve sonuç bu değişkene atanır.
Await fonksiyonunun diğer bir özelliği, birden fazla Promise sonucunun paralel bir şekilde yönetilmesinde kullanılabilmesidir. İki farklı Promise işlemi yazarak bir örnek yapalım:
```JSasync function exampleFunction() { let result1 = promiseFunction1(); let result2 = promiseFunction2(); let result = await Promise.all([result1, result2]); console.log(result);}
function promiseFunction1() { return new Promise((resolve, reject) => { setTimeout(() => resolve("İşlem 1 Tamamlandı!"), 2000); });}
function promiseFunction2() { return new Promise((resolve, reject) => { setTimeout(() => resolve("İşlem 2 Tamamlandı!"), 1000); });}
exampleFunction(); // output: ["İşlem 1 Tamamlandı!", "İşlem 2 Tamamlandı!"]```
Burada, Promise.all() yöntemi, iki işlemi harmanlar ve sonuçlarını tek bir Dizi içinde döndürür. Bu örnekte, ikinci işlem daha önce sonuçlandığından, sonuçlar dizilerindeki sıralarının farklı olmasına rağmen çıktı "İşlem 1 Tamamlandı!" ve "İşlem 2 Tamamlandı!" şeklindedir.
Await fonksiyonları, async ve Promise fonksiyonları ile birlikte kullanıldıklarında oldukça kullanışlı hale gelirler ve yapının daha kolay ve okunaklı bir hale gelmesini sağlarlar.
Callback Fonksiyonları ve Async/Await Fonksiyonları Arasındaki Farklar
Callback fonksiyonları ve async/await fonksiyonları, JavaScript dilinde sıklıkla kullanılan yapılar arasındadır. Her iki fonksiyon yapısı da asenkron işlemleri yönetmek için kullanılır. Ancak bu iki yapı arasında bazı farklılıklar vardır.
Callback fonksiyonları, bir işlem tamamlandığında başka bir işlemi çalıştırma yöntemidir. Callback fonksiyonları, genellikle bir fonksiyona parametre olarak geçirilir ve işlemin tamamlanması durumunda çağrılır. Bu yapı, bir dizi asenkron işlemi yönetmek için kullanılır. Callback fonksiyonları, beginner seviyesindeki geliştiriciler tarafından kolayca anlaşılır ve kullanılabilir. Ancak, callback hell olarak adlandırılan ve kodun okunmasını zorlaştıran durumlara da yol açabilir.
Async/await fonksiyonları, callback fonksiyonlarının karmaşıklığını azaltmak için geliştirilmiştir. Bu yapı, işlemleri sırayla ve doğru şekilde çalıştırmak için kullanılır. Async/await fonksiyonları fonksiyonlara eklemek için ek bir anahtar kelime ekler. Async anahtar kelimesi, bir fonksiyonun asenkron olduğunu belirtirken, await anahtar kelimesi fonksiyonun tamamlanmasını bekler ve ardından işlemin sonucunu döndürür. Bu yöntem, async ve await anahtar kelimelerinin kullanımı sayesinde, kodun daha anlaşılır ve okunaklı hale gelir. Bu yapı, callback hell sorununa neden olmaz ve kodun yönetimi daha kolay hale gelir.
| Callback Fonksiyonları | Async/Await Fonksiyonları |
|---|---|
| Callback fonksiyonları, işlemleri sıraya koymak için çok sayıda fonksiyon kullanabilir. | Async/await fonksiyonları, işlemleri kolayca ve belirli bir sırayla yöneterek daha az fonksiyon kullanır. |
| Callback fonksiyonları, callback hell sorununa neden olabilir. | Async/await fonksiyonları, kodun okunmasını kolaylaştırır ve bu sorunu ortadan kaldırır. |
| Callback fonksiyonları, kodu anlaşması zor bir hale getirebilir. | Async/await fonksiyonları, kodu daha anlaşılır hale getirir ve yönetimi kolaylaştırır. |
Genel olarak, async ve await fonksiyonları, callback fonksiyonlarına göre daha anlaşılır, daha az ustalaşma gerektiren ve kodun yönetimini daha kolay hale getiren bir yöntemdir. Ancak bu yapı, bazı durumlarda daha yavaş bir şekilde çalışabilir. Developer'lar, yapmak istedikleri işleme karar verirken işlemin boyutuna, gereksinimlerine ve yapısına göre hangi yöntemi kullanacaklarına karar vermeleri gerekir.