Javascript İle Api Çağrısı Nasıl Yapılır ?

Web geliştirme dünyasında, JavaScript'in en önemli görevlerinden biri API'ler (Uygulama Programlama Arayüzleri) ile iletişim kurmaktır. Bir web sitesinin başka bir sunucudan veri çekmesi veya veri göndermesi gerektiğinde bu çağrılar devreye girer. Örneğin, hava durumu uygulamasının anlık hava verilerini alması veya bir e-ticaret sitesinin ürün listesini yüklemesi için API çağrısı yapması gerekir.

Bu makalede, JavaScript'te en yaygın kullanılan ve modern yöntem olan Fetch API ve biraz daha eski ama hala popüler olan XMLHttpRequest (XHR) yöntemlerini kullanarak bir API çağrısının nasıl yapılacağını adım adım inceleyeceğiz.

Modern Yaklaşım: Fetch API

Fetch API, modern JavaScript'in API çağrıları için sunduğu en basit ve en güçlü yöntemdir. Promise tabanlı olduğu için kodunuzu daha temiz ve okunabilir hale getirir. async/await yapısı ile birleştiğinde ise kullanımı çok daha kolaylaşır.

Temel Bir GET İsteği

Bir API'den veri almak (GET isteği) en sık yapılan işlemdir. Fetch API ile bu işlem oldukça basittir.

// Örnek API adresi
const apiUrl = 'https://api.github.com/users/github';

// API'ye GET isteği yapma
fetch(apiUrl)
  .then(response => {
    // Yanıtın başarılı olup olmadığını kontrol etif (!response.ok) {throw new Error(`HTTP hatası! Durum: ${response.status}`);
    }
    // Yanıtı JSON formatına dönüştürreturn response.json();
  })
  .then(data => {
    // Gelen veriyi kullanconsole.log('API\'den gelen veri:', data);console.log('Kullanıcı adı:', data.login);
    console.log('Hesap URL\'si:', data.html_url);
  })
  .catch(error => {
    // Hata oluşursa yakalaconsole.error('API çağrısı sırasında bir hata oluştu:', error);
  });

Bu kod, fetch() fonksiyonu ile belirtilen URL'ye bir istek gönderir. then() bloklarında ise sırasıyla yanıtı kontrol eder, JSON'a çevirir ve veriyi kullanır. catch() bloğu ise ağ bağlantısı sorunları gibi hataları yakalar.

Daha Temiz: async/await Kullanımı

async/await anahtar kelimeleri, fetch() ile çalışırken kodu senkron bir yapıya dönüştürerek daha okunaklı hale getirir.

const apiUrl = 'https://api.github.com/users/github';

async function fetchGithubUser() {
  try {
    const response = await fetch(apiUrl);

    if (!response.ok) {
      throw new Error(`HTTP hatası! Durum: ${response.status}`);
    }

    const data = await response.json();

    console.log('API\'den gelen veri:', data);
    console.log('Kullanıcı adı:', data.login);
    console.log('Hesap URL\'si:', data.html_url);

  } catch (error) {
    console.error('API çağrısı sırasında bir hata oluştu:', error);
  }
}

fetchGithubUser();

Bu yapı, özellikle birden fazla API çağrısını art arda yapmanız gerektiğinde kod karmaşıklığını büyük ölçüde azaltır.

POST İsteği Yapma (Veri Gönderme)

Bir sunucuya veri göndermek için (örneğin, bir formun içeriğini kaydetmek), Fetch API'nin ikinci parametresini kullanırız.

const postData = {
  name: 'Örnek Kullanıcı',
  job: 'Yazılımcı'
};

fetch('https://reqres.in/api/users', {
  method: 'POST', // İstek metodu
  headers: {
    'Content-Type': 'application/json', // Gönderilecek verinin tipi
  },
  body: JSON.stringify(postData) // Veriyi JSON string'ine dönüştür
})
.then(response => response.json())
.then(data => {
  console.log('Sunucudan gelen yanıt:', data);
})
.catch(error => {
  console.error('Veri gönderme sırasında hata:', error);
});

method ile isteğin POST olduğunu, headers ile sunucuya verinin hangi formatta olduğunu bildiririz. body parametresi ise gönderilecek veriyi içerir.

Eski Yöntem: XMLHttpRequest (XHR)

XMLHttpRequest (veya kısaca XHR), daha eski bir yöntem olmasına rağmen hala bazı tarayıcı ve eski kod tabanlarında kullanılmaktadır. Fetch API kadar modern veya kolay olmasa da, çalışma mantığını anlamak faydalıdır.

const xhr = new XMLHttpRequest();
const apiUrl = 'https://api.github.com/users/github';

xhr.open('GET', apiUrl, true); // İstek metodu, URL ve senkron/asenkron ayarı

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    // Başarılı yanıtconst data = JSON.parse(xhr.responseText);console.log('XHR ile gelen veri:', data);
  } else {
    // Başarısız yanıtconsole.error('API çağrısı başarısız oldu:', xhr.statusText);
  }
};

xhr.onerror = function() {
  // Ağ bağlantısı gibi hatalarconsole.error('Bir ağ hatası oluştu.');
};

xhr.send(); // İsteği gönder

XHR, olay tabanlı (event-based) bir yapıya sahiptir. onload olayı başarılı bir yanıt geldiğinde, onerror olayı ise ağ bağlantısı hatalarında tetiklenir.

Güncel projelerinizde API çağrıları için kesinlikle Fetch API'yi tercih etmelisiniz. async/await ile birlikte kullanıldığında hem kodunuzu sadeleştirir hem de hata yönetimini kolaylaştırır. Fetch API, modern web uygulamaları için bir standart haline gelmiştir. Eski yöntem olan XHR'i bilmek ise, legacy kodlar veya özel durumlar için faydalı olabilir.