Asenkron JavaScript: Promise ve async/await

Şimdiye kadar yazdığın programlarda, Ders 10'daki setTimeout dışında, her satır bir öncekinin bitmesini bekledi; zaten hiçbiri beklemeye değecek kadar uzun sürmüyordu. Gerçek programlar ise sık sık bir şey bekler: internetten gelecek bir veri, diskten okunacak bir dosya, birkaç saniye sonra çalacak bir zamanlayıcı.

Bu derste programı dondurmadan beklemeyi öğreneceksin. Önce JavaScript'in bekleyişleri nasıl sıraya koyduğunu (olay döngüsü), sonra bekleyen bir işin sonucunu almanın üç yolunu göreceksin: callback, Promise ve async / await. Dersin sonunda Riot'un sunucusundan gerçek bir JSON çekecek ve birden çok isteği aynı anda bekleyeceksin.

Bu derste C:\kod\ogren klasöründe yeni bir ders15.js dosyasıyla başlıyorsun; dosyanın en üstünde await kullanmaya başlayacağımız yerde ikinci bir dosya, ders15.mjs açacağız. Her yeni örnekten önce dosyadaki eski kodu sil ya da satırların başına // koy. Örneklerin çoğu bir iki saniye bekliyor: terminal hemen dönmezse telaşlanma, program bekleyen işi kalmayınca kendiliğinden biter.

#Beklemek zorunda olan programlar

LoL istemcisinde Koleksiyon sekmesine tıkladığını düşün. İstemci kostümlerinin listesini Riot'un sunucusundan ister; cevap yarım saniyede, kötü bir günde birkaç saniyede gelir. İstemci bu sürede donup kalsaydı ne sohbete yazabilir ne de kuyruktan çıkabilirdin.

Beklemek gereken işler her yerde: internetten veri almak, dosya okumak, bir süre sonra bir şey yapmak. JavaScript bu sorunu şöyle çözer: uzun sürecek bir işi başlatır, sonucunu beklemeden sonraki satıra geçer; sonuç hazır olunca haber alır ve işin devamını o zaman yapar.

Ders 10'daki setTimeout tam olarak böyle davranıyordu. ders15.js dosyasını oluştur ve şunu yaz:

1console.log("1. Kuyruğa girdin")2setTimeout(() => {3    console.log("2. Maç bulundu")4}, 2000)5console.log("3. Bu arada rünlerini düzenliyorsun")

1. Kuyruğa girdin3. Bu arada rünlerini düzenliyorsun2. Maç bulundu

setTimeout iki saniyelik beklemeyi başlatır ve hemen biter; program 5. satıra geçip 3'ü yazar. Süre dolunca verdiğin callback çağrılır ve 2 yazılır. Program bekleyen bir işi olduğu için iki saniye boyunca kapanmaz, iş bitince kendiliğinden biter.

Bekleyen bir işin sonucunu almanın üç yolu var ve bu ders üçünü de sırayla öğretiyor: callback (en eski yol), Promise (bugünün temeli) ve async / await (bugün en çok yazılan). Üçünün altında da aynı düzen çalışıyor; önce onu tanı.

#Olay döngüsü: sırayı kim belirliyor?

Ders 10'un sonundaki soruyu, harfler yerine sayılarla, bu kez kendin çalıştır. Süre sıfır milisaniye:

1console.log("1")2setTimeout(() => {3    console.log("2")4}, 0)5console.log("3")

132

Sıfır milisaniye "hemen" demek değil mi? Değil; nedenini anlamak için JavaScript'in bekleyişleri nasıl düzenlediğine bakmak gerekiyor.

JavaScript aynı anda yalnızca tek bir iş yapar; bekleme gerektiren işleri kendisi beklemez, Node'a devreder. Bu düzenin üç parçası var:

• Çağrı yığını (call stack): şu an çalışan kod ve onu çağıran fonksiyonlar, üst üste. Onu Ders 13'te tanıdın; yığın izi, hata anında bu yığının dökümüydü. JavaScript yalnızca yığının en üstündekini çalıştırır.
• Node'un arka planı: zamanlayıcıları sayan, internetten gelecek cevabı bekleyen kısım. Bekleme burada olur, JavaScript'in elini meşgul etmez.
• Görev kuyruğu (task queue): süresi dolan ya da cevabı gelen işlerin sıraya girdiği yer. İlk giren ilk çıkar.

Olay döngüsü (event loop) bu parçaları birbirine bağlayan kuraldır: "Yığın boş mu? Boşsa kuyruktaki ilk görevi al, yığına koy, çalıştır. Sonra yeniden bak." Program bitene kadar bu döngü döner.

Şimdi 1, 3, 2 çıktısını adım adım izle:

Kural: kuyruktaki bir iş, o anda çalışan kodun tamamı bitmeden başlamaz. setTimeout'a verdiğin süre "en erken bu kadar sonra" demektir, "tam bu kadar sonra" değil.

#Adım adım beklemek: callback cehennemi

Bekleyen işler çoğu zaman birbirine bağlıdır: önce maç bulunmalı, sonra şampiyon seçilmeli, sonra yükleme ekranı bitmeli. "Bu iş bitince şunu yap" demenin ilk yolu, fonksiyona bir callback vermektir. Aşağıda her adım yarım saniye sürüyor ve bitince kendisine verilen sonra fonksiyonunu çağırıyor:

1function macBul(sonra) {2    setTimeout(() => {3        console.log("Maç bulundu")4        sonra()5    }, 500)6}7 8function sampiyonSec(sonra) {9    setTimeout(() => {10        console.log("Ahri seçildi")11        sonra()12    }, 500)13}14 15function yuklemeEkrani(sonra) {16    setTimeout(() => {17        console.log("Yükleme ekranı bitti")18        sonra()19    }, 500)20}21 22macBul(() => {23    sampiyonSec(() => {24        yuklemeEkrani(() => {25            console.log("Sihirdar Vadisi'ne hoş geldin")26        })27    })28})

Maç bulunduAhri seçildiYükleme ekranı bittiSihirdar Vadisi'ne hoş geldin

Çalışıyor. Ama son yedi satıra bak: her adım bir öncekinin içine yazılıyor ve kod her adımda biraz daha sağa kayıyor. Üstelik gerçek hayatta her adım başarısız olabilir: maç bulunamaz, şampiyonu başkası kapar. Callback'li kodda bunun için her callback'e bir de hata parametresi eklenir ve her seviyede ayrı ayrı denetlenir:

macBul((hata) => {    if (hata) {        console.log("Maç bulunamadı: " + hata.message)        return    }    sampiyonSec((hata, sampiyon) => {        if (hata) {            console.log("Seçim olmadı: " + hata.message)            return        }        yuklemeEkrani((hata) => {            if (hata) {                console.log("Yükleme olmadı: " + hata.message)                return            }            console.log(sampiyon + " ile Sihirdar Vadisi'ne hoş geldin")        })    })})

Üç adımda bile kodun şekli yana yatmış bir piramide döndü. On adımlı bir işte (giriş yap, profili al, maç geçmişini al, her maçın ayrıntısını al…) piramit ekrandan taşar; hangi }) hangi adımı kapatıyor bulmak zorlaşır, araya bir adım eklemek bütün yapıyı bozar. Bu duruma callback cehennemi denir.

#Promise: sonucun sözü

Callback'te "iş bitince bunu çağır" diye işe bir fonksiyon verirdin. Promise'te tersi olur: asenkron iş sana hemen bir obje verir. Bu obje "sonuç şu an yok ama gelecek; gelince haber vereceğim" diyen bir sözdür. Sözü bir değişkene koyabilir, başka bir fonksiyona verebilir, sonuç gelince ne yapılacağını sonradan söyleyebilirsin.

#Promise oluşturmak: new Promise ve resolve

Bir Promise'i new Promise(...) ile oluşturursun. new sözcüğünü Ders 13'te new Error(...) yazarken gördün; tam olarak ne yaptığını Ders 16'da öğreneceksin, şimdilik "yeni bir Promise oluştur" diye oku.

Parantezin içine bir fonksiyon verirsin. JavaScript bu fonksiyonu hemen çalıştırır ve ona parametre olarak başka bir fonksiyon uzatır. Parametrenin adını sen koyarsın, ama herkes resolve (İngilizcede "sonuçlandır") der. İş bitince resolve(değer) çağırırsın; Promise tamamlanır ve o değeri taşır.

1const davet = new Promise((resolve) => {2    setTimeout(() => {3        resolve("Lux daveti kabul etti")4    }, 1000)5})6 7console.log(davet)8davet.then((cevap) => {9    console.log(cevap)10    console.log(davet)11})

Promise { <pending> }Lux daveti kabul ettiPromise { 'Lux daveti kabul etti' }

• console.log(davet) hemen çalıştı. Bir saniye henüz dolmadığı için Promise bekliyor; Node bunu Promise { <pending> } diye gösterir (pending: bekliyor). Bu yazıyı aklında tut, Sık hatalar bölümünde yeniden karşına çıkacak.
• davet.then(fonksiyon) "Promise tamamlanınca bu fonksiyonu çağır ve değeri ona ver" demek. Then İngilizcede "sonra" demek.
• Bir saniye sonra resolve("Lux daveti kabul etti") çağrıldı. Promise tamamlandı ve then'e verdiğin fonksiyon bu metni cevap parametresiyle aldı.
• Son satırda Promise artık değerini taşıyor: Promise { 'Lux daveti kabul etti' }.

#Reddetmek: reject, catch ve finally

Davet reddedilebilir de. new Promise'e verdiğin fonksiyon ikinci bir parametre alır: reject ("reddet"). reject(hata) çağırınca Promise reddedilir. Hata olarak Ders 13'teki gibi bir Error objesi vermek iyi bir alışkanlıktır: mesajı ve yığın izi de yanında gelir.

Aşağıdaki fonksiyon her çağrıldığında yeni bir davet (Promise) oluşturup return ile geri veriyor. Teemo her daveti reddediyor; kim bilir, belki mantar dikmekle meşgul:

1function davetEt(oyuncu) {2    return new Promise((resolve, reject) => {3        setTimeout(() => {4            if (oyuncu === "Teemo") {5                reject(new Error(oyuncu + " daveti reddetti"))6            } else {7                resolve(oyuncu + " daveti kabul etti")8            }9        }, 1000)10    })11}

davetEt("Ahri") çağrısının sonucu bir Promise. Onu karşılamak için üç metot var. Fonksiyonun altına, 13. satırdan başlayarak yaz:

13davetEt("Ahri")14    .then((cevap) => {15        console.log(cevap)16    })17    .catch((hata) => {18        console.log("Olmadı: " + hata.message)19    })20    .finally(() => {21        console.log("Davet penceresi kapandı")22    })

Ahri daveti kabul ettiDavet penceresi kapandı

Şimdi 13. satırdaki "Ahri" yerine "Teemo" yaz ve yeniden çalıştır:

13davetEt("Teemo")14    .then((cevap) => {15        console.log(cevap)16    })17    .catch((hata) => {18        console.log("Olmadı: " + hata.message)19    })20    .finally(() => {21        console.log("Davet penceresi kapandı")22    })

Olmadı: Teemo daveti reddettiDavet penceresi kapandı

then, catch ve finally alt alta, başlarına nokta koyarak yazılır; aynı zincirin halkalarıdır. Her biri yeni bir Promise döndürdüğü için arkasına bir sonrakini ekleyebiliyorsun.

#Zincirleme: cehennemden çıkış

Zincirin asıl gücü şu: then'e verdiğin fonksiyon bir Promise döndürürse, zincirdeki sonraki halka o Promise'in sonuçlanmasını bekler. Böylece iç içe callback'ler yerine alt alta halkalar yazarsın. Bunu denemek için önce verilen süre kadar bekleyen küçük bir yardımcı yaz, bekle. Callback cehennemindeki maç akışı onunla şöyle olur:

1function bekle(ms) {2    return new Promise((resolve) => {3        setTimeout(resolve, ms)4    })5}6 7bekle(500)8    .then(() => {9        console.log("Maç bulundu")10        return bekle(500)11    })12    .then(() => {13        console.log("Ahri seçildi")14        return bekle(500)15    })16    .then(() => {17        console.log("Yükleme ekranı bitti")18        console.log("Sihirdar Vadisi'ne hoş geldin")19    })

Maç bulunduAhri seçildiYükleme ekranı bittiSihirdar Vadisi'ne hoş geldin

bekle yalnızca bekleyip tamamlanan bir Promise döndürüyor. setTimeout'a callback olarak doğrudan resolve'u verdik: süre dolunca resolve çağrılır, Promise tamamlanır. Kod artık sağa kaymıyor; her then bir sonraki bekleyişi return ile zincire veriyor. Bir adımda hata çıksaydı, zincirin sonuna koyacağın tek bir catch hepsini yakalardı.

#Ret yakalanmazsa

Reddedilen bir Promise'in catch'i yoksa Node bunu "kimse ilgilenmedi" diye yorumlar ve programı çökertir. davetEt aynı; ama bu kez çağrıda catch yok ve programın sonunda iki saniyelik bir zamanlayıcı daha var:

1function davetEt(oyuncu) {2    return new Promise((resolve, reject) => {3        setTimeout(() => {4            if (oyuncu === "Teemo") {5                reject(new Error(oyuncu + " daveti reddetti"))6            } else {7                resolve(oyuncu + " daveti kabul etti")8            }9        }, 1000)10    })11}12 13davetEt("Teemo").then((cevap) => {14    console.log(cevap)15})16setTimeout(() => {17    console.log("Bu satır hiç çalışmayacak")18}, 2000)

C:\kod\ogren\ders15.js:5                reject(new Error(oyuncu + " daveti reddetti"))                       ^ Error: Teemo daveti reddetti    at Timeout._onTimeout (C:\kod\ogren\ders15.js:5:24)    ... Node.js v24.20.0

Hata, reject satırını (5. satır) gösteriyor. İki saniyelik zamanlayıcının mesajı hiç gelmedi: program, ret yakalanmadığı anda durdu. Bu, Ders 13'teki yakalanmamış throw ile aynı sonuç. Kural: her Promise zincirinin sonunda bir catch olsun (ya da birazdan göreceğin try / catch).

#async ve await: asenkron kodu düz yazmak

Promise zinciri callback piramidinden çok daha düzenli. Ama her adım hâlâ bir fonksiyonun içinde; bir adımın sonucunu üç adım sonra kullanmak istersen değeri zincir boyunca taşımak zorlaşır. async ve await aynı Promise'leri kullanır ama kodu senkron kod gibi, yukarıdan aşağı yazmanı sağlar. İki kuralı var:

• Bir fonksiyonun başına async (asynchronous, yani asenkron sözcüğünün kısaltması) yazarsan o fonksiyon her zaman bir Promise döndürür. return ile verdiğin değer o Promise'in değeri olur.
• async bir fonksiyonun içinde bir Promise'in önüne await (İngilizcede "beklemek") yazarsan fonksiyon orada duraklar; Promise tamamlanınca değeriyle kaldığı yerden devam eder.

1async function sampiyonGetir() {2    return "Ahri"3}4 5console.log(sampiyonGetir())

Promise { 'Ahri' }

return "Ahri" yazdık ama gelen şey bir Promise; içinde 'Ahri' değeri var. Değeri almak için ya then kullanırsın ya da await. İkincisi daha okunaklı. Maç akışının üçüncü ve son hâli:

1function bekle(ms) {2    return new Promise((resolve) => {3        setTimeout(resolve, ms)4    })5}6 7async function oyunaGir() {8    await bekle(500)9    console.log("Maç bulundu")10    await bekle(500)11    console.log("Ahri seçildi")12    await bekle(500)13    console.log("Yükleme ekranı bitti")14    console.log("Sihirdar Vadisi'ne hoş geldin")15}16 17oyunaGir()18console.log("Bu satır beklemeden çalışır")

Bu satır beklemeden çalışırMaç bulunduAhri seçildiYükleme ekranı bittiSihirdar Vadisi'ne hoş geldin

İki şeye dikkat et. Birincisi, kod düz bir fonksiyon gibi okunuyor: bekle, yaz, bekle, yaz. İkincisi, en alttaki console.log ilk sırada çıktı.

await yalnızca içinde bulunduğu fonksiyonu duraklatır, bütün programı değil: oyunaGir() ilk await'e gelince geriye bekleyen bir Promise bırakıp kenara çekilir, program da kaldığı yerden devam eder. Olay döngüsü yine iş başında.

Aynı maç akışını üç biçimde yazdın. Yan yana:

#Hataları yakalamak: try / catch

await ettiğin Promise reddedilirse await satırı, tıpkı throw gibi bir hata fırlatır. Bu yüzden Ders 13'teki try / catch / finally olduğu gibi çalışır. davetEt'i de async ile yeniden yazalım. Artık new Promise yazmaya gerek yok: async fonksiyonda throw Promise'i reddeder, return tamamlar.

1function bekle(ms) {2    return new Promise((resolve) => {3        setTimeout(resolve, ms)4    })5}6 7async function davetEt(oyuncu) {8    await bekle(1000)9    if (oyuncu === "Teemo") {10        throw new Error(oyuncu + " daveti reddetti")11    }12    return oyuncu + " daveti kabul etti"13}14 15async function lobiKur() {16    try {17        const cevap = await davetEt("Teemo")18        console.log(cevap)19        console.log("Kuyruğa giriliyor")20    } catch (hata) {21        console.log("Olmadı: " + hata.message)22    } finally {23        console.log("Davet penceresi kapandı")24    }25}26 27lobiKur()

Olmadı: Teemo daveti reddettiDavet penceresi kapandı

await davetEt("Teemo") satırı hata fırlattı. try'ın geri kalanı atlandı, catch çalıştı, en sonda finally. "Teemo" yerine "Ahri" yazarsan try sonuna kadar çalışır, catch atlanır, finally yine çalışır.

1function bekle(ms) {2    return new Promise((resolve) => {3        setTimeout(resolve, ms)4    })5}6 7function canYenile() {8    await bekle(1000)9    console.log("Can yenilendi")10}11 12canYenile()

C:\kod\ogren\ders15.js:8    await bekle(1000)    ^^^^^ SyntaxError: await is only valid in async functions and the top level bodies of modules    at wrapSafe (node:internal/modules/cjs/loader:1861:18)    ... Node.js v24.20.0

#En üst düzeyde await: yalnız ES modülünde

Şimdiye kadar await'i hep bir async fonksiyonun içinde yazdık. Dosyanın en üstünde, hiçbir fonksiyonun içinde değilken yazmak mümkün mü? Evet, ama yalnızca ES modülünde.

Ders 14'ten hatırla: Node bir dosyayı iki sistemden biriyle çalıştırır. import / export kullanan yeni sistem ES modülü, require kullanan eski sistem CommonJS. Adı .mjs ile biten dosya her zaman ES modülü, .cjs ile biten her zaman CommonJS sayılır; .js dosyalarında kararı package.json'daki type satırı verir. ders15.mjs adında yeni bir dosya aç ve şunu yaz:

1function bekle(ms) {2    return new Promise((resolve) => {3        setTimeout(resolve, ms)4    })5}6 7console.log("Geri dönüş başladı")8await bekle(1000)9console.log("Üsse döndün")

PS C:\kod\ogren> node ders15.mjsGeri dönüş başladıÜsse döndün

Şimdi bilerek hata yap. Aynı kodu File → Save As… ile ders15.cjs adıyla da kaydet ve çalıştır. .cjs uzantısı Node'a "bu dosya kesinlikle CommonJS" der. Kaydettikten sonra düzenleyicide ders15.cjs açık kalır; ders15.mjs olduğu gibi durur.

1function bekle(ms) {2    return new Promise((resolve) => {3        setTimeout(resolve, ms)4    })5}6 7console.log("Geri dönüş başladı")8await bekle(1000)9console.log("Üsse döndün")

PS C:\kod\ogren> node ders15.cjs(node:33392) Warning: Failed to load the ES module: C:\kod\ogren\ders15.cjs. Make sure to set "type": "module" in the nearest package.json file or use the .mjs extension.(Use `node --trace-warnings ...` to show where the warning was created)C:\kod\ogren\ders15.cjs:8await bekle(1000)^^^^^ SyntaxError: await is only valid in async functions and the top level bodies of modules    at wrapSafe (node:internal/modules/cjs/loader:1861:18)    ... Node.js v24.20.0

Ders 14'teki karar tablosuna yeni bir sütun ekleyelim: en üstte await nerede çalışır?

#fetch: internetten gerçek veri

Asenkron kodun en çok kullanıldığı yer internetten veri almaktır. Riot Games oyunun verilerini (sürümler, şampiyonlar, eşyalar) Data Dragon adlı, herkese açık bir adreste yayımlıyor; kullanmak için hesap ya da anahtar gerekmiyor. Programların veri aldığı bu tür adreslere API denir; API'leri Ders 24'te ayrıntılı göreceksin.

#Önce tarayıcıda bak

Şu adresi tarayıcının adres çubuğuna yapıştır: https://ddragon.leagueoflegends.com/api/versions.json

ddragon.leagueoflegends.com/api/versions.json

Gördüğün şey bir JSON dizisi: oyunun bütün sürümleri, en yenisi başta. Ders 12'de JSON.parse ile diziye çevirdiğin metinlerin aynısı. Chrome, Edge ya da Brave'de üstteki Pretty-print kutusunu işaretlersen her sürüm ayrı satırda görünür. Görüntü bu ders yazılırken alındı; sen baktığında listenin başında daha yeni sürümler olacak.

#fetch ile aynı veriyi programdan almak

fetch (İngilizcede "gidip getir") Node'da hazır gelir, paket kurman gerekmez. fetch(adres) o adrese bir istek gönderir ve hemen bir Promise döndürür. Promise, sunucunun yanıtı gelince tamamlanır.

Yanıtın içindeki JSON'u almak için bir adım daha var: yanit.json(), o da bir Promise döndürür. Explorer'da ders15.mjs'e tıklayıp aç, içini sil ve şunu yaz:

1const adres = "https://ddragon.leagueoflegends.com/api/versions.json"2const yanit = await fetch(adres)3console.log(yanit.status)4console.log(yanit.ok)5 6const surumler = await yanit.json()7console.log(surumler.length + " sürüm var")8console.log("En yeni sürüm: " + surumler[0])

200true501 sürüm varEn yeni sürüm: 16.20.1

Sende sürüm sayısı ve en yeni sürüm farklı çıkacak; Riot her yamada listeye yeni bir sürüm ekliyor. İnternet bağlantın yoksa bu kod hata verir; o hatayı Sık hatalar bölümünde göreceksin. Satırlar:

• yanit.status: durum kodu. Sunucu her yanıtın başına üç haneli bir kod koyar: 200 "tamam", 404 "bulunamadı", 403 "yasak", 500 "sunucuda hata" demek. Hepsini Ders 26'da göreceksin.
• yanit.ok: durum kodu 200 ile 299 arasındaysa true. "İstek başarılı mı?" sorusunun kısa cevabı.
• await yanit.json(): yanıtın gövdesini sonuna kadar okur ve JSON'dan JavaScript değerine çevirir; yani JSON.parse'ın işini de yapar.

Neden iki await? Yanıt iki parça gelir: önce başı (durum kodu ve başka bilgiler), sonra gövdesi (asıl veri). fetch'in Promise'i baş gelince tamamlanır. Gövde büyük olabilir ve parça parça gelir; onu sonuna kadar okumak ayrı bir bekleyiştir.

#fetch 404'te hata fırlatmaz

Adreste küçük bir yanlış yap: versions.json yerine surumler.json yaz.

1const adres = "https://ddragon.leagueoflegends.com/api/surumler.json"2const yanit = await fetch(adres)3const surumler = await yanit.json()4console.log("En yeni sürüm: " + surumler[0])

<anonymous_script>:1<?xml version="1.0" encoding="UTF-8"?>^ SyntaxError: Unexpected token '<', "<?xml vers"... is not valid JSON    at JSON.parse (<anonymous>)    ... Node.js v24.20.0

Bu adres için durum kodu ne? Data Dragon olmayan dosyalar için 404 (Not Found, bulunamadı) yerine 403 (Forbidden, yasak) döndürüyor; çoğu site 404 döndürür. Hangisi olursa olsun fetch hata fırlatmaz, yanit.ok ise false olur. Doğru kalıp şu: gövdeyi okumadan önce yanit.ok değerini denetle, başarısızsa hatayı kendin fırlat.

1const adres = "https://ddragon.leagueoflegends.com/api/versions.json"2 3async function surumleriGetir() {4    const yanit = await fetch(adres)5    if (!yanit.ok) {6        throw new Error("İstek başarısız: " + yanit.status)7    }8    const surumler = await yanit.json()9    return surumler10}11 12try {13    const surumler = await surumleriGetir()14    console.log("En yeni sürüm: " + surumler[0])15} catch (hata) {16    console.log("Sürümler alınamadı. " + hata.message)17}

En yeni sürüm: 16.20.1

Şimdi 1. satırdaki adresi yeniden surumler.json yap. Program bu kez çökmüyor, anlaşılır bir mesaj yazıyor:

1const adres = "https://ddragon.leagueoflegends.com/api/surumler.json"2 3async function surumleriGetir() {4    const yanit = await fetch(adres)5    if (!yanit.ok) {6        throw new Error("İstek başarısız: " + yanit.status)7    }8    const surumler = await yanit.json()9    return surumler10}11 12try {13    const surumler = await surumleriGetir()14    console.log("En yeni sürüm: " + surumler[0])15} catch (hata) {16    console.log("Sürümler alınamadı. " + hata.message)17}

Sürümler alınamadı. İstek başarısız: 403

surumleriGetir içindeki throw, fonksiyonun döndürdüğü Promise'i reddetti; await bu reddi hata olarak fırlattı ve catch yakaladı. Hata tek bir yerde, okunaklı bir mesajla karşılandı.

#Promise.all: aynı anda beklemek

Takımına üç davet göndereceksin. Her biri bir saniye sürüyor ve birbirlerini beklemeleri için hiçbir sebep yok. Aşağıdaki program önce üç daveti sırayla, sonra aynı anda bekliyor. Süreyi ölçmek için iki yeni araç var: console.time("ad") bir kronometre başlatır, console.timeEnd("ad") aynı adlı kronometreyi durdurup geçen süreyi yazar.

1function bekle(ms) {2    return new Promise((resolve) => {3        setTimeout(resolve, ms)4    })5}6 7async function davetEt(oyuncu) {8    await bekle(1000)9    if (oyuncu === "Teemo") {10        throw new Error(oyuncu + " daveti reddetti")11    }12    return oyuncu + " daveti kabul etti"13}14 15console.time("sırayla")16await davetEt("Ahri")17await davetEt("Lux")18await davetEt("Garen")19console.timeEnd("sırayla")20 21console.time("aynı anda")22const cevaplar = await Promise.all([davetEt("Ahri"), davetEt("Lux"), davetEt("Garen")])23console.timeEnd("aynı anda")24console.log(cevaplar)

sırayla: 3.025saynı anda: 1.014s[  'Ahri daveti kabul etti',  'Lux daveti kabul etti',  'Garen daveti kabul etti']

Promise.all'a (all: hepsi) bir Promise dizisi verirsin, o da sana tek bir Promise döndürür. Bu Promise, dizideki Promise'lerin hepsi tamamlanınca tamamlanır; değeri, sonuçlardan oluşan bir dizidir. Üç davet aynı anda başladığı için toplam süre en uzun süren davet kadar oldu: bir saniye. Sırayla yazdığında ise her await bir öncekinin bitmesini bekledi ve süreler toplandı.

Sonuç dizisinin sırası, işlerin bitiş sırası değil, senin verdiğin sıradır:

1function bekle(ms) {2    return new Promise((resolve) => {3        setTimeout(resolve, ms)4    })5}6 7async function davetEt(oyuncu, ms) {8    await bekle(ms)9    console.log(oyuncu + " cevap verdi")10    return oyuncu + " daveti kabul etti"11}12 13const cevaplar = await Promise.all([14    davetEt("Ahri", 1000),15    davetEt("Lux", 600),16    davetEt("Garen", 200)17])18console.log(cevaplar)

Garen cevap verdiLux cevap verdiAhri cevap verdi[  'Ahri daveti kabul etti',  'Lux daveti kabul etti',  'Garen daveti kabul etti']

Garen ilk cevap verdi ama dizide yine üçüncü sırada. Böylece hangi sonucun hangi işe ait olduğunu hep bilirsin.

Biri reddedilirse Promise.all da hemen reddedilir, ötekilerin sonucunu beklemez; ret catch'e düşer. Takım dizisini Ders 11'deki map ile Promise dizisine çevirmek de çok yaygın bir kalıptır:

1function bekle(ms) {2    return new Promise((resolve) => {3        setTimeout(resolve, ms)4    })5}6 7async function davetEt(oyuncu) {8    await bekle(1000)9    if (oyuncu === "Teemo") {10        throw new Error(oyuncu + " daveti reddetti")11    }12    return oyuncu + " daveti kabul etti"13}14 15const takim = ["Ahri", "Teemo", "Garen"]16try {17    const cevaplar = await Promise.all(takim.map((oyuncu) => davetEt(oyuncu)))18    console.log(cevaplar)19} catch (hata) {20    console.log("Takım kurulamadı: " + hata.message)21}

Takım kurulamadı: Teemo daveti reddetti

takim.map((oyuncu) => davetEt(oyuncu)) her oyuncu için bir davet başlatıp Promise'lerden oluşan bir dizi üretiyor. Teemo'nun reddi bütün takımı düşürdü.

1function davetEt(oyuncu) {2    return new Promise((resolve) => {3        setTimeout(() => {4            resolve(oyuncu + " daveti kabul etti")5        }, 500)6    })7}8 9const takim = ["Ahri", "Lux", "Garen"]10takim.forEach(async (oyuncu) => {11    const cevap = await davetEt(oyuncu)12    console.log(cevap)13})14console.log("Herkes hazır, kuyruğa giriyoruz")

Herkes hazır, kuyruğa giriyoruzAhri daveti kabul ettiLux daveti kabul ettiGaren daveti kabul etti

1function davetEt(oyuncu) {2    return new Promise((resolve) => {3        setTimeout(() => {4            resolve(oyuncu + " daveti kabul etti")5        }, 500)6    })7}8 9const takim = ["Ahri", "Lux", "Garen"]10for (const oyuncu of takim) {11    const cevap = await davetEt(oyuncu)12    console.log(cevap)13}14console.log("Herkes hazır, kuyruğa giriyoruz")

Ahri daveti kabul ettiLux daveti kabul ettiGaren daveti kabul ettiHerkes hazır, kuyruğa giriyoruz

#Sık hatalar

Bu derste karşılaşabileceğin öteki hatalar. Bütün derslerin hataları hata rehberinde.

1function bekle(ms) {2    return new Promise((resolve) => {3        setTimeout(resolve, ms)4    })5}6 7async function sampiyonGetir() {8    await bekle(500)9    return "Ahri"10}11 12const sampiyon = sampiyonGetir()13console.log("Seçilen şampiyon: " + sampiyon)14console.log(sampiyon)

Seçilen şampiyon: [object Promise]Promise { <pending> }

1function bekle(ms) {2    return new Promise((resolve) => {3        setTimeout(resolve, ms)4    })5}6 7async function sampiyonGetir() {8    await bekle(500)9    return "Ahri"10}11 12const sampiyon = await sampiyonGetir()13console.log("Seçilen şampiyon: " + sampiyon)14console.log(sampiyon)

Seçilen şampiyon: AhriAhri

1const davet = new Promise((resolve, reject) => {2    setTimeout(() => {3        reject("Teemo daveti reddetti")4    }, 500)5})6 7davet.then((cevap) => {8    console.log(cevap)9})

node:internal/process/promises:392      new UnhandledPromiseRejection(reason);      ^ UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "Teemo daveti reddetti".    at throwUnhandledRejectionsMode (node:internal/process/promises:392:7)    ...    at process.processTicksAndRejections (node:internal/process/task_queues:106:37) {  code: 'ERR_UNHANDLED_REJECTION'} Node.js v24.20.0

1const adres = "https://ddragon.leagueoflegends.cmo/api/versions.json"2const yanit = await fetch(adres)3console.log(yanit.status)

node:internal/modules/run_main:107    triggerUncaughtException(    ^ [TypeError: fetch failed] {  [cause]: Error: getaddrinfo ENOTFOUND ddragon.leagueoflegends.cmo      at GetAddrInfoReqWrap.onlookupall [as oncomplete] (node:dns:122:26) {    errno: -3008,    code: 'ENOTFOUND',    syscall: 'getaddrinfo',    hostname: 'ddragon.leagueoflegends.cmo'  }} Node.js v24.20.0

1const adres = "https://ddragon.leagueoflegends.com/api/versions.json"2const surumler = await fetch(adres).json()3console.log(surumler[0])

file:///C:/kod/ogren/ders15.mjs:2const surumler = await fetch(adres).json()                                    ^ TypeError: fetch(...).json is not a function    at file:///C:/kod/ogren/ders15.mjs:2:37    ... Node.js v24.20.0

#Görevler

Görevleri ders15.js ya da ders15.mjs dosyasında yap; en üstte await kullanacaksan .mjs. Önce kendin dene, takılırsan ipuçlarını sırayla aç. Son iki görev internet bağlantısı istiyor.

Zamanlayıcılar kurulduBu arada koridorda minyon kesiyorsunVadi Alameti doğduEjderha doğdu

1console.log("Zamanlayıcılar kuruldu")2setTimeout(() => {3    console.log("Ejderha doğdu")4}, 1500)5setTimeout(() => {6    console.log("Vadi Alameti doğdu")7}, 500)8console.log("Bu arada koridorda minyon kesiyorsun")

Zamanlayıcılar kurulduBu arada koridorda minyon kesiyorsunVadi Alameti doğduEjderha doğdu

Yeni can: 70İksir şişesi boşaldı

Olmadı: Ölü şampiyon iksir içemezİksir şişesi boşaldı

1function iksirIc(hp) {2    return new Promise((resolve, reject) => {3        setTimeout(() => {4            if (hp <= 0) {5                reject(new Error("Ölü şampiyon iksir içemez"))6            } else {7                resolve(Math.min(hp + 40, 100))8            }9        }, 500)10    })11}12 13iksirIc(30)14    .then((yeniHp) => {15        console.log("Yeni can: " + yeniHp)16    })17    .catch((hata) => {18        console.log("Olmadı: " + hata.message)19    })20    .finally(() => {21        console.log("İksir şişesi boşaldı")22    })

Yeni can: 70İksir şişesi boşaldı

321Savaş başladı!

1function bekle(ms) {2    return new Promise((resolve) => {3        setTimeout(resolve, ms)4    })5}6 7async function geriSay(saniye) {8    for (let kalan = saniye; kalan >= 1; kalan--) {9        console.log(kalan)10        await bekle(1000)11    }12    console.log("Savaş başladı!")13}14 15geriSay(3)

321Savaş başladı!

https://ddragon.leagueoflegends.com/cdn/SÜRÜM/data/tr_TR/champion/Ahri.json

Ahri: Dokuz Kuyruklu Tilki

1const ddragon = "https://ddragon.leagueoflegends.com"2 3async function jsonGetir(adres) {4    const yanit = await fetch(adres)5    if (!yanit.ok) {6        throw new Error("İstek başarısız: " + yanit.status)7    }8    const veri = await yanit.json()9    return veri10}11 12async function sampiyonUnvani(isim) {13    const surumler = await jsonGetir(ddragon + "/api/versions.json")14    const surum = surumler[0]15    const veri = await jsonGetir(`${ddragon}/cdn/${surum}/data/tr_TR/champion/${isim}.json`)16    return veri.data[isim].title17}18 19try {20    const unvan = await sampiyonUnvani("Ahri")21    console.log("Ahri: " + unvan)22} catch (hata) {23    console.log("Hata: " + hata.message)24}

Ahri: Dokuz Kuyruklu Tilki

sırayla: 326.172msaynı anda: 195.205msGaren: Demacia'nın KudretiWarwick: Zaun'un Kafes Kaçkını BelasıAhri: Dokuz Kuyruklu TilkiJinx: DelifişekThresh: Zincirli Gardiyan

1const ddragon = "https://ddragon.leagueoflegends.com"2 3async function jsonGetir(adres) {4    const yanit = await fetch(adres)5    if (!yanit.ok) {6        throw new Error("İstek başarısız: " + yanit.status)7    }8    const veri = await yanit.json()9    return veri10}11 12const surumler = await jsonGetir(ddragon + "/api/versions.json")13const surum = surumler[0]14 15async function unvanSatiri(isim) {16    const veri = await jsonGetir(`${ddragon}/cdn/${surum}/data/tr_TR/champion/${isim}.json`)17    return isim + ": " + veri.data[isim].title18}19 20const takim = ["Garen", "Warwick", "Ahri", "Jinx", "Thresh"]21try {22    console.time("sırayla")23    for (const isim of takim) {24        await unvanSatiri(isim)25    }26    console.timeEnd("sırayla")27 28    console.time("aynı anda")29    const satirlar = await Promise.all(takim.map((isim) => unvanSatiri(isim)))30    console.timeEnd("aynı anda")31 32    satirlar.forEach((satir) => console.log(satir))33} catch (hata) {34    console.log("Hata: " + hata.message)35}

sırayla: 326.172msaynı anda: 195.205msGaren: Demacia'nın KudretiWarwick: Zaun'un Kafes Kaçkını BelasıAhri: Dokuz Kuyruklu TilkiJinx: DelifişekThresh: Zincirli Gardiyan

#Kendini sına

console.log("A")setTimeout(() => {    console.log("B")}, 100)setTimeout(() => {    console.log("C")}, 0)console.log("D")

async function altinGetir() {    return 300} console.log(altinGetir())

const davet = new Promise((resolve, reject) => {    resolve("Kabul")    reject(new Error("Ret"))    resolve("Yine kabul")}) davet    .then((cevap) => console.log(cevap))    .catch((hata) => console.log(hata.message))

// 1. parçaawait bekle(1000)await bekle(2000)await bekle(3000) // 2. parçaawait Promise.all([bekle(1000), bekle(2000), bekle(3000)])

async function surumleriGetir(adres) {    const yanit = await fetch(adres)    const surumler = await yanit.json()    return surumler}

bekle(100)    .then(() => 2)    .then((sayi) => sayi * 10)    .then((sayi) => console.log(sayi))

#Kayıt noktası

ders15.cjs yalnızca hatayı görmek içindi; Explorer'da ona sağ tıklayıp Delete ile sil. Sonra dersin kodunu Git'e kaydet. VS Code terminalinde, C:\kod\ogren klasöründeyken:

Bir sonraki derste aynı yapıda çok sayıda obje üretmenin yolunu öğreneceksin: class, constructor ve this. Bu derste kalıp olarak yazdığın new sözcüğü de orada anlam kazanacak.