JavaScript'te Promise Sınıfı

Bu makalede, JavaScript'teki Promise sınıfını açıklıyoruz.

YouTube Video

Promise

Promise sınıfı, asenkron işlemleri yönetmek için bir sınıftır. İşlem başarılı olursa sonuçları, başarısız olursa hata yönetimini ele alır. Geleneksel olarak, bir asenkron işlemin bitmesini beklemek gerektiğinde geri çağırma işlevleri kullanılırdı, ancak Promise bunu daha net ve daha güçlü hale getirir.

1const promise = new Promise((resolve, reject) => {
2    setTimeout(() => resolve("Done!"), 1000);
3});
4
5// Displays "Done!" after 1 second
6promise.then(result => console.log(result));

• Bu kod, bir saniye sonra "Bitti!" gösteren asenkron bir işlemin örneğidir.
  • Önce, new Promise kullanılarak yeni bir Promise nesnesi oluşturulur. Argüman, iki geri çağırma alan bir fonksiyondur: başarı için resolve ve başarısızlık için reject.
  • setTimeout, bir saniye sonra resolve() çağırmak için kullanılır.
  • promise nesnesinin then() yöntemi tamamlanmayı bekler ve sonucu gösterir.

Temel Yapı

Promise, eninde sonunda başarı veya başarısızlık ile sonuçlanan bir nesnedir.

 1const promise = new Promise((resolve, reject) => {
 2    // Asynchronous operation
 3    // Flag indicating whether the operation was successful
 4    const success = true;
 5
 6    if (success) {
 7        resolve('Operation successful!');
 8    } else {
 9        reject('An error occurred');
10    }
11});

• Başarı durumunda, resolve() çağrılır.
• Başarısızlık durumunda ise reject() çağrılır.

Promise nesnesinin üç durumu vardır.

1promise
2    .then((result) => {
3        console.log(result);
4    })
5    .catch((error) => {
6        console.error(error);
7    })

• Beklemede
  • Asenkron işlem henüz tamamlanmadı.
• Gerçekleşti
  • Asenkron işlem başarılı oldu ve sonuç resolve() tarafından döndürüldü. Sonuç, then() yöntemi kullanılarak alınır.
• Reddedildi
  • Asenkron işlem başarısız oldu ve bir hata reject() aracılığıyla ortaya çıktı. Hata, catch() yöntemi kullanılarak alınır.

then() ve catch() Metotları

Promise kullanarak, bir asenkron işlem tamamlandığında ne yapılacağını tanımlayabilirsiniz. Bunun için, then() ve catch() metotlarını kullanırsınız.

then()

1const promise = new Promise((resolve, reject) => {
2    resolve('Operation successful!');
3});
4
5promise.then((result) => {
6    console.log(result);  // "Operation successful!"
7});

• then() metodu, Promise başarılı olduğunda çağrılacak bir işlevi belirtir.

catch()

1const promise = new Promise((resolve, reject) => {
2    reject('An error occurred');
3});
4
5promise.catch((error) => {
6    console.error(error);  // "An error occurred"
7});

• catch() metodu, Promise başarısız olduğunda çağrılacak bir işlevi belirtir.

finally() Metodu

 1const promise = new Promise((resolve, reject) => {
 2    resolve('Operation successful!');
 3});
 4
 5promise
 6    .then((result) => {
 7        console.log(result);
 8    })
 9    .catch((error) => {
10        console.error(error);
11    })
12    .finally(() => {
13        console.log('The operation has completed');
14    });

• finally() metodu, Promise başarılı veya başarısız olsun, sonunda çalıştırılacak kodu tanımlar.

then() Zinciri

then() yeni bir Promise döndürür, bu yüzden bir sonraki then() fonksiyonunu zincirleyebilirsiniz.

 1const promise = new Promise((resolve, reject) => {
 2    setTimeout(() => {
 3        resolve(1);
 4    }, 1000);
 5});
 6
 7promise
 8    .then(result => {
 9        console.log(result); // 1
10        return result + 1;
11    })
12    .then(result => {
13        console.log(result); // 2
14        return result + 1;
15    })
16    .then(result => {
17        console.log(result); // 3
18    })
19    .catch(error => {
20        console.error(error.message); // Something went wrong
21    });

• Bu kodda, ilk resolve() 1 değerini iletir ve bir then tarafından döndürülen her değer bir sonraki then'e aktarılır.
• catch() kullanarak zincirde oluşan herhangi bir hatayı tek bir yerde yakalayabilirsiniz.

Pratik Örnek

Örneğin, Promises genellikle bir sunucudan veri almak için kullanılır. Hadi fetch() API'sini kullanan bir örneğe bakalım.

 1fetch('https://codesparklab.com/json/example.json')
 2    .then(response => {
 3        if (!response.ok) {
 4            throw new Error('Network error');
 5        }
 6        return response.json();
 7    })
 8    .then(data => {
 9        console.log(data);
10    })
11    .catch(error => {
12        console.error('Error:', error);
13    });

• Bu kodda, fetch() bir Promise döndürdüğünden, sunucudan yanıt alındıktan sonra verileri işlemek için then() kullanılır. Hatalar catch() kullanılarak ele alınır.

Birden Fazla Promise'i Yönetmek

Promise.all()

Birden fazla Promise'i aynı anda yürütmek ve yalnızca hepsi başarılı olursa devam etmek için Promise.all() kullanın.

 1const promise1 = Promise.resolve(1);
 2const promise2 = Promise.resolve(2);
 3const promise3 = Promise.resolve(3);
 4
 5Promise.all([promise1, promise2, promise3])
 6    .then((results) => {
 7        console.log(results);  // [1, 2, 3]
 8    })
 9    .catch((error) => {
10        console.error('Error :', error);
11    });

• then() yalnızca tüm Promise'ler başarılı olursa çağrılır. Bir tanesi bile başarısız olursa catch() çağrılır.

Promise.allSettled()

Birden fazla Promise'i aynı anda çalıştırmak ve başarı veya başarısızlıktan bağımsız olarak tüm sonuçları almak istiyorsanız, Promise.allSettled() kullanın.

 1const promise1 = Promise.resolve(1);
 2const promise2 = Promise.reject("Failed");
 3const promise3 = Promise.resolve(3);
 4
 5Promise.allSettled([promise1, promise2, promise3])
 6    .then((results) => {
 7        results.forEach(result => console.log(result));
 8        // [
 9        //   { status: 'fulfilled', value: 1 },
10        //   { status: 'rejected', reason: 'Failed' },
11        //   { status: 'fulfilled', value: 3 }
12        // ]
13    });

• Tüm Promise'ler sonuçlandığında (ya yerine getirildiğinde ya da reddedildiğinde), then() çağrılır. Her sonuç bir status özelliği içerir ('fulfilled' veya 'rejected'). Bazıları başarısız olsa bile, bu diğer işlemleri etkilemez.

Promise.race()

Promise.race(), ilk sonuçlanan (gerçekleşen veya reddedilen) Promise'ın sonucunu döndürür.

1const promise1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
2const promise2 = new Promise((resolve) => setTimeout(resolve, 500, 'Second'));
3
4Promise.race([promise1, promise2]).then((result) => {
5    console.log(result);  // "First"
6});

• Bu örnekte olduğu gibi, tamamlanan ilk Promise'in sonucu döndürülür.

async/await ile İlişki

async/await söz dizimini kullanarak Promises'i daha sezgisel bir şekilde yazabilirsiniz. Bir async fonksiyonu her zaman bir Promise döndürür, ve await Promise'in çözülmesini bekler.

 1async function fetchData() {
 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 :', error);
 8    }
 9}
10
11fetchData();

Bu şekilde async/await kullanarak, asenkron işlemler senkron kod gibi yazılabilir, bu da kodu daha okunabilir hale getirir.

Özet

• Promise, asenkron işlemlerin başarı veya başarısızlık durumlarını yönetmek için bir nesnedir.
• Başarılı işlemleri then() ile, hataları ise catch() ile yönetin.
• finally(), başarı veya başarısızlık fark etmeksizin en sonunda yürütülen kodu tanımlar.
• Birden fazla Promise'i Promise.all() veya Promise.race() kullanarak birlikte işleyebilirsiniz.
• async/await, Promise'leri daha basit bir şekilde yazmak için kullanılan bir söz dizimidir.

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

YouTube Video