async ve await
Bir async fonksiyonda eşzamansız adımlar sırayla okunur. await, Promise’ı yalnızca o fonksiyon içinde bekler; sayfayı veya diğer JavaScript kodunu dondurmaz.
await neyi bekletir?
Fonksiyon await noktasında denetimi geçici olarak tarayıcıya verir. Diğer olaylar çalışabilir. Promise tamamlanınca fonksiyon aynı yerden sürer.
async her zaman Promise döndürür
Fonksiyon bir metin döndürse bile çağrı, o metinle tamamlanan Promise verir. Hata fırlatılırsa Promise reddedilir.
Sonucu await sonrasında okuyun
pour bir Promise döndürür. serve önce waiting yazar, bekler ve ardından lida tea değerini alır.
function pour(order) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
if (order === "") reject("no leaves");
else resolve(order + " tea");
}, 100);
});
}
async function serve() {
console.log("waiting");
let drink = await pour("lida");
console.log(drink);
}
serve();
Çıktılar waiting ve sonra lida tea olur. İkisi de serve içindedir; ikinci satır Promise tamamlanınca çalışır.
Çağıran kod Promise alır
serve() çağrısı await olmadan içeceği doğrudan vermez.
async function serve() {
return "lida tea";
}
let ticket = serve();
console.log(ticket instanceof Promise);
Çıktı true olur: ticket bir Promise’tır. Değeri başka bir async fonksiyonda await ya da then ile okuyun.
Reddi try ve catch ile yönetin
Beklenen Promise reddedilirse await noktasında hata fırlatılmış gibi davranır. İşlemi try içine koyun.
function pour(order) {
return order === ""
? Promise.reject("no leaves")
: Promise.resolve(order + " tea");
}
async function serveEmpty() {
try {
await pour("");
} catch (reason) {
console.log(reason);
}
}
serveEmpty();
Çıktı no leaves olur. Aynı try bloğundaki sonraki hatalar da bu catch bölümüne gelir.
Sayfanın geri kalanı çalışır
Yalnızca mevcut async fonksiyon bekler. Çağrı hemen Promise döndürdüğü için sonraki eşzamanlı kod sürebilir.
Tarayıcıda tam örnek
Örnek aşamaları tek bir async fonksiyonda kaydeder. Kısa zamanlayıcı Promise’ı tamamlar; sunucu gerekmez.
<!DOCTYPE html>
<html>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
function pour(order) {
return new Promise(resolve => setTimeout(() => resolve(order + " tea"), 100));
}
async function serve() {
const cup = document.getElementById("cup");
const seen = ["waiting"];
cup.textContent = "waiting";
const drink = await pour("lida");
cup.textContent = drink;
seen.push(drink, "done");
document.getElementById("line").textContent = seen.join(" / ");
}
serve();
</script>
</body>
</html>
Son satır waiting / lida tea / done olur. done, beklenen değer yazıldıktan sonra eklenir.
Deneyin
lida adını değiştirip sonucu bekleyin. Ardından boş metin verin ve catch bölümünün no leaves aldığını görün.
Yaygın hatalar
async çağrıdan hazır metin beklemeyin. Normal fonksiyonda await kullanmayın ve tüm sayfanın durduğunu sanmayın.
Özet
async her zaman Promise döndürür. await, Promise sonuçlanana kadar yalnızca o fonksiyonu bekletir. Red için try/catch kullanın.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek