Özet - Fetch API
fetch ile GET ve POST istekleri yapan ve hataları yöneten bir istemci fonksiyonu yazarsın.
Fetch API özeti
Bu grupta fetch ile bir sunucuya istek göndermeyi, yanıtı ve gövdeyi okumayı, başlık eklemeyi, POST ile veri göndermeyi ve HTTP hatalarını yönetmeyi öğrendin.
const response = await fetch(url, {
method: 'POST',
body: 'hello',
headers: { 'Content-Type': 'text/plain' }
});
if (!response.ok) {
throw new Error('HTTP ' + response.status);
}
const body = await response.text();Artık tek bir istemci fonksiyonu içinde tüm bu adımları birleştirebilirsin: isteği yap, hatayı denetle, gövdeyi oku ve sonucu döndür. İki kısa görevle bunu pekiştireceğiz.
Uygulama getData fonksiyonu yaz
url parametresini alan getData adında bir async fonksiyon yaz. İçinde await fetch(url) ile yanıtı response değişkenine al. Eğer !response.ok ise throw new Error('HTTP ' + response.status) ile hata fırlat. Sonra await response.text() ile gövdeyi body değişkenine al ve return body ile döndür.
Örnek çözümü göster
async function getData(url) {
const response = await fetch(url);
if (!response.ok) {
throw new Error('HTTP ' + response.status);
}
const body = await response.text();
return body;
}Uygulama postData fonksiyonu yaz
url ve body parametrelerini alan postData adında bir async fonksiyon yaz. İçinde await fetch(url, { method: 'POST', body: body, headers: { 'Content-Type': 'text/plain' } }) ile yanıtı response değişkenine al. Sonra response.status değerini return ile döndür.
Örnek çözümü göster
async function postData(url, body) {
const response = await fetch(url, {
method: 'POST',
body: body,
headers: { 'Content-Type': 'text/plain' }
});
return response.status;
}Kendini test et
-
Bir GET isteğinde gövdeyi okumak için ne yaparsın?
const response = await fetch(url);- await response.text() ile okursun
- response.body ile doğrudan okursun
- response.headers.get('body') ile okursun
- response.status ile okursun
Cevabı göster
await response.text() ile okursun — Doğru! Gövdeyi await response.text() ile okursun.
-
fetch parçalarını eşleştir
- fetch(url, options)
- İsteği gönderir
- await response.text()
- Gövdeyi okur
- if (!response.ok)
- Hata denetimi yapar
-
Hata denetimi ekle
const response = await fetch(url); if (____) { throw new Error('HTTP ' + response.status); }Cevabı göster
const response = await fetch(url); if (!response.ok) { throw new Error('HTTP ' + response.status); }