fetch ve useEffect ile fiyat çekme
Tarayıcının yerleşik fetch API'si ek bir kütüphane gerektirmeden HTTP isteği atmanızı sağlar. Bir React bileşeninde veriyi useEffect içinde çeker, sonucu useState ile tuttuğunuz duruma yazarsınız. İstek başlığına Authorization ekleyerek kimliğinizi doğrularsınız.
Tipik akış şöyledir: useEffect(() => { fetch("https://altinapi.hasfiyat.com/v1/price/gram-altin", { headers: { Authorization: "Bearer TOKEN" } }).then(r => r.json()).then(setFiyat); }, []) yazar, boş bağımlılık dizisiyle isteğin yalnızca bileşen ilk kez ekrana geldiğinde çalışmasını sağlarsınız. Dönen JSON'daki alış ve satış alanlarını doğrudan JSX içinde gösterebilirsiniz.
Belirli aralıklarla veriyi tazelemek için useEffect içinde setInterval kullanabilir, temizlik fonksiyonunda clearInterval ile zamanlayıcıyı durdurarak bellek sızıntısını önlersiniz. Yükleme ve hata durumlarını ayrı state'lerle yönetmek, kullanıcıya iskelet (skeleton) veya hata mesajı göstererek arayüzü profesyonelleştirir.
WebSocket ile fiyatları canlı güncelleme
REST ile ilk değerleri aldıktan sonra fiyatların anlık akmasını istiyorsanız WebSocket devreye girer. Tarayıcıda socket.io-client paketini kullanarak io("https://altinapi.hasfiyat.com", { auth: { token } }) ile bağlanır ve gelen her güncellemede React state'ini yenilersiniz. Bağlantıyı bileşen ömrü boyunca tek sefer kurmak için yine useEffect uygundur.
Callback içinde socket.on("price", data => setFiyat(prev => ({ ...prev, [data.symbol]: data }))) deseni, birden çok sembolü tek bir nesnede güncel tutmanın temiz bir yoludur. useEffect'in temizlik fonksiyonunda socket.disconnect() çağırmak, bileşen ekrandan kalktığında bağlantıyı düzgün kapatarak gereksiz kaynak kullanımını engeller.
Bu yaklaşım, fiyat rakamlarının kullanıcı gözü önünde saniye saniye değişmesini sağlar. Canlı akış sayesinde bir kur takip panosu, altın hesap makinesi veya vitrin ekranı gibi arayüzler gerçek zamanlı ve akıcı çalışır.
İstemci tarafında anahtar güvenliği ve sembol kapsamı
Kritik bir uyarı: React uygulaması tarayıcıda çalıştığı için buraya gömülen her API anahtarı, geliştirici araçlarıyla görülebilir hale gelir. Bu nedenle gizli anahtarınızı doğrudan istemci koduna koymak yerine, isteği kendi backend'iniz üzerinden geçiren bir proxy uç noktası kurmanız veya yalnızca genel kullanıma uygun, kısıtlı bir anahtar kullanmanız önerilir.
Proxy deseninde React yalnızca kendi sunucunuza istek atar; sunucunuz gizli anahtarı ekleyip Hasfiyat'a iletir ve yanıtı geri döner. Böylece hem anahtar gizli kalır hem de istek kaynağını, kotayı ve önbelleği merkezi olarak kontrol edersiniz. Bu, üretim uygulamaları için en güvenli mimaridir.
Hasfiyat, gram ve has altın, çeyrek, ata ve cumhuriyet altını, ons XAU, gümüş, platin, paladyum, 995/916/750/585 ayar değerleri ve USD, EUR, GBP pariteleri dahil 67'den fazla sembolü REST ve WebSocket üzerinden sunar. Kaydolup API anahtarınızı aldıktan sonra fetch ile ilk veriyi çekip WebSocket ile canlı tutan React arayüzünüzü kısa sürede yayına alabilirsiniz.
Sık sorulan sorular
React uygulamasında fetch ile altın fiyatını nasıl çekerim?
fetch fonksiyonuna URL ve headers içinde Authorization anahtarını verip yanıtı res.json() ile çözersiniz. useEffect içinde çağırıp gelen alış-satış değerlerini useState ile bileşene bağlarsınız. Canlı akış için Socket.IO istemcisiyle güncellemeleri dinleyebilirsiniz.
JavaScript fetch ile Authorization header nasıl gönderilir?
fetch(url, { headers: { Authorization: apiKey } }) şeklinde ikinci parametredeki headers nesnesine anahtarı yazarsınız. Anahtarı istemci koduna gömmek yerine kendi backend'iniz üzerinden proxy'lemeniz daha güvenlidir. Eksik başlıkta API 401 döner.
React'te canlı altın fiyatını WebSocket ile nasıl gösteririm?
socket.io-client paketiyle bağlantı kurup fiyat güncelleme olayını dinler, gelen veriyi useState ile güncellersiniz. useEffect'in cleanup fonksiyonunda socket.disconnect() çağırarak bağlantıyı temizlersiniz. Böylece bileşen saniye altı gecikmeyle canlı fiyatı gösterir.
Tarayıcıda fetch ile istek atarken CORS hatası alıyorum, ne yapmalıyım?
API anahtarını tarayıcıda açığa çıkarmamak için isteği kendi sunucunuz üzerinden proxy'lemeniz hem CORS'u hem güvenliği çözer. Sunucu tarafı Authorization header'ı ekleyip yanıtı istemciye iletir. Böylece anahtar frontend koduna gömülmez.
React'te API anahtarını gizli tutmak için ne önerilir?
Anahtarı doğrudan React koduna koymak yerine bir backend katmanı üzerinden istek atın; anahtar yalnızca sunucuda kalır. İstemci sadece kendi backend'inize çağrı yapar, backend Authorization header'ıyla Hasfiyat API'sine gider. Bu yaklaşım anahtar sızıntısını önler.
async/await ile döviz kuru isteğini nasıl yazarım?
async bir fonksiyon içinde const res = await fetch(url, {headers}) ve const data = await res.json() satırlarıyla veriyi alırsınız. Hataları try-catch ile yakalayıp res.ok kontrolüyle 200 dışı durumları yönetirsiniz. Bu yapı kodu callback yığınından kurtarıp okunur kılar.
React'te fiyatları belirli aralıkla yenilemek için ne kullanmalıyım?
useEffect içinde setInterval ile periyodik fetch atabilir, cleanup'ta clearInterval çağırırsınız. Ancak sık güncelleme gerekiyorsa REST döngüsü yerine WebSocket aboneliği hem daha verimli hem rate-limit dostudur. Aralığı çok kısa tutmak 429 hatasına yol açabilir.
Canlı altın & döviz verisine hemen bağlanın
Dakikalar içinde REST veya Socket.IO ile gerçek zamanlı fiyat akışına başlayın.