JavaScript'te Async/await

Bu makalede, JavaScript'teki async/await'i açıklayacağız.

YouTube Video

JavaScript'te Async/await

JavaScript'teki async (ve await), asenkron işlemleri daha sezgisel ve okunabilir şekilde yazmayı kolaylaştırmak için tasarlanmış özelliklerdir. Bunu kullanarak geleneksel geri çağırma fonksiyonları ve Promise zincirlerinin karmaşıklığını azaltabilir ve eşzamansız kodu eşzamanlı kod gibi yazabilirsiniz.

async Fonksiyonu

async, bir fonksiyonu asenkron bir fonksiyon olarak tanımlamak için kullanılır. Bir async fonksiyonu her zaman bir Promise döner. async ile işaretlenen bir fonksiyon içinde, bir Promise'in sonucunun dönmesini beklemek için await kullanabilirsiniz.

Bir async Fonksiyonunun Temel Söz Dizimi

1async function myAsyncFunction() {
2    // Write asynchronous processing here
3    return 'Result';  // Return a Promise
4}

Bu durumda, myAsyncFunction() çağrıldığında otomatik olarak bir Promise nesnesi döner. Promise çözüldüğünde, sonucu return ile dönen değer olur.

Örnek: Temel async Fonksiyonu

1async function greet() {
2    return 'Hello, World!';
3}
4
5greet().then((message) => {
6    console.log(message);  // Displays "Hello, World!"
7});

await

await, bir Promise'in çözülmesini beklemek için kullanılır. await kullanarak, yürütmeyi Promise çözülene kadar durdurabilir ve Promise'in sonucunu alabilirsiniz. await sadece bir async fonksiyon içinde kullanılabilir.

Örnek: await Nasıl Kullanılır

 1async function fetchData() {
 2    // Wait for the result of the Promise
 3    const data = await fetch('https://codesparklab.com/json/example.json');
 4    // Wait for the asynchronous operation to complete
 5    const jsonData = await data.json();
 6    // Retrieve and display the data
 7    console.log(jsonData);
 8}
 9
10fetchData();

Yukarıdaki örnekte, fetch fonksiyonunun döndürdüğü Promise'i await ile bekler ve ardından sonucu kullanarak daha fazla asenkron işlem gerçekleştirir.

async/await ile Hata Yönetimi

Bir async fonksiyonunun içinde bir hata oluşursa, bu hata Promise'in bir reject örneği olarak ele alınır. Hata yönetimini gerçekleştirmek için try...catch ifadelerini kullanabilirsiniz.

Örnek: Hata Yönetimi

 1async function fetchData() {
 2    try {
 3        // Invalid URL
 4        const data = await fetch('https://api.invalid-url.com/data');
 5        const jsonData = await data.json();
 6        console.log(jsonData);
 7    } catch (error) {
 8        // Catch the error
 9        console.error('Failed to fetch data:', error);
10    }
11}
12
13fetchData();

try...catch bloğu kullanarak, asenkron işlemler sırasında oluşan hataları yakalayabilir ve hatalar meydana geldiğinde programın çökmesini önleyebilirsiniz.

async/await Faydaları

Geleneksel Promise zincirleriyle karşılaştırıldığında, async/await aşağıdaki avantajları sunar:.

• Geliştirilmiş okunabilirlik
  • Eşzamansız işlemler, eşzamanlı kod gibi yazılabilir ve derinlemesine iç içe geçmiş Promise zincirleri ile geri çağırmaların karmaşıklığından kaçınılır.
• Daha kolay hata ayıklama
  • Eşzamanlı koda benzediği için hata ayıklama ve hata yönetimi daha kolay hale gelir.
• Daha iyi sürdürülebilirlik
  • Eşzamansız işlemler daha basit şekilde yazılabildiği için kodu değiştirmek veya güncellemek daha kolay olur ve uzun vadede sürdürülebilirlik artar.

Örnek: Promise zinciri ve async/await karşılaştırması

Promise zincirleri kullanan kod ile async/await kullanan kodu karşılaştıralım.

 1// Code using Promise chains
 2function fetchDataPromise() {
 3    fetch('https://codesparklab.com/json/example.json')
 4        .then((response) => response.json())
 5        .then((data) => {
 6            console.log(data);
 7        })
 8    .catch((error) => {
 9        console.error('Failed to fetch data:', error);
10    });
11}
12
13// Code using async/await
14async function fetchDataAsync() {
15    try {
16        const response = await fetch('https://codesparklab.com/json/example.json');
17        const data = await response.json();
18        console.log(data);
19    } catch (error) {
20        console.error('Failed to fetch data:', error);
21    }
22}

Gördüğünüz gibi, async/await kullanmak eşzamansız işlemleri doğrusal bir şekilde yazmanıza olanak tanır ve bu da kodun daha okunabilir olmasını sağlar.

Birden fazla asenkron işlemi aynı anda yürütün

Promise.all() veya Promise.race()'i await ile birleştirerek, birden fazla asenkron işlemi aynı anda çalıştırabilir ve sonuçlarını topluca işleyebilirsiniz.

Örnek: Aynı anda birden fazla asenkron işlem yürütme

 1async function fetchMultipleData() {
 2    try {
 3        const [data1, data2] = await Promise.all([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData1 = await data1.json();
 8        const jsonData2 = await data2.json();
 9        console.log(jsonData1, jsonData2);
10    } catch (error) {
11        console.error('Failed to fetch data:', error);
12    }
13}
14
15fetchMultipleData();

Promise.all() birden fazla Promise'i aynı anda çözümler ve sonuçlarını bir dizi olarak döner. Tüm Promise'lerin çözülmesini bekler ve bunlardan herhangi biri başarısız olursa, genel olarak bir başarısızlık olarak kabul edilir.

Özet

• async fonksiyonu: Her zaman bir Promise döner ve asenkron işlemleri yazmak için kullanılır.
• await: Bir Promise'in çözülmesini beklemek ve sonucunu almak için kullanılır.
• Hata yönetimi: Asenkron işlemler sırasında oluşan hataları yönetmek için try...catch kullanın.
• Birden fazla asenkron işlem: Promise.all() kullanarak birden fazla asenkron işlemi aynı anda çalıştırabilirsiniz.

async/await, asenkron işlemleri yönetmek için güçlü araçlardır, bu nedenle karmaşık asenkron mantığı basitleştirmek için bunları mutlaka kullanın.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video