Fetch API Notları ve İpuçları

Fetch API, JavaScript'te HTTP istekleri yapmak için modern bir arayüzdür. XMLHttpRequest'ten daha güçlü ve esnek bir özellik seti sunar. Bu başvuru kılavuzu, Fetch API'nin yaygın kullanım durumlarını ve özelliklerini kapsar.

İçindekiler

1. Temel Kullanım
2. İstek Seçenekleri
3. Yanıtları İşleme
4. Veri Gönderme
5. Hata Yönetimi
6. İstekleri İptal Etme
7. Gelişmiş Kullanım

Temel Kullanım

GET İsteği

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Hata:', error));

POST İsteği

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    anahtar: 'değer'
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Hata:', error));

İstek Seçenekleri

fetch('https://api.example.com/data', {
  method: 'POST', // *GET, POST, PUT, DELETE, vb.
  mode: 'cors', // no-cors, *cors, same-origin
  cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
  credentials: 'same-origin', // include, *same-origin, omit
  headers: {
    'Content-Type': 'application/json'
    // 'Content-Type': 'application/x-www-form-urlencoded',
  },
  redirect: 'follow', // manual, *follow, error
  referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
  body: JSON.stringify(data) // gövde veri tipi "Content-Type" başlığı ile eşleşmeli
})
.then(response => response.json())
.then(data => console.log(data));

Yanıtları İşleme

Yanıt Durumunu Kontrol Etme

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Ağ yanıtı uygun değildi');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Hata:', error));

Yanıt Metodları

fetch('https://api.example.com/data')
  .then(response => {
    console.log(response.status);     // örn. 200
    console.log(response.statusText); // örn. "OK"
    console.log(response.headers.get('Content-Type'));
    return response.text();
    // Diğer metodlar: .json(), .blob(), .formData(), .arrayBuffer()
  })
  .then(data => console.log(data));

Veri Gönderme

JSON ile POST

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    anahtar: 'değer'
  })
})
.then(response => response.json())
.then(data => console.log(data));

FormData ile POST

const formData = new FormData();
formData.append('anahtar1', 'değer1');
formData.append('anahtar2', 'değer2');

fetch('https://api.example.com/data', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log(data));

Hata Yönetimi

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP hatası ' + response.status);
    }
    return response.json();
  })
  .then(data => {
    // Verilerinizi burada işleyin
  })
  .catch(error => {
    console.log('Fetch işleminde bir sorun oluştu: ' + error.message);
  });

İstekleri İptal Etme

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/data', {
  signal: signal
})
.then(response => response.json())
.then(data => console.log(data))
.catch(err => {
  if (err.name === 'AbortError') {
    console.log('Fetch iptal edildi');
  } else {
    console.error('Hay aksi, bir hata!', err);
  }
});

// İsteği 5 saniye sonra iptal et
setTimeout(() => controller.abort(), 5000);

Gelişmiş Kullanım

Çerezleri Gönderme

fetch('https://api.example.com/data', {
  credentials: 'include'
})
.then(response => response.json())
.then(data => console.log(data));

İstek Başlıklarını Ayarlama

fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer TOKEN_BURAYA',
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data));

Akış Yanıtı

fetch('https://api.example.com/stream')
  .then(response => {
    const reader = response.body.getReader();
    return new ReadableStream({
      start(controller) {
        return pump();
        function pump() {
          return reader.read().then(({ done, value }) => {
            if (done) {
              controller.close();
              return;
            }
            controller.enqueue(value);
            return pump();
          });
        }
      }
    })
  })
  .then(stream => new Response(stream))
  .then(response => response.blob())
  .then(blob => URL.createObjectURL(blob))
  .then(url => console.log(url))
  .catch(err => console.error(err));