Fetch API: Gelişmiş Özellikler ve Hata Yönetimi

Fetch API: Gelişmiş Özellikler ve Hata Yönetimi

Merhaba! Fatih Soysal olarak, bu yazıda sizlerle JavaScript’in güçlü API çağrı aracı olan Fetch API’nin gelişmiş özelliklerini ve özellikle hata yönetimini detaylı bir şekilde inceleyeceğiz. Fetch API, modern web uygulamalarında sunucuyla iletişim kurmak için temel bir araçtır ve doğru kullanıldığında, uygulamalarınızın güvenilirliğini ve performansını önemli ölçüde artırabilir.

Temel Fetch Anlayışı

Öncelikle, temel Fetch API kullanımını hatırlayalım. Bir GET isteği göndermek için aşağıdaki gibi basit bir kod kullanabiliriz:

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

Ancak, bu sadece temel bir kullanım. Gerçek dünya senaryolarında, daha gelişmiş tekniklere ihtiyaç duyabiliriz. Örneğin, POST istekleri, farklı HTTP metodları, başlıklar (headers) ve zaman aşımı gibi konuları ele almalıyız.

Gelişmiş Fetch Özellikleri

HTTP Metodları ve Başlıklar (Headers)

Fetch API, GET’ten daha fazlasını sunar. POST, PUT, DELETE gibi farklı HTTP metodlarını kullanarak sunucuyla çeşitli işlemler gerçekleştirebiliriz. Ayrıca, isteğinize özel başlıklar ekleyerek sunucuya ek bilgiler gönderebilirsiniz. Örneğin, bir Content-Type başlığı kullanarak sunucuya gönderdiğiniz verinin türünü belirtebilirsiniz:

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

Zaman Aşımı (Timeout)

Bazen, sunucu yanıt vermeyebilir veya istek çok uzun sürebilir. Bu gibi durumlarda, zaman aşımı mekanizması uygulamanızın kilitlenmesini önler. Ancak, doğrudan Fetch API’da zaman aşımı özelliği bulunmamaktadır. Bu problemi aşmak için AbortController kullanabiliriz:

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 saniye zaman aşımı

fetch('https://api.example.com/data', { signal: controller.signal })
  .then(response => {
    clearTimeout(timeoutId); // Zaman aşımı başarılıysa temizle
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('İstek zaman aşımına uğradı');
    } else {
      console.error('Hata oluştu:', error);
    }
  });

Hata Yönetimi

Hata yönetimi, her uygulama için kritik öneme sahiptir. Fetch API’de hata yönetimi, catch bloğu ile gerçekleştirilir. Ancak, sadece bir catch bloğu yeterli olmayabilir. Sunucudan gelen hata kodlarını (örneğin, 404 Not Found, 500 Internal Server Error) kontrol ederek daha spesifik hata mesajları gösterebilirsiniz:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(HTTP error! status: ${response.status});
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Hata oluştu:', error));

Bu şekilde, sunucudan gelen hataları yakalayıp kullanıcıya daha anlamlı geri bildirimler sağlayabiliriz. Ayrıca, farklı hata türlerini yakalayıp farklı şekilde işleyebilirsiniz. Örneğin, network hataları için farklı bir hata mesajı göstermeyi düşünebilirsiniz. Ayrıntılı hata mesajları, uygulamanızın debug işlemlerini kolaylaştırır.

Async/Await ile Fetch

Async/await, Promise’leri daha temiz ve okunabilir bir şekilde yönetmenizi sağlar. Fetch API ile birlikte kullanıldığında, kodunuz daha düzenli ve anlaşılır hale gelir:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(HTTP error! status: ${response.status});
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Hata oluştu:', error);
  }
}

fetchData();

Async/await kullanımı, hata yönetimini de basitleştirir. try…catch bloğu, olası tüm hataları tek bir yerde yakalamamızı sağlar. Bu yaklaşım, kodun okunabilirliğini ve bakımı kolaylaştırır.

Umarım bu makale, Fetch API’nin gelişmiş özelliklerini ve hata yönetimini anlamanıza yardımcı olmuştur. Daha fazla bilgi için fatihsoysal.com veya MDN Fetch API dökümanlarını inceleyebilirsiniz. Sorularınız ve önerileriniz için iletişime geçmekten çekinmeyin!

#Etiketler: Fetch API, JavaScript, HTTP istekleri, hata yönetimi, async/await, promise, gelişmiş özellikler, network request, API çağrıları, POST, GET, PUT, DELETE, AbortController, HTTP error, response.ok, hata mesajları, zaman aşımı, kod örnekleri