Bir önceki makalede async fonksiyonların otomatik olarak Promise döndürdüğünü öğrendik. Bu güzel, ancak asıl sihir async ve await birlikte kullanıldığında ortaya çıkıyor. await anahtar kelimesi, JavaScript'in asenkron davranışını tamamen değiştiriyor ve kodumuzu okumayı inanılmaz derecede kolaylaştırıyor.
await Nedir?
await, bir Promise'ın çözümlenmesini (resolve olmasını) bekler. Kodun çalışmasını o satırda duraklatır (pause eder), Promise sonuçlandığında devam eder.
⚠️ Önemli:
awaitanahtar kelimesi yalnızcaasyncfonksiyonlar içinde kullanılabilir.
Nasıl Çalışır?
// Promise döndüren bir fonksiyon
function bekle(saniye) {
return new Promise(resolve => setTimeout(resolve, saniye * 1000));
}
async function deneme() {
console.log("Başladı");
await bekle(2); // 2 saniye bekle (kod burada durur!)
console.log("2 saniye geçti");
}
deneme();Çıktı:
Başladı
(2 saniye bekleme süresi)
2 saniye geçtiEğer await kullanmasaydık, "2 saniye geçti" yazısı hemen yazılırdı.
Promise Zinciri vs async/await
Renk değiştirme örneğimizi hatırlayalım.
Eski Yöntem: Promise Zinciri (Promise Chaining)
renkDegistir('red', 1000)
.then(() => renkDegistir('orange', 1000))
.then(() => renkDegistir('yellow', 1000))
.then(() => renkDegistir('green', 1000))
.then(() => renkDegistir('blue', 1000))
.then(() => console.log("Bitti!"));Yeni Yöntem: async/await 🚀
async function gokkusagi() {
await renkDegistir('red', 1000);
await renkDegistir('orange', 1000);
await renkDegistir('yellow', 1000);
await renkDegistir('green', 1000);
await renkDegistir('blue', 1000);
console.log("Bitti!");
}
gokkusagi();Farkı görüyor musunuz? Kod sanki senkron (sıralı) çalışıyormuş gibi yukarıdan aşağıya akıyor. .then() yok, callback yok, parantez karmaşası yok!
Promise Değerlerini Almak
Promise bir değer döndürüyorsa, await bu değeri değişken olarak almanızı sağlar.
function veriGetir() {
return new Promise(resolve => {
setTimeout(() => resolve("Gizli Veri 123"), 1000);
});
}
// .then() ile
veriGetir().then(veri => {
console.log(veri);
});
// await ile
async function veriyiAl() {
const veri = await veriGetir(); // Promise'ın sonucunu değişkene ata
console.log(veri);
}Bu özellik, değişkenlerle çalışmayı çok kolaylaştırır.
Gerçek Hayat Örneği: Sıralı API İstekleri
Kullanıcı profilini ve ardından o kullanıcının siparişlerini getirmemiz gerektiğini düşünelim.
// .then ile (biraz karmaşık)
function kullaniciDetaylariniGoster(id) {
kullaniciGetir(id)
.then(kullanici => {
console.log("Kullanıcı:", kullanici.isim);
return siparisleriGetir(kullanici.id); // Promise chaining
})
.then(siparisler => {
console.log("Siparişler:", siparisler);
})
.catch(hata => console.log(hata));
}
// async/await ile (çok temiz!)
async function kullaniciDetaylariniGoster(id) {
try {
const kullanici = await kullaniciGetir(id);
console.log("Kullanıcı:", kullanici.isim);
const siparisler = await siparisleriGetir(kullanici.id);
console.log("Siparişler:", siparisler);
} catch (hata) {
console.log("Hata:", hata);
}
}Çoklu Promise Yönetimi: Sıralı vs Paralel
await kullanırken dikkatli olmalıyız. Bazen işlemleri sırayla, bazen de aynı anda (paralel) yapmak isteriz.
Sıralı İşlem (Yavaş) 🐢
async function sirali() {
const veri1 = await istekYap('/api/1'); // 1 saniye bekle
const veri2 = await istekYap('/api/2'); // 1 saniye bekle
const veri3 = await istekYap('/api/3'); // 1 saniye bekle
// Toplam süre: 3 saniye
console.log(veri1, veri2, veri3);
}Burada her işlem bir öncekinin bitmesini bekler. Eğer istekler birbirine bağlı değilse (örneğin veri2 için veri1'e ihtiyaç yoksa), bu performans kaybıdır.
Paralel İşlem (Hızlı) 🐇
Promise.all ile işlemleri aynı anda başlatıp hepsinin bitmesini bekleyebiliriz.
async function paralel() {
const promise1 = istekYap('/api/1');
const promise2 = istekYap('/api/2');
const promise3 = istekYap('/api/3');
// İstekler aynı anda başladı! Şimdi hepsinin bitmesini bekle
const sonuclar = await Promise.all([promise1, promise2, promise3]);
// Toplam süre: En yavaş istek kadar (~1 saniye)
console.log(sonuclar);
}Await Nerelerde Kullanılır?
await anahtar kelimesi:
asyncfonksiyonların içinde- ES Modüllerinin en üst seviyesinde (Top-level await) kullanılabilir.
Top-level Await (Modern JavaScript)
Modern tarayıcılarda ve Node.js sürümlerinde, modül dosyalarında (type="module") fonksiyon içine almadan await kullanabilirsiniz:
// script.js (type="module")
const veri = await fetch('/api/config').then(r => r.json());
console.log("Config yüklendi:", veri);
export default veri;Özet
Bu makalede öğrendiklerimiz:
✅ await, asenkron fonksiyonun çalışmasını Promise çözülene kadar duraklatır
✅ Asenkron kodu senkron (sıralı) kod gibi okumamızı sağlar
✅ .then() zincirlerini ortadan kaldırır
✅ Promise değerlerini doğrudan değişkene atayabiliriz
✅ Bağımsız işlemler için Promise.all ile paralel çalıştırmayı unutmamalıyız
Artık async/await ile temiz kod yazmayı biliyoruz. Peki ya bir hata olursa? await kullandığımızda .catch() metodunu zincirleyemiyoruz. Bir sonraki ve son makalemizde Async Fonksiyonlarda Hata Yönetimi konusunu derinlemesine inceleyeceğiz.
