JavaScript HTTP İstekleri

JavaScript HTTP İstekleri kullanırken Fetch API, HTTP yöntemleri, JSON yanıtları, CORS ve hata kontrollerini doğru biçimde nasıl yöneteceğinizi inceleyin.

Bir web sayfasında kullanıcı listesini getirmek, yeni kayıt oluşturmak, profil bilgisini değiştirmek ya da bir veriyi silmek istediğinizde tarayıcı ile sunucu arasında iletişim kurulması gerekir. JavaScript HTTP İstekleri bu iletişimi sayfayı tamamen yenilemeden gerçekleştirebilir. Tarayıcı belirli bir adrese istek gönderir, sunucu işlemi değerlendirir ve çoğu uygulamada JSON biçiminde bir yanıt döndürür.

Buradaki önemli nokta yalnızca veriyi istemek değildir. İstek türü, endpoint adresi, gönderilen içerik ve sunucudan dönen durum kodu birlikte değerlendirilmelidir. Yanlış HTTP yöntemi kullanıldığında veya farklı bir alan adına yapılan istek CORS kurallarına takıldığında kod doğru görünse bile veri gelmeyebilir. Bu yüzden JavaScript HTTP İstekleri yazılırken birkaç satırlık fetch() çağrısından biraz daha fazlasına bakmak gerekir.

Mobil kullanıcıların bağlantı kalitesi masaüstü kullanıcılarından daha değişken olabilir. WordPress Mobil Optimizasyonu Nasıl Yapılır konusu bu nedenle HTTP çağrılarının bulunduğu sayfalarda ayrıca önem kazanır. Mobil görünümü düzenlemek kadar, arka plandaki isteklerin ne zaman yapıldığını ve gerçekten gerekli olup olmadığını kontrol etmek de kullanıcı deneyimini etkiler.

JavaScript HTTP İstekleri nasıl çalışır?

JavaScript HTTP İstekleri, tarayıcıdan bir sunucuya belirli bir URL ve HTTP yöntemiyle veri gönderilmesini veya veri alınmasını sağlar. GET veri okumak, POST veri göndermek, PUT kaynağı değiştirmek, PATCH belirli alanları güncellemek, DELETE ise hedef kaynağın silinmesini istemek için kullanılabilir. Modern tarayıcı kodunda bu işlemler çoğunlukla Fetch API ile yapılır.

Bir isteğin adresine genellikle endpoint denir. Örneğin /users kullanıcı listesini, /users/15 ise belirli bir kullanıcıyı temsil edebilir. Endpoint yapısının ne anlama geldiği sunucu tarafındaki API tasarımına bağlıdır.

GET isteğinde amaç veriyi almakken POST genellikle sunucuya veri gönderir. PUT hedef kaynağın mevcut temsilini değiştirmek için kullanılır. PATCH daha sınırlı bir değişiklik yapabilir. DELETE ise belirtilen kaynağın silinmesini ister. HTTP standardındaki bu yöntemlerin davranışları birbirinin yerine gelişigüzel kullanılmamalıdır.

Fetch API ile veri nasıl alınır?

2026 itibarıyla tarayıcı tarafında JavaScript HTTP İstekleri yazarken Fetch API en temel seçeneklerden biridir. MDN, Fetch API’yi XMLHttpRequest için daha esnek ve modern bir alternatif olarak tanımlıyor. fetch() bir Promise döndürdüğü için async ve await ile oldukça okunabilir kod oluşturulabilir.

Basit bir GET isteği şöyle yazılabilir:

async function getUsers() {
    const response = await fetch('/api/users');

    if (!response.ok) {
        throw new Error(`HTTP hata kodu: ${response.status}`);
    }

    const data = await response.json();
    console.log(data);
}

Buradaki response.ok kontrolü küçük ama önemli bir ayrıntıdır. Fetch isteği 404 veya 500 yanıtı aldığında Promise otomatik olarak reddedilmez. Promise esas olarak ağ seviyesinde istek başarısız olduğunda reject olur. HTTP hata kodlarını kod içinde ayrıca kontrol etmek gerekir.

Güncel Fetch belgelerini incelerken benim özellikle dikkat ettiğim nokta bu oldu. Kodda yalnızca catch bulunması, sunucunun 404 döndürdüğü senaryoyu otomatik olarak hata koluna taşımıyor. İlk bakışta çalışan bir yapı, durum kodu kontrol edilmediğinde sunucu hatalarını sessizce işlemeye devam edebiliyor.

POST isteğinde veri nasıl gönderilir?

Sunucuya JSON göndermek istediğinizde yöntem, gövde ve Content-Type bilgisi birlikte hazırlanır:

async function createUser() {
    const response = await fetch('/api/users', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            name: 'Deneme Kullanıcı'
        })
    });

    if (!response.ok) {
        throw new Error(`HTTP hata kodu: ${response.status}`);
    }

    return response.json();
}

POST isteğinin gövdesindeki veri türünü Content-Type başlığı açıklar. HTTP belgelerinde de POST gövdesinin biçiminin bu başlıkla belirtildiği ifade ediliyor.

Aynı yapıda method değeri PUT, PATCH veya DELETE olarak değiştirilebilir, fakat gönderilen veri ve endpoint API’nin beklediği yapıya uygun olmalıdır.

XMLHttpRequest artık kullanılmıyor mu?

Kullanılıyor. Özellikle eski projelerde XMLHttpRequest, yani XHR kodlarıyla sık karşılaşabilirsiniz.

XHR, JavaScript’in sunucuyla iletişim kurup sayfanın belirli bir bölümünü güncellemesine imkan verir. Ancak yeni kodlarda Fetch API daha rahat bir kullanım sunar. MDN de Fetch’i XHR için daha güçlü ve esnek bir alternatif olarak gösteriyor.

XHR kullanılıyorsa asenkron çalışma tercih edilmelidir. Ana iş parçacığında senkron XHR ekranın yanıt vermemesine yol açabildiği için bu kullanım artık kullanımdan kaldırılmış durumda.

Bu yüzden mevcut bir WordPress eklentisinde XHR görmek tek başına sorun değildir. Fakat yeni bir özellik geliştirirken eski senkron örnekleri kopyalamak doğru seçim olmaz.

Axios ne zaman tercih edilebilir?

JavaScript HTTP İstekleri yalnızca tarayıcının yerleşik API’leriyle yapılmak zorunda değil. Axios da Promise tabanlı bir HTTP istemcisidir ve hem tarayıcıda hem Node.js ortamında kullanılabilir. İstek ve yanıt müdahaleleri, veri dönüştürme ve hata yönetimi gibi özellikleri nedeniyle bazı projelerde tercih edilir.

Kurulum:

npm install axios

Basit kullanım ise oldukça kısadır:

const response = await axios.get('/api/users');
console.log(response.data);

Sırf GET isteği göndermek için projeye ayrıca kütüphane eklemek zorunlu değildir. Ancak proje zaten Axios kullanıyorsa aynı HTTP istemcisini sürdürmek kod yapısını daha tutarlı tutabilir.

CORS hatası neden çıkar?

Başka bir alan adına JavaScript HTTP İstekleri gönderildiğinde tarayıcının same-origin politikası devreye girer. Hedef sunucu uygun CORS başlıklarını göndermiyorsa tarayıcı JavaScript’in yanıta erişmesini engelleyebilir.

Bazı isteklerde tarayıcı önce preflight adı verilen OPTIONS isteğini göndererek sunucunun kullanılacak yöntem ve başlıklara izin verip vermediğini kontrol eder. fetch() ve XHR bu güvenlik modeline tabidir.

Bu durumda yalnızca JavaScript kodunu değiştirmek çoğu zaman yeterli değildir. Sunucunun hangi origin, HTTP yöntemi ve başlıklara izin verdiği kontrol edilmelidir.

Bir istek tarayıcıda çalışmıyorsa Geliştirici Araçları > Network bölümü genellikle ilk bakılacak yerdir. Burada URL, yöntem, durum kodu, request headers, response headers ve gönderilen veri birlikte görülebilir. İstek hiç çıkmıyorsa JavaScript tarafına, çıkıp 4xx veya 5xx dönüyorsa sunucu yanıtına odaklanmak daha mantıklıdır.

Kod ve ağ isteklerinin birbirine karıştığı problemlerde ayrıntılı kontrol gerekebilir. 11858, 2011 yılından bu yana Türkiye genelinde milyonlarca kullanıcıya 7/24 profesyonel teknik destek sunuyor. Bilgisayar, akıllı TV, sosyal medya ve modem dahil farklı alanlarda hizmet veren ekip gerektiğinde TeamViewer ve AnyDesk gibi lisanslı araçlarla uzaktan bağlantı sağlayabiliyor. Hizmet dakika bazlı şeffaf ücretlendirmeyle yürütülüyor; yüzde 95 memnuniyet oranı ve 500.000’den fazla başarılı işlem tecrübesi bulunuyor.

JavaScript kodunun tema içinde nasıl konumlandırıldığı da önemlidir. Alt Tema İle WordPress Blok Temalarını İçin Özelleştirme konusu, ana tema dosyalarına doğrudan müdahale etmeden özelleştirme yapmak isteyenler için bağlantılı bir sonraki adımdır. Özellikle HTTP çağrısı yapan özel JavaScript dosyalarında tema güncellemelerinden etkilenmeyecek bir yapı kurmak işleri kolaylaştırabilir.

JavaScript HTTP İstekleri yazarken asıl mesele hangi kütüphanenin en kısa kodu sunduğu değil, gönderilen isteğin ne yaptığını açıkça bilmektir. fetch() çağrınız çalışıyor ancak beklediğiniz veri gelmiyorsa önce durum koduna, ardından Network ekranındaki gerçek isteğe bakın. Siz HTTP çağrılarında Fetch API mi, Axios mu yoksa eski bir XHR yapısı mı kullanıyorsunuz? Yorumlarda paylaşabilirsiniz.