𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀 𝘃𝗲 𝗔𝘀𝘆𝗻𝗰/𝗔𝘄𝗮𝗶𝘁 𝗔ç̧𝗸̧𝗮𝗹𝗮𝗺𝗮𝘀ı

İnternetten pizza sipariş ettiğinizi düşünün.

Siparişinizi verirsiniz. Pizza gelene kadar kapıda hiçbir şey yapmadan beklemezsiniz. Video izler, çalışır veya arkadaşlarınızla konuşursunuz. Pizza geldiğinde ise yersiniz.

JavaScript de aynı şekilde çalışır.

API istekleri, veritabanı çağrıları ve zamanlayıcılar gibi işlemler zaman alır. Eğer JavaScript her bir görevin bitmesini bekleseydi, uygulamanız donardı. Bunun yerine JavaScript, sonuçları beklerken diğer kodları çalıştırmaya devam eder.

Promise Nedir?

Promise, gelecekte alacağınız bir değer için bir yer tutucudur.

Şu kodu çalıştırdığınızda: const promise = fetch("/users");

Veri henüz orada değildir. Promise şunu söyler: "Sonuç şu an elimde yok, ancak hazır olduğunda size haber vereceğim."

Bir Promise'in üç durumu vardır:

fetch() gibi çoğu modern API, otomatik olarak bir Promise döndürür. Bunları her seferinde manuel olarak oluşturmanıza gerek yoktur; sadece kullanırsınız.

.then() Ne İşe Yarar?

Birçok kişi .then()'in veriyi çektiğini düşünür. Öyle değildir.

.then(), bir callback (geri çağırma) fonksiyonu kaydeder. JavaScript'e şunu söylersiniz: "Bu Promise tamamlandığında, şu özel fonksiyonu çalıştır."

Bir yemek sipariş uygulaması gibidir. Yemek sipariş edersiniz ve uygulama size şunu söyler: "Yemek geldiğinde beni ara." Fonksiyon sinyali bekler.

Neden Async/Await Kullanılır?

Verileri adım adım almak için .then() çağrılarını birbirine bağlayabilirsiniz. Bu yöntem çalışır ancak uzun zincirler okunması zor yapılardır.

Async/await, kodunuzun normal, adım adım ilerleyen bir kod gibi görünmesini sağlar. Daha temizdir ve takibi daha kolaydır.

await JavaScript'i bloklar mı?

Bu yaygın bir mülakat sorusudur. Cevap hayır.

JavaScript bir await anahtar kelimesine ulaştığında, yalnızca o özel async fonksiyonu duraklatır. Uygulamanızın geri kalanı çalışmaya devam eder.

Örnek akış:

  1. Fonksiyon içindeki kodu çalıştır.
  2. await kısmına gel ve o fonksiyonu duraklat.
  3. Script'in geri kalanını çalıştır.
  4. Görev tamamlandığında fonksiyonu devam ettir.

Özet:

Kaynak: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm