Mustafa HAMIT

JavaScript’te dış bir servisten veri almak için kullanılan en modern yöntemlerden biri Fetch API’dir. Özellikle API ile çalışan projelerde fetch neredeyse her yerde kullanılır.

Fetch Nedir?

fetch, tarayıcı üzerinden bir sunucuya HTTP isteği atmamızı sağlayan yerleşik bir JavaScript fonksiyonudur.

Kısaca: Başka bir adresten veri çekmek için kullanılır.

---

Basit Kullanım (GET)

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())
  .then(data => console.log(data));

Bu kod:

• API’ye istek atar
• Gelen cevabı JSON’a çevirir
• Konsola yazdırır

---

Async / Await ile Kullanım

async function getUsers() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const data = await response.json();
  console.log(data);
}

getUsers();

Daha okunabilir ve modern bir yöntemdir.

---

POST İsteği Örneği

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    title: "Test",
    body: "İçerik",
    userId: 1
  })
})
.then(res => res.json())
.then(data => console.log(data));

---

Fetch Ne İşe Yarar?

• API’den veri çekme
• Form verisi gönderme
• Backend ile iletişim kurma
• Dinamik web siteleri oluşturma

---

Fetch vs XMLHttpRequest

Eskiden kullanılan yöntem XMLHttpRequest idi. Ancak artık fetch tercih edilir çünkü:

• Daha basit
• Promise tabanlı
• Daha okunabilir

---

Dikkat Edilmesi Gerekenler

fetch("https://api.example.com/data")
  .then(res => {
    if (!res.ok) {
      throw new Error("Hata oluştu");
    }
    return res.json();
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

• Hata yakalamak için .catch() kullan
• response.ok kontrolü yap
• JSON dışında veri de gelebilir

---

Sonuç

Fetch API, modern JavaScript’te API ile iletişim kurmanın en kolay ve en yaygın yoludur. Özellikle frontend geliştiriciler için öğrenilmesi gereken temel konulardan biridir.

---

Sık Sorulan Sorular (SSS)

Fetch tarayıcıda çalışır mı?

Evet, modern tüm tarayıcılarda desteklenir.

Fetch ile dosya gönderilir mi?

Evet, FormData kullanarak dosya gönderilebilir.

Fetch neden tercih edilir?

Daha basit, modern ve Promise tabanlı olduğu için.

XMLHttpRequest ile ilgili yazıyı incelemek için bu yazıyı inceleyebilirsiniz.

Link: https://www.mustafahamit.com/xmlhttprequest-nedir/