fetch
- React Native kursu
- Orta seviye
- Ders 36/116
- 5 dk
fetch API ile HTTP isteği öğrenirsin.
fetch API nedir?
fetch, tarayıcı ve React Native'de HTTP isteği yapmanın standart yoludur. Bir URL alır ve bir Promise döndürür. Promise, isteğin sonucunu temsil eder; tamamlandığında yanıtı verir.
Temel kullanım: fetch("https://api.example.com/users"). Bu çağrı bir GET isteği yapar ve bir Promise döndürür. Promise'i .then() ile ya da await ile beklersin. fetch, modern JavaScript'in yerleşik parçasıdır; ek bir kütüphane gerektirmez. React Native'de axios gibi alternatifler de vardır ama fetch çoğu durumda yeterlidir. fetch'in döndürdüğü Promise, yanıt geldiğinde çözülür; ama ağ hatası olursa reddedilir.
Promise ve then
fetch bir Promise döndürür. Promise'i .then() ile yakalarsın. .then(response => ...) işlevi yanıt geldiğinde çağrılır. Yanıt bir Response nesnesidir; doğrudan veriyi içermez, veriyi çıkarmak için response.json() gibi metotlar çağrılır.
Örnek: fetch("https://api.example.com/users").then(response => response.json()).then(data => console.log(data));. İlk then yanıtı alıp JSON'a çevirir; ikinci then bu JSON verisini alır. Bu zincir yapısı, asenkron işlemleri sırayla işlemeyi sağlar. Her then bir sonraki then'e değer geçirir. Promise zinciri, okunabilir asenkron kod yazmanın temel yoludur; ama async/await ile daha da sadeleşir.
Uygulama fetch ile istek yap
Bir UserLoader bileşeni yaz. fetch("https://api.example.com/users") çağrısını bir const promise'a ata. promise.then(response => console.log(response)) çağrısını ekle. Bileşen null döndürsün.
Başlangıç kodu
// fetch'i çağır (yerleşik, içe aktarma gerekmez)
function UserLoader() {
// fetch ile users adresine istek yap
// promise.then ile yanıtı konsola yaz
return null;
}Örnek çözüm
function UserLoader() {
const promise = fetch("https://api.example.com/users");
promise.then(response => console.log(response));
return null;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 fetch hangi veri türünü döndürür?
fetch("https://api.example.com/users");- Number
- Array
- String
- Promise Doğru cevap
Açıklama: fetch bir Promise döndürür.
2 fetch çağrısını yaz
const url = "api.example.com/users";
const promise = ____(url);const url = "api.example.com/users";
const promise = fetch(url);Açıklama: fetch bir URL alır ve istek yapar.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
fetch |
HTTP isteği yapar |
Promise |
Sonucu temsil eder |
then |
Yanıtı yakalar |
URL |
İstek adresi |