POST istekleri

method, body ve headers ile bir POST isteği göndermeyi öğrenirsin.

POST ile veri gönderme

Bir POST isteği sunucuya yeni veri gönderir. fetch'in ikinci parametresinde method, body ve headers seçeneklerini birlikte verirsin.

const response = await fetch(url, {
  method: 'POST',
  body: 'hello',
  headers: { 'Content-Type': 'text/plain' }
});

method isteğin türünü, body gönderilen veriyi taşır. body bir metin olabileceği gibi bir FormData ya da Blob da olabilir. Sunucunun gövdeyi doğru okuyabilmesi için Content-Type başlığını da eklersin.

Yanıt durum kodunu kontrol etme

Bir POST isteğinden sonra sunucunun yanıtı response.status ile kontrol edilir. Yeni bir kaynak oluşturulduğunda sunucu genellikle 201 döndürür.

const response = await fetch(url, { method: 'POST', body: 'hello' });
console.log(response.status);

Başarılı bir istek 2xx aralığında bir kod verir. 200 genel başarılı, 201 yeni kaynak oluşturuldu, 400 ise istemci hatasıdır. Yanıtın ayrıntılarına gövdeden ulaşabilirsin.

Uygulama Bir POST isteği yap ve durum kodunu yazdır

url değişkeni bir adresi tutuyor. İkinci parametre olarak { method: 'POST', body: 'hello', headers: { 'Content-Type': 'text/plain' } } vererek bir fetch isteği yap ve yanıtı response değişkenine al. Sonra response.status değerini console.log ile yazdır.

Örnek çözümü göster

const response = await fetch(url, {
  method: 'POST',
  body: 'hello',
  headers: { 'Content-Type': 'text/plain' }
});
console.log(response.status);

Kendini test et

Seçenekleri anlamlarıyla eşleştir

method: 'POST'

İsteğin türünü belirler
body: 'hello'

Gönderilen veriyi taşır
headers: { ... }

Başlıkları içerir
Sunucuda yeni bir kaynak oluşturmak için hangi method kullanılır?
```
// A
method: 'GET'
// B
method: 'DELETE'
// C
method: 'PUT'
// D
method: 'POST'
```
- A
- B
- C
- D
Cevabı göster

D — Doğru! POST yeni bir kaynak oluşturmak için kullanılır.

POST seçeneklerini yaz

const response = await fetch(url, {
  ____: 'POST',
  body: 'hello'
});

Cevabı göster

const response = await fetch(url, {
  method: 'POST',
  body: 'hello'
});

Sıradaki ders: HTTP hata yönetimi

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler