Fetch API
fetch(url) tarayıcıdan bir HTTP isteği göndermesini ister. Hemen, genellikle Response ile tamamlanan bir Promise döndürür; ayrıştırılmış JSON döndürmez.
Önce Response, sonra veri
await fetch(...) durum, başlıklar ve gövde akışını verir. response.json() gövde metnini okuyup JSON olarak ayrıştırır ve JavaScript verisi için başka bir Promise döndürür.
İki ayrı aşama
Yanıtın taşınmasıyla gövdenin ayrıştırılmasını ayırın. Gövdesi JSON olmayan bir yanıtın da anlamlı durumu olabilir.
📊 İstekten veriye
| İfade | Sonuç | Anlam |
|---|---|---|
| fetch(url) | Promise<Response> | istek başladı |
| await fetch(url) | Response | durum, başlıklar ve gövde akışı |
| response.json() | Promise<any> | gövdeyi okuma ve ayrıştırma |
| await response.json() | JavaScript verisi | ayrıştırılmış nesne veya değer |
fetch Promise döndürür
Bağımsız örnek yalnızca türü göstermek için Blob URL kullanır. Bu, tarayıcı belleğindeki kaynaktır; aynı kökenli HTTP endpoint değildir.
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
const ticket = fetch(url);
console.log(ticket instanceof Promise);
ticket.finally(() => URL.revokeObjectURL(url));
Çıktı true olur. Gerçek uygulamada Blob URL yerine /data/drink.json gibi HTTP yolu kullanın.
Response, ardından JSON bekleyin
Sonraki örnek aynı yerel kaynağı oluşturup iki aşamayı da bekler.
async function loadDrink() {
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
console.log(data.drink);
} finally {
URL.revokeObjectURL(url);
}
}
loadDrink();
Çıktı lida tea olur. Gerçek /data/drink.json dosyası {"drink":"lida tea"} içerebilir; okuma adımları değişmez.
HTTP hatalarını açıkça denetleyin
HTTP 404 veya 500 olsa da fetch genellikle tamamlanır. Ağ hatası reddedebilir; başarısız durum tek başına genelde reddetmez. response.ok ya da response.status değerine bakın.
const response = new Response("Not found", {
status: 404,
statusText: "Not Found"
});
console.log(response.ok);
console.log(response.status);
Oluşturulan yanıt false ve 404 yazdırır; gerçek fetch sonrasında da bu özellikler incelenir. API garanti etmiyorsa hata sayfasını JSON olarak ayrıştırmayın.
json da Promise döndürür
json() gövdeyi eşzamansız okuyup ayrıştırır.
const response = new Response('{"drink":"lida tea"}', {
headers: { "Content-Type": "application/json" }
});
const dataPromise = response.json();
console.log(dataPromise instanceof Promise);
dataPromise.then(data => console.log(data.drink));
Çıktı true olur. await response.json() sonrasında data JavaScript nesnesi, data.drink ise metindir.
Endpoint gerektirmeyen sayfa demosu
Demo Blob URL alır ve tek başına çalışır. Akışı ve 200 durumunu gösterir, fakat bunu sunucu isteği olarak sunmaz.
<!DOCTYPE html>
<html>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
async function load() {
const blob = new Blob(['{"drink":"lida tea"}'], { type: "application/json" });
const url = URL.createObjectURL(blob);
try {
const response = await fetch(url);
if (!response.ok) throw new Error("HTTP " + response.status);
const data = await response.json();
document.getElementById("cup").textContent = data.drink;
document.getElementById("line").textContent =
response.status + " / " + data.drink;
} finally {
URL.revokeObjectURL(url);
}
}
load();
</script>
</body>
</html>
Sayfa 200 / lida tea gösterir. Üretimde HTTP URL kullanın ve ayrıştırmadan önce ok denetimini koruyun.
Deneyin
Yerel sunucuda /data/drink.json oluşturup Blob URL’yi değiştirin. Sonra eksik yol isteyip ok ve status değerlerini karşılaştırın.
Yaygın hatalar
fetch Promise’ını veri sanmayın. json() çağırıp beklemeyi unutmayın. Her 404 için yalnızca catch bölümüne güvenmeyin.
Özet
fetch istek gönderip Response Promise’ı verir. ok değerini denetleyin, ardından beklenen gövdeyi ayrıştırın. response.json() veri Promise’ı döndürür.
🧠 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