API entegrasyonu, modern web uygulamalarında kullanıcı deneyimini artırmak ve veri iletişimini sağlamak adına temel bir gerekliliktir. Bu süreçte, özellikle form verilerinin gönderimi ve alınması sırasında Axios gibi HTTP istemci kütüphaneleri büyük kolaylık sağlar. Ancak, API'lerin sıklıkla karşılaştığı rate limit (oran sınırlandırması) engellerini aşmak veya yönetmek, entegrasyonun sürdürülebilirliği açısından kritik hale gelir. Bu başlık altında, sıfırdan başlayarak Axios kullanımıyla form doldurma, gönderme ve rate limit yönetimini detaylıca ele alacağız.
İlk olarak, kullanıcıdan alınan verilerin düzgün şekilde formdan API'ye gönderilmesi aşamasında, Axios'un POST metodunu kullanmak temel adım olur. Örneğin, bir üyelik formu veya iletişim formu gibi yapıları düşünelim; burada veriyi nesne halinde hazırlar ve axios.post() ile API'ye iletirsiniz.
İkinci adımda, rate limit sorununu yönetmek gerekir. API sağlayıcıları genellikle belirli bir süre içinde belirli sayıda istek yapılmasına izin verir. Buna genellikle HTTP 429 Too Many Requests cevabı ile karşılaşırsınız. Bu durumda, birkaç strateji kullanabilirsiniz:
- Yeniden Deneme (Retry) Mekanizması: 429 durum kodu alınca, belirli bir süre (örn. 'Retry-After' header'ındaki değere göre) bekleyip tekrar denemek. Bu, axios'un interceptors veya async fonksiyonlar ile kolayca uygulanabilir.
- İstek Sıralama ve Planlama: Aynı anda çok sayıda isteği sıralı hale getirerek API sınırını aşmamayı sağlamak.
- Küçük Partilerle Gönderim: Özellikle büyük veri setlerinde, veriyi parçalara bölerek göndermek, limitleri aşmamak adına etkili olabilir.
Örnek bir axios kullanımı ve rate limit yönetimi şu şekilde olabilir:
1234567891011121314151617181920212223242526272829js
import axios from 'axios';
const apiClient = axios.create({
baseURL: 'https://api.ornek.com',
timeout: 5000,
});
// Rate limit yönetimi için
apiClient.interceptors.response.use(null, async (error) => {
const { config, response } = error;
if (response && response.status === 429) {
const retryAfter = response.headers['retry-after'];
const delay = retryAfter ? parseInt(retryAfter, 10) * 1000 : 3000; // varsayılan 3 saniye
await new Promise((resolve) => setTimeout(resolve, delay));
return apiClient(config); // tekrar dene
}
return Promise.reject(error);
});
// Form verisini göndermek
async function submitForm(data) {
try {
const response = await apiClient.post('/submit', data);
console.log('Başarılı:', response.data);
} catch (err) {
console.error('Hata:', err);
}
}
Bu yapı, API ile iletişimi sağlarken karşılaşılabilecek rate limit engellerini akıllıca yönetmenize olanak tanır. Ayrıca, istekleri dikkatli planlayıp gerekirse zamanlamayı optimize etmek, API erişiminizin kesintiye uğramaması açısından önemli hale gelir.
Sonuç olarak, Axios ile API entegrasyonu, doğru yapılandırma ve limit yönetimi ile hem verimli hem de sürdürülebilir hale gelir. Bu süreçte, API dokümantasyonunu dikkatle inceleyerek, limit ve yanıt header'larını iyi anlamak ve uygun stratejiler geliştirmek temel başarı anahtarlarındandır.
