JavaScript fetch POST isteğiyle JSON nasıl gönderilir?

JavaScript fetch POST isteği ile JSON göndermek için isteğin yöntemini method: "POST" olarak belirlemeli, veri biçimini Content-Type: application/json başlığıyla bildirmeli ve JavaScript nesnesini JSON.stringify() ile JSON metnine dönüştürerek body alanına vermelisin. Sunucudan gelen yanıt ise genellikle önce response.ok ile kontrol edilir, ardından await response.json() ile JavaScript nesnesi olarak okunur.

Aşağıdaki örnekte kullanılan /users adresi yalnızca varsayımsal bir API uç noktasıdır. Bu nedenle örnek, çalışan bir backend’den alınmış gerçek sonucu değil, tarayıcının nasıl bir HTTP isteği oluşturacağını gösterir.

fetch ile JSON POST isteğinin temel yapısı nedir?

Bir JSON POST isteğinin temel iskeleti şöyledir:

const data = {
  username: "ornek_kullanici",
  email: "[email protected]"
};

const response = await fetch("/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
});

Bu kodda data, JavaScript içinde kullanılan bir nesnedir. JSON.stringify(data) çağrısı ise bu nesneyi HTTP isteğinin gövdesinde taşınabilecek JSON metnine çevirir.

// JavaScript nesnesi
{ username: "ornek_kullanici", email: "[email protected]" }

// JSON metni
'{"username":"ornek_kullanici","email":"[email protected]"}'

Tarayıcı açısından bu seçeneklerin her biri HTTP isteğinin farklı bir bölümünü belirler:

method yazılmazsa fetch varsayılan olarak GET isteği oluşturur. JSON göndermek istediğin için burada POST yöntemini açıkça belirtmek gerekir. Content-Type başlığı eklenmezse sunucu, gövdeyi JSON olarak yorumlayamayabilir. Ancak bu başlık tek başına yeterli değildir; body değerinin de JSON.stringify() ile dönüştürülmesi gerekir.

Form verisi JavaScript nesnesine nasıl dönüştürülür?

Bir form gönderildiğinde tarayıcı varsayılan olarak sayfayı yenileyip formu kendi yöntemiyle gönderebilir. Bu davranışı durdurmak için submit olayında event.preventDefault() kullanılır. Ardından input alanlarının değerleri alınarak bir JavaScript nesnesi oluşturulur.

<form id="userForm">
  <label for="username">Kullanıcı adı</label>
  <input id="username" name="username" type="text" />

  <label for="email">E-posta</label>
  <input id="email" name="email" type="email" />

  <button type="submit">Gönder</button>
</form>

<script>
  const form = document.querySelector("#userForm");
  const endpoint = "/users";

  form.addEventListener("submit", async (event) => {
    event.preventDefault();

    const username = document.querySelector("#username").value.trim();
    const email = document.querySelector("#email").value.trim();

    if (!username || !email) {
      console.log("Kullanıcı adı ve e-posta boş bırakılamaz.");
      return;
    }

    const data = {
      username,
      email
    };

    console.log(data);

    // JSON.stringify(data), fetch çağrısındaki body alanında kullanılacaktır.
  });
</script>

Bu aşamada data hâlâ bir JavaScript nesnesidir. Örneğin console.log(data) çıktısı tarayıcı konsolunda özellikleri görülebilen bir nesne olur. JSON metnine dönüşüm, bu nesne API’ye gönderilirken yapılır:

body: JSON.stringify(data)

Formdan değer alırken şu kısa kontrol listesini kullanabilirsin:

• Input alanlarının id ve name değerleri doğru mu?
• Boş değerler trim() sonrasında kontrol ediliyor mu?
• Nesne anahtarları API’nin beklediği adlarla eşleşiyor mu?
• endpoint değişkeni doğru sunucu adresini gösteriyor mu?

Tam fetch örneği: method, headers, body ve yanıt akışı

Bir JSON POST isteğinde temel akış şöyledir: form verisi önce bir JavaScript nesnesine dönüştürülür, ardından JSON.stringify() ile metin biçimindeki JSON gövdesi hazırlanır. method isteğin POST olduğunu, headers gönderilen verinin JSON olduğunu, body ise API’ye aktarılacak içeriği belirtir.

Aşağıdaki örnekte kullanılan https://example.test/api/users adresi ve sunucu cevabı varsayımsaldır. Bu kod, gerçek bir backend’e bağlanıldığı veya aşağıdaki cevabın gerçekten döndüğü anlamına gelmez.

async function createUser() {
  const formData = {
    name: "Deniz",
    email: "[email protected]"
  };

  try {
    const response = await fetch("https://example.test/api/users", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(formData)
    });

    if (!response.ok) {
      throw new Error(`İstek başarısız oldu: HTTP ${response.status}`);
    }

    const result = await response.json();

    console.log("Sunucu cevabı:", result);
  } catch (error) {
    console.error("İstek sırasında hata oluştu:", error.message);
  }
}

createUser();

Bu örnekte formData, formdan alınmış verileri temsil eden JavaScript nesnesidir. JSON.stringify(formData) bu nesneyi HTTP isteğinin gövdesinde taşınabilecek JSON metnine dönüştürür. await fetch() işlemi tamamlandığında bir Response nesnesi döner.

response.ok, HTTP yanıtının başarılı kabul edilen 200-299 aralığında olup olmadığını kontrol eder. Başarısız bir durum varsa hata oluşturulur ve akış catch bloğuna geçer. Başarılı yanıt alındığında await response.json(), yanıt gövdesindeki JSON verisini yeniden JavaScript nesnesine dönüştürür.

Örnek istek gövdesi, varsayımsal:

{
  "name": "Deniz",
  "email": "[email protected]"
}

Örnek sunucu cevabı, varsayımsal, gerçek backend sonucu değildir:

{
  "id": 42,
  "name": "Deniz",
  "email": "[email protected]"
}

Bu durumda beklenen yalnızca örnek bir console.log görünümü şöyledir:

Sunucu cevabı: {
  id: 42,
  name: "Deniz",
  email: "[email protected]"
}

Özet akış: form verisi → JavaScript nesnesi → JSON.stringify ile istek gövdesi → HTTP yanıtı → response.json() ile JavaScript nesnesi.

Network sekmesinde POST isteği nasıl doğrulanır?

Kodu çalıştırdıktan sonra tarayıcı geliştirici araçlarını açıp Network sekmesine geçebilirsin. İsteği daha kolay bulmak için filtre alanına endpoint’in bir bölümünü yazabilir veya yalnızca Fetch/XHR isteklerini görüntüleyebilirsin. İlgili isteği seçtiğinde kod satırlarını aşağıdaki alanlarla eşleştir:

• İstek listede görünüyor mu? Görünmüyorsa fonksiyonun çağrıldığını ve tarayıcı konsolunda önceki bir JavaScript hatası olmadığını kontrol et.
• Request Method alanında POST yazıyor mu?
• Request Payload içinde geçerli JSON ve beklenen alanlar bulunuyor mu?
• Status alanında yanıt durumunu kontrol et. response.ok değerlendirmesi bu HTTP durumuna göre yapılır.
• Response alanındaki içeriğin JSON olarak okunabilir olup olmadığını incele.

Network sekmesindeki görünüm, kodun hangi satırının isteğin hangi bölümünü oluşturduğunu somutlaştırır. Böylece sorun istek yönteminde mi, başlıklarda mı, payload’da mı yoksa sunucu yanıtında mı daha kolay ayırt edebilirsin.

JSON.stringify unutulursa hata nasıl teşhis edilir?

fetch içinde JavaScript nesnesini doğrudan body alanına vermek, nesnenin API’nin beklediği JSON metnine dönüştürülmediği anlamına gelir. Bu durumda istek tarayıcıdan çıkabilir; ancak gönderilen gövde beklenen JSON görünümünde olmayacağı için sunucu veriyi okuyamayabilir. Ortaya çıkacak belirti, kullanılan backend’e göre değişir; bu nedenle belirli bir hata kodunu kesin sonuç gibi değerlendirmemek gerekir.

Doğru ve hatalı kullanım arasındaki temel fark şöyledir:

const data = {
  name: "Ayşe",
  age: 20
};

// Doğru: nesne JSON metnine dönüştürülür
body: JSON.stringify(data)

// Hatalı veya beklenmeyen sonuç üretebilecek kullanım
body: data

body: JSON.stringify(data) kullanıldığında gövde, örneğin {"name":"Ayşe","age":20} biçiminde JSON metni olarak gönderilir. body: data kullanımında ise JavaScript nesnesi dönüştürülmeden bırakılır. Tarayıcı ve sunucu arasındaki aktarım katmanı bu nesneyi API’nin beklediği JSON biçiminde işlemeyebilir.

Adım adım teşhis listesi

1. Önce Console sekmesini incele. Kodun ilgili satırında sözdizimi, değişken veya çalışma zamanı hatası olup olmadığını kontrol et. Kod bu aşamada duruyorsa Network sekmesinde istek görememen normaldir.
2. Network sekmesinde ilgili POST isteğini aç. Filtreyi Fetch/XHR olarak ayarlayabilir ve isteğin ayrıntılarına bakabilirsin.
3. Request Payload alanını kontrol et. Gönderilen verinin JSON metni olarak, genellikle süslü parantezlerle başlayan ve anahtar-değer çiftleri içeren bir gövde şeklinde görünüp görünmediğini denetle.
4. Content-Type başlığını incele. JSON gönderiyorsan istek başlıklarında Content-Type: application/json bulunmalıdır. Bu başlık, gövdenin JSON olarak yorumlanması gerektiğini belirtir.
5. response.ok ve yanıt gövdesini ayrı ayrı kontrol et. İstek gönderilmiş olsa bile sunucu beklenen biçimde yanıt vermemiş olabilir. Önce HTTP yanıtının durumunu, ardından await response.json() ile okunabilen yanıt gövdesini incele.

const response = await fetch("https://example.com/api/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
});

console.log("Başarılı HTTP yanıtı mı?", response.ok);

const result = await response.json();
console.log("Sunucunun varsayımsal yanıtı:", result);

Buradaki endpoint ve sunucu yanıtı varsayımsaldır; gerçek bir backend sonucu olarak değerlendirilmemelidir. Farklı bir kaynağa istek gönderiyorsan CORS nedeniyle tarayıcı kaynaklı ek erişim kısıtları da devreye girebilir. Ancak bu, JSON.stringify kullanımının yerine geçen bir çözüm değildir.

Sık Sorulan Sorular

fetch içinde Content-Type: application/json yazmak neden gereklidir?

Bu başlık, istek gövdesindeki verinin JSON biçiminde olduğunu sunucuya bildirir. JSON.stringify ile oluşturulan JSON metninin doğru ayrıştırılması için backend’in bu bilgiyi alması gerekir.

JSON.stringify ile JSON.parse arasındaki fark nedir?

JSON.stringify, JavaScript nesnesini JSON metnine dönüştürür ve genellikle istek gönderirken kullanılır. JSON.parse ise JSON metnini JavaScript nesnesine dönüştürür; metin olarak alınan veriyi kod içinde kullanmak gerektiğinde tercih edilir.

response.ok kontrolü yapılmadan response.json() çağrılabilir mi?

Teknik olarak çağrılabilir. Ancak response.ok kontrolü yapılmazsa başarılı ve başarısız HTTP yanıtlarını ayırt etmek zorlaşır. Ayrıca hata yanıtı JSON değilse response.json() işlemi ayrıca başarısız olabilir.

POST isteği Network sekmesinde görünmüyorsa hangi adımlar kontrol edilmelidir?

Önce Console hatalarını, form olayında preventDefault() kullanılıp kullanılmadığını, kodun gerçekten çalışıp çalışmadığını ve Network filtresinin Fetch/XHR olarak ayarlanıp ayarlanmadığını kontrol et. Ardından isteğin doğru anda gönderildiğinden emin ol.

Bu kontroller, JSON POST isteğinin gerçekten nasıl oluşturulduğunu ve tarayıcıdan hangi verinin çıktığını adım adım görmeni sağlar.