Başlangıç İçin Fetch API Mini Örnekleri

Fetch API, modern web geliştirme dünyasında veri çekme işlemlerini kolaylaştıran güçlü bir JavaScript arayüzüdür. Özellikle JavaScript dersleri alanında, API kullanımı öğrenmek isteyenler için basit örnekler sunarak kavramları pekiştirmek oldukça faydalıdır. Bu yazıda, Kod snippet şeklinde hazırlanmış mini örneklerle Fetch API'nin temel kullanımını öğreneceksiniz.

Fetch API Nedir?

Fetch API, web tarayıcılarında HTTP istekleri yapmanızı sağlayan modern bir JavaScript API'sidir. XMLHttpRequest'in yerine geçerek daha okunabilir ve kullanımı kolay bir yapı sunar. Veri çekme, gönderme ve sunucudan gelen yanıtları işleme gibi işlemleri asenkron olarak yapmanızı sağlar.

Basit Fetch API Örneği

Aşağıdaki Kod snippet örneği, bir API'den JSON formatında veri çekmeyi ve konsola yazdırmayı gösterir:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Hata:', error));

Bu örnekte, fetch fonksiyonu belirtilen URL'ye bir GET isteği gönderir. Gelen yanıt response.json() ile JSON formatına dönüştürülür ve ardından veri konsola yazdırılır. Hata durumunda ise catch bloğu devreye girer.

Fetch API ile Veri Gönderme

Fetch API sadece veri çekmek için değil, aynı zamanda veri göndermek için de kullanılır. Aşağıdaki örnek, POST yöntemiyle JSON verisi göndermeyi gösterir:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Hata:', error));

Burada, method olarak 'POST' seçilmiştir ve headers ile gönderilen verinin JSON olduğu belirtilmiştir. body kısmında ise gönderilecek veri JSON.stringify ile stringe çevrilmiştir.

Async/Await ile Fetch Kullanımı

Modern JavaScript'te asenkron işlemleri daha okunabilir hale getirmek için async/await yapısı kullanılır. Aşağıda aynı GET isteğinin async/await ile nasıl yapılacağı gösterilmiştir:

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Hata:', error);
  }
}

fetchData();

Bu yöntem, then/catch zincirine göre daha temiz ve anlaşılırdır. fetchData fonksiyonu async olarak tanımlanır ve fetch ile gelen yanıt await ile beklenir.

Başlangıç Seviyesi İçin İpuçları

Fetch API kullanırken her zaman yanıtın başarılı olup olmadığını kontrol edin. Örneğin, response.ok ile durum kodunu kontrol etmek faydalıdır.
Hataları yakalamak için catch bloğunu veya try/catch yapısını kullanın.
Veri formatına dikkat edin; çoğunlukla JSON kullanılır ancak farklı formatlar da olabilir.
API dökümantasyonunu iyi inceleyin, istek yaparken gerekli parametreleri doğru gönderin.

Örnek: Basit JSON Veri Çekme

Aşağıdaki örnek, basit bir JSON veri çekme işlemini göstermektedir:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Ağ yanıtı başarısız oldu');
    }
    return response.json();
  })
  .then(data => {
    console.log('Veri:', data);
  })
  .catch(error => {
    console.error('Fetch hatası:', error);
  });

Sonuç

Fetch API, modern web uygulamalarında veri alışverişini kolaylaştıran, öğrenmesi ve kullanması keyifli bir araçtır. JavaScript dersleri kapsamında API kullanımı öğrenmek isteyenler için bu basit örnekler ve Kod snippetler başlangıç seviyesinde sağlam bir temel oluşturur. Daha karmaşık uygulamalarda da bu temeller üzerine inşa ederek güçlü ve etkili web uygulamaları geliştirebilirsiniz.

Başlangıç seviyesinde kod öğrenmek isteyenler için Başlangıç Seviyesi Kod & Snippet Rehberi kaynaklarına göz atmak, pratik yapmak ve farklı örneklerle kendinizi geliştirmek açısından oldukça faydalı olacaktır.

Başlangıç İçin Fetch API Mini Örnekleri ile JavaScript Dersleri