Articles
JavaScript'e Giriş
JavaScript'te Async/await

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://invalid.codesparklab.com/');
 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.

Promise.all() 

 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);
10        console.log(jsonData2);
11    } catch (error) {
12        console.error('Failed to fetch data:', error);
13    }
14}
15
16fetchMultipleData();
  • 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.

Promise.race() 

 1async function fetchFastestData() {
 2    try {
 3        const fastestResponse = await Promise.race([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData = await fastestResponse.json();
 8        console.log('Fastest data:', jsonData);
 9    } catch (error) {
10        console.error('Fetch error:', error);
11    }
12}
13
14fetchFastestData();
  • Promise.race(), yerine getirilen veya reddedilen ilk Promise'in sonucunu döndürür. Hangi asenkron işlemin önce tamamlanırsa ona yanıt vermek istediğinizde kullanışlıdır. Ancak, ilk Promise başarısız olursa, hata hemen catch tarafından yakalanır.

Promise.allSettled() 

 1async function fetchWithAllSettled() {
 2    const results = await Promise.allSettled([
 3        // This URL will success
 4        fetch('https://codesparklab.com/json/example1.json'),
 5        // This URL will fail
 6        fetch('https://invalid.codesparklab.com/')
 7    ]);
 8
 9    results.forEach((result, index) => {
10        if (result.status === 'fulfilled') {
11            const url = result.value.url;
12            console.log(`Request ${index + 1} succeeded:`, url);
13        } else {
14            const reason = result.reason;
15            console.warn(`Request ${index + 1} failed:`, reason);
16        }
17    });
18}
19
20fetchWithAllSettled();
  • Promise.allSettled() başarı veya başarısızlığa bakılmaksızın tüm sonuçları bekler. Her sonuç { status, value } veya { status, reason } biçiminde döndürülür, böylece hangi Promise'lerin başarılı olduğunu ve hangilerinin başarısız olduğunu belirleyebilirsiniz.

Promise.any() 

 1async function fetchAnySuccessful() {
 2    try {
 3        const firstSuccessful = await Promise.any([
 4            // This URL will fail
 5            fetch('https://invalid.codesparklab.com/'),
 6            // This URL will success
 7            fetch('https://codesparklab.com/json/example1.json')
 8        ]);
 9        const jsonData = await firstSuccessful.json();
10        console.log('First successful response:', jsonData);
11    } catch (error) {
12        console.error('All fetch requests failed:', error);
13    }
14}
15
16fetchAnySuccessful();
  • Promise.any(), ilk başarılı şekilde yerine getirilen Promise'in sonucunu döndürür. Sadece tüm Promise'ler başarısız olursa bir istisna fırlatılır. Bazı API'lar güvenilir olmadığında ve biri başarılı olana kadar tekrarlama mekanizması olarak kullanılabilir.

Ö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 çok asenkron işlem: Promise.all() gibi yöntemler kullanarak birden fazla asenkron görevi 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

JavaScript'te Promise SınıfıJavaScript'te Jeneratör Fonksiyonlar