Modern web geliştirmede HTTP istekleri yapmak temel bir görevdir. İster bir sunucudan veri alıyor, ister form gönderiyor, ister api lerle etkileşimde bulunuyor olun, bu işlemleri gerçekleştirmek için güvenilir araçlara ihtiyacınız vardır. JavaScript, HTTP istekleri yapmak için yerleşik bir fetch api ‘si sağlarken, birçok geliştirici, ek işlevsellik ve rahatlık için Axios gibi üçüncü taraf kitaplıkları tercih eder.
Neden HTTP İstek Araçlarına İhtiyacımız Var?
HTTP isteklerini ve yanıtlarını işlemek, özellikle hata işleme, yanıt ayrıştırma ve istek yapılandırması dikkate alındığında karmaşık olabilir. Axios ve Fetch gibi araçlar, süreci kolaylaştıran soyutlamalar ve yardımcı programlar sağlayarak bu görevleri basitleştirir. Aşağıdakiler gibi yaygın sorunların çözümüne yardımcı olurlar:
Genel Kod: Başlıkları ayarlama ve JSON yanıtlarını yönetme gibi tekrarlayan görevleri basitleştirme.
Hata İşleme: Daha tutarlı ve yönetilebilir hata işleme mekanizmaları sağlamak.
Durdurucular: Kimlik doğrulama belirteçlerinin eklenmesi gibi isteklerin veya yanıtların önceden işlenmesine izin vermek.
Fetch API
Fetch API, HTTP api istekleri yapmak için kullanılan modern, yerleşik bir JavaScript yöntemidir. Söze dayalıdır ve XMLHttpRequest gibi eski yöntemlere kıyasla eşzamansız işlemlerle çalışmanın daha basit bir yolunu sunar.
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Bağlantı hatası');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Bir sorun oluştu: ', error));
Axios
Axios, HTTP api istekleri yapmak için kullanılan popüler bir üçüncü taraf kütüphanesidir. Fetch gibi söze dayalıdır ancak onu daha kullanışlı ve güçlü kılan birçok ek özellik içerir.
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error('Bir sorun oluştu: ', error));
Temel Farklılıklar
1. JSON'un Varsayılan Kullanımı
– Fetch:
Yanıt verilerinin JSON’a manuel olarak dönüştürülmesini gerektirir.
fetch('https://api.example.com/data')
.then(response => response.json()) // Manuel çevirme
.then(data => console.log(data));
– Axios:
JSON yanıtlarını otomatik olarak ayrıştırır.
axios.get('https://api.example.com/data')
.then(response => console.log(response.data));
2. Hata İşleme / Yakalama
– Fetch:
HTTP hataları (örn. 404 veya 500 durum kodları) için değil, yalnızca ağ hataları için verilen sözü reddeder.
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.catch(error => console.error('Fetch error:', error));
– Axios:
Hem ağ hataları hem de HTTP hataları için verilen sözü reddeder.
axios.get('https://api.example.com/data')
.catch(error => console.error('Axios error:', error));
3. Yapılandırma İsteği
– Fetch:
Başlıklar ve yöntem gibi seçeneklerin manuel olarak yapılandırılmasını gerektirir
fetch('https://api.example.com/data', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ key: 'value' })
});
– Axios:
Yapılandırma için daha kısa ve okunabilir bir sözdizimi sağlar.
axios.post('https://api.example.com/data', { key: 'value' }, {
headers: {
'Content-Type': 'application/json'
}
});
Interceptors (Durdurucular)
Durdurucular, Axios’ta istekleri veya yanıtları o zamana kadar ele alınmadan veya yakalanmadan önce engellemenize olanak tanıyan güçlü bir özelliktir. Her isteğe kimlik doğrulama belirteçleri ekleme veya hataları genel olarak ele alma gibi görevler için kullanışlıdırlar.
// Adding a request interceptor
axios.interceptors.request.use(config => {
// Add an authorization header to every request
const token = 'your_token';
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, error => {
// Handle request error
return Promise.reject(error);
});
// Adding a response interceptor
axios.interceptors.response.use(response => {
// Handle successful response
return response;
}, error => {
// Handle response error
if (error.response.status === 401) {
// Handle unauthorized error
console.error('Unauthorized');
}
return Promise.reject(error);
});
Sonuç
Hem Fetch hem de Axios, HTTP istekleri yapmak için yetenekli araçlardır, ancak farklı düzeylerde kolaylık ve işlevsellik sunarlar. Fetch, basit kullanım durumları için iyi çalışan yerel, modern bir seçenektir; Axios ise otomatik JSON işleme, daha iyi hata yönetimi ve istek ve yanıt manipülasyonu için önleyiciler dahil olmak üzere daha zengin bir özellik seti sağlar. Aralarında seçim yapmak projenizin özel ihtiyaçlarına ve basitlik ile işlevsellik arasındaki tercihinize bağlıdır.
Her aracın güçlü yönlerini ve farklılıklarını anlayarak daha bilinçli kararlar verebilir bu sayede api projeniz için daha verimli ve bakımı kolay kod yazabilirsiniz.
Paylaş
Takip Et
Eğitimin, Eğlencenin ve Haberin Sitesi TEKNOKODİ
