TypeScript'te Async/await

Bu makale, TypeScript'te async/await'i açıklar.

YouTube Video

TypeScript'te Async/await

TypeScript'te async, asenkron işlemleri kısa yoldan tanımlamak için kullanılan bir anahtar kelimedir ve JavaScript'in async/await sözdizimiyle benzer şekilde çalışır. Async fonksiyonları, Promise döndüren fonksiyonların kullanımını daha sezgisel hale getirmek için tasarlanmıştır.

Async Fonksiyonların Temelleri

Async anahtar kelimesiyle tanımlanan fonksiyonlar her zaman bir Promise döner. İşte temel bir örnek:.

1async function fetchData(): Promise<string> {
2    return "Data received";
3}
4
5fetchData().then((data) => console.log(data)); // "Data received"

Bu örnekte, async fonksiyon her zaman bir Promise döndürdüğü için dönen değer, otomatik olarak Promise.resolve kullanılarak çözümlenir. Başka bir deyişle, "Data received" bir Promise<string> haline gelir ve asenkron bir işlem olarak ele alınır.

Await Anahtar Kelimesi

Await anahtar kelimesi yalnızca bir async fonksiyon içinde kullanılabilir. Bu, fonksiyon yürütülmesine devam etmeden önce bir Promise'in sonucunu beklemek ve duraklatma yeteneği sağlar.

Aşağıdaki örnekte, fetch kullanılarak yapılan asenkron işlem async/await ile yazılmıştır.

 1async function getUserData() {
 2    try {
 3        const response = await fetch("https://codesparklab.com/json/example.json");
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error("Error fetching user data:", error);
 8    }
 9}
10
11getUserData();

Bu örnekte, await kullanılarak fetch fonksiyonunun döndürdüğü Promise'in tamamlanması beklenir ve sonucu response değişkenine atanır. Ayrıca, response.json() sonucunun beklenmesi de sağlanır.

Async/Await ile Hata Yönetimi

Asenkron işlem sırasında meydana gelen hatalar, standart try...catch sözdizimi kullanılarak yakalanabilir. Await kısmında bir hata oluşursa, bu hata catch bloğunda ele alınır.

 1async function fetchDataWithErrorHandling() {
 2    try {
 3        const response = await fetch('https://invalid.codesparklab.com/');
 4        if (!response.ok) {
 5            throw new Error(`HTTP error! status: ${response.status}`);
 6        }
 7        const data = await response.json();
 8        console.log(data);
 9    } catch (error) {
10        console.error("Fetch error:", error);
11    }
12}
13
14fetchDataWithErrorHandling();

Yukarıdaki örnekte, fetch fonksiyonunun sonucu await kullanılarak beklenir ve bir hata oluşursa try...catch ile ele alınır.

Async/Await Avantajları

1. Sezgisel asenkron işlem: Async/await kullanarak kod akışı, Promise zincirlerini (then veya catch) kullanmaya kıyasla daha sezgisel hale gelir ve senkron işlem gibi yazılabilir.

2. Kolay hata yönetimi: Try...catch kullanmak, asenkron işlemlerde hata yönetimini basitleştirir. Promise zincirleri kullanmaktan daha okunabilir kod yazabilirsiniz.

Async Fonksiyonların Dönen Değerleri

async fonksiyonu her zaman bir Promise döndürür. Bu nedenle, açıkça bir Promise döndürmeden de, async anahtar kelimesi kullanılarak asenkron işlem yapılabilir.

1async function example() {
2    return 42;
3}
4
5example().then((result) => console.log(result)); // 42

Yukarıdaki kodda, senkron bir değer olan 42 döndürülmektedir, ancak async fonksiyonunun içinde olduğu için otomatik olarak Promise.resolve(42)'ye dönüştürülür.

Asenkron Fonksiyonların Sıralı Çalıştırılması

Birden fazla asenkron fonksiyonu ardışık olarak çalıştırırken, sıralamalarını kontrol etmek için await kullanılabilir.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function processData() {
19    const data1 = await fetchData1();
20    console.log(data1);
21
22    const data2 = await fetchData2();
23    console.log(data2);
24}
25
26processData();

Bu örnekte, fetchData2, fetchData1 tamamlandıktan sonra çalıştırılır. Bu, bir Promise zinciri kullanmaya kıyasla daha okunaklıdır.

Paralel Çalıştırma

Asenkron işlemleri paralel olarak çalıştırmak isterseniz, birden fazla Promise'i aynı anda işlemek için Promise.all kullanabilirsiniz.

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function fetchMultipleData() {
19    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
20    console.log(data1);
21    console.log(data2);
22}
23
24fetchMultipleData();

Bu durumda, fetchData1 ve fetchData2 aynı anda çalıştırılır ve ikisi de çözümlendikten sonra işleme devam edilir. Bu, birden fazla asenkron işlemin verimli şekilde işlenmesini sağlar.

Özet

• async fonksiyonu bir Promise döndürür ve await anahtar kelimesini kullanarak bir asenkron işlemin sonucunu bekleyebilirsiniz.
• try...catch kullanarak, asenkron işlemlerde hata ayıklama daha basit hale gelir.
• Promise.all kullanarak, birden fazla asenkron işlemi paralel olarak çalıştırmak mümkündür.

async/await, asenkron işlemlerin daha basit şekilde açıklanmasını sağladığı için TypeScript ve JavaScript'te yaygın olarak kullanılır.

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

YouTube Video