Axios API'si ile Body ve Header'larla GET İsteği Nasıl Yapılır

APIs (Uygulama Programlama Arayüzleri) çok önemli bir rol oynar. Uygulamaların harici hizmetlerle iletişim kurmasını, veri almasını ve çeşitli görevleri gerçekleştirmesini sağlarlar. JavaScript'te HTTP istekleri yapmak için popüler bir kütüphane Axios'tur.

Bu blog yazısında, Axios'u kullanarak GET istekleri body ve başlıklarla yapmanın inceliklerine dalacağız. O halde en sevdiğiniz içeceği alın ve dalalım!

Axios Nedir?

Axios, tarayıcı ve Node.js için promise tabanlı bir HTTP istemcisidir. HTTP istekleri yapmayı, yanıtları işlemeyi ve hataları yönetmeyi basitleştirir. İster tek sayfalık bir uygulama ister sunucu tarafında bir proje geliştiriyor olun, Axios yanınızda.

Neden Axios Kullanmalı ve Nasıl Kurulur?

• Temiz Sözdizimi: Axios, istekler yapmak için temiz ve sezgisel bir sözdizimi sağlar.
• Promises: Axios, asenkron işlemleri kolaylaştıran promise'ler döndürür.
• Tarayıcı ve Node.js Uyumluluğu: Her iki ortamda da sorunsuz çalışır.
• Interceptor'lar: İstekleri ve yanıtları yakalayabilir, özel mantık ekleyebilirsiniz.

Axios'u npm veya yarn kullanarak kurabilirsiniz. İşte nasıl kurulacağı:

npm kullanarak:

$ npm install axios

bower kullanarak:

$ bower install axios

yarn kullanarak:

$ yarn add axios

jsDelivr CDN kullanarak:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

unpkg CDN kullanarak:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

GET İsteği ile Hangi Body ve Header'ı Kullanabilirsiniz?

Axios kullanarak bir GET isteği yaparken, HTTP spesifikasyonu tipik olarak bir istek body'si içermez. Ancak, GET isteğinizle birlikte veri göndermeniz gereken senaryolar vardır. Bunu nasıl başarabileceğinizi inceleyelim:

Sorgu Parametreleri (URL Parametreleri):

• Verileri istek body'sine dahil etmek yerine, URL'deki sorgu parametreleri olarak geçirebilirsiniz.
• Verileri sorgu parametreleri olarak göndermek için Axios yapılandırma nesnesinde params özelliğini kullanın.

Örnek:

const data = {
  param1: 'value1',
  param2: 'value2',
};

axios.get('https://api.example.com/resource', { params: data })
  .then((response) => {
    console.log('Data received:', response.data);
  })
  .catch((error) => {
    console.error('Error fetching data:', error.message);
  });

• Sunucu tarafında, bu parametrelere req.query.param1 ve req.query.param2 kullanarak erişebilirsiniz.

Başlıklar:

• Başlıklar kimlik doğrulama, yetkilendirme ve diğer amaçlar için önemlidir.
• Axios yapılandırma nesnesinde headers özelliğini kullanarak özel başlıklar ayarlayabilirsiniz.

Örnek:

const config = {
  headers: {
    Authorization: 'Bearer YOUR_ACCESS_TOKEN',
    'Custom-Header': 'Custom Value',
  },
};

axios.get('https://api.example.com/protected-resource', config)
  .then((response) => {
    console.log('Protected data:', response.data);
  })
  .catch((error) => {
    console.error('Error fetching protected data:', error.message);
  });

• 'Bearer YOUR_ACCESS_TOKEN' ifadesini gerçek token'ınızla değiştirin.

GET İsteklerinde Body Göndermekten Kaçının:

• Axios kullanarak bir GET isteğinde body göndermek teknik olarak mümkün olsa da, genellikle kötü bir uygulama olarak kabul edilir.
• HTTP spesifikasyonu, GET istekleri için bir istek body'si tanımlamaz.
• Veri göndermeniz gerekiyorsa, sorgu parametrelerini veya diğer uygun yöntemleri tercih edin.

En iyi uygulamalara uymanın sağlam ve bakımı kolay kod sağladığını unutmayın. Bir GET isteğiyle karmaşık veriler göndermeniz gerektiğini fark ederseniz, standart kurallara uygun olduğundan emin olmak için tasarımınızı yeniden değerlendirmeyi düşünün.

Axios GET İsteğinde Header ve Body Nasıl Eklenir ve Gönderilir?

Axios'u GET istekleri yapmak için kullanırken, HTTP spesifikasyonunun tipik olarak GET istekleri için bir istek body'si içermediğini anlamak önemlidir. Ancak, sorgu parametreleri ve başlıkları kullanarak ek veriler gönderebilirsiniz. İşte başlıkları nasıl ekleyip göndereceğiniz ve bir GET isteğinde verilerle nasıl çalışacağınız:

Başlık Ekleme

Axios'taki GET isteğinize başlık eklemek için, bir headers özelliği olan bir yapılandırma nesnesi geçirebilirsiniz. İşte bir örnek:

const axios = require('axios');

const config = {
  headers: {
    'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
    'Custom-Header': 'Custom Value'
  }
};

axios.get('https://api.example.com/data', config)
  .then((response) => {
    // Yanıtı işle
  })
  .catch((error) => {
    // Herhangi bir hatayı işle
  });

GET İstekleriyle Veri Gönderme

Bir GET isteğiyle body göndermek standart değildir ve genellikle tavsiye edilmezken, Axios yapılandırma nesnesindeki params özelliğini kullanarak verileri sorgu parametreleri olarak gönderebilirsiniz:

const params = {
  key1: 'value1',
  key2: 'value2'
};

axios.get('https://api.example.com/data', { params })
  .then((response) => {
    // Yanıtı işle
  })
  .catch((error) => {
    // Herhangi bir hatayı işle
  });

Sunucu tarafında, bu verilere request.body değil, request.query aracılığıyla erişilebilecektir. Ayrıca, bu parametrelerin URL'ye ekleneceğini de belirtmekte fayda var.

Yaygın Hatalar ve Sorun Giderme İpuçları

Axios'u body ve başlıklarla GET istekleri yapmak için kullanırken, geliştiriciler birkaç yaygın hatayla karşılaşabilirler. İşte bu sorunları çözmenize yardımcı olacak bazı sorun giderme ipuçları:

Yaygın Hatalar

1. Hata: Axios get bir fonksiyon değil

• Neden: Bu hata genellikle Axios içe aktarımıyla ilgili bir sorun olduğunda veya tanımlanmamış bir değişken üzerinde .get çağrılmaya çalışıldığında ortaya çıkar.
• Çözüm: Axios'un doğru şekilde içe aktarıldığından ve .get'i Axios örneği üzerinde çağırdığınızdan emin olun.

2. Hata: Ağ Hatası

• Neden: Bu hata, CORS sorunları, ağ bağlantı sorunları veya sunucu tarafı hataları nedeniyle oluşabilir.
• Çözüm: Ağ bağlantısını kontrol edin, sunucunun çalıştığından emin olun ve CORS'un sunucuda doğru şekilde yapılandırıldığını doğrulayın.

3. Hata: İstek durum kodu 4xx/5xx ile başarısız oldu

• Neden: Bu hatalar, istemci tarafı sorunlarını (4xx) veya sunucu tarafı sorunlarını (5xx) gösteren sunucudan gelen yanıtlardır.
• Çözüm: 4xx hataları için istek URL'sini, başlıkları ve parametreleri kontrol edin. 5xx hataları için daha fazla ayrıntı için sunucu günlüklerini inceleyin.

4. Hata: Zaman Aşımı

• Neden: İstek, Axios'ta belirtilen timeout değerinden daha uzun sürdü.
• Çözüm: Axios istek yapılandırmasında timeout değerini artırın veya sunucunun yanıt süresini optimize edin.

5. Hata: Geçersiz URL

• Neden: Axios isteğinde sağlanan URL yanlış veya hatalı.
• Çözüm: URL'nin doğruluğunu doğrulayın ve düzgün bir şekilde kodlandığından emin olun.

6. Hata: Başlıklar Reddedildi

• Neden: Sunucu, güvenlik politikaları nedeniyle belirli başlıklarla yapılan istekleri reddedebilir.
• Çözüm: Gönderilen başlıkları inceleyin ve sunucunun beklenen biçimine ve değerlerine uygun olduğundan emin olun.

7. Hata: Yanıt alınmadı

• Neden: Sunucu bir yanıt göndermedi, muhtemelen bir çökme veya zaman aşımı nedeniyle.
• Çözüm: Olası sorunları belirlemek için sunucu durumunu ve günlüklerini kontrol edin.

Gelişmiş Sorun Giderme:

• Axios Interceptor'ları: Hata ayıklama için istekleri ve yanıtları kaydetmek için Axios interceptor'larını kullanın.
• axios-retry: Geçici hataları otomatik olarak işlemek için axios-retry paketini uygulayın.
• Hata Ayıklama Araçları: Sorunların nerede oluştuğunu belirlemek için kodunuzda adım adım ilerlemek için hata ayıklama araçlarını kullanın.

Etkili sorun giderme, sorunu belirlemek, hata mesajlarını anlamak ve uygun çözümleri uygulamak için sistematik bir yaklaşım içerir. Bu ipuçlarını izleyerek, Axios ile GET istekleri yaparken karşılaşılan çoğu sorunu çözebilmelisiniz.

Apidog Kullanarak Body ve Header ile GET İstekleri Nasıl Gönderilir?

Apidog, body ve header parametreleriyle GET istekleri göndermenize yardımcı olabilecek güçlü bir araçtır.

Header ile GET İstekleri Gönderin:

Apidog'u açın ve Yeni İstek düğmesine tıklayın.

GET isteği göndermek istediğiniz API uç noktasının URL'sini girin, ardından Başlıklar sekmesine tıklayın ve istediğiniz seçeneği belirleyin. Bu örnekte, Yetkilendirme'yi seçiyoruz.

Kimlik bilgilerinizi ekleyin (sunucu doğrulaması için gereken gerçek veriler, örn. kullanıcı adı/şifre, token, hash)

İsteği gönderin ve yanıtı analiz edin.

Apidog, yetkilendirme başlıklarıyla çalışmayı kolaylaştırır, böylece API'lerinizi güvenle test edebilirsiniz!

Body ile GET İstekleri Gönderin:

Body ile GET isteklerini test etmek biraz zor olabilir çünkü HTTP spesifikasyonu geleneksel olarak GET isteklerini idempotent (sunucunun durumunu değiştirmedikleri anlamına gelir) olarak kabul eder. Ancak, bazı API'ler, GET isteklerinde bile bir istek body'si ekleyebileceğiniz özel davranışa izin verebilir.

“Body” sekmesine geçin ve eklemek istediğiniz body spesifikasyonunu seçin.

İsteği gönderin ve yanıt durum kodunun ok olduğunu doğrulayın.

Body ile GET isteklerini test etmenin yaygın olmayabileceğini, ancak API'nizin davranışını anlamanın ve tüm senaryolar için kapsamlı testler yapmanın önemli olduğunu unutmayın. Apidog, API tasarımı, hata ayıklama ve test için araçlar sağlayarak bu süreci basitleştirebilir.

Apidog'u Kullanarak Otomatik Olarak Axios Kodu Oluşturma

Apidog ayrıca HTTP istekleri yapmak için otomatik olarak Axios kodu oluşturmanıza olanak tanır. İşte Apidog'u Axios kodu oluşturmak için nasıl kullanacağınız:

1. İstekle göndermek istediğiniz herhangi bir başlığı veya sorgu dizesi parametresini girin, ardından Kod Oluştur düğmesine tıklayın.

2. Oluşturulan Axios kodunu kopyalayın ve projenize yapıştırın.

Axios GET İstekleri Parametreleri için En İyi Uygulamalar

Axios GET isteklerinizde parametrelerin etkili bir şekilde kullanılmasını sağlamak için aşağıdaki en iyi uygulamaları göz önünde bulundurun:

1. Açıklayıcı parametre adları seçin: Kodunuzun okunabilirliğini ve bakımı kolaylığını artırmak için parametreleriniz için anlamlı adlar kullanın. Bu, diğer geliştiricilerin (gelecekteki kendiniz dahil) her bir parametrenin amacını anlamasını kolaylaştırır.
2. Kullanıcı girdisini doğrulayın ve temizleyin: Kullanıcı girdisini parametre olarak kabul ederken, SQL enjeksiyonu veya siteler arası komut dosyası oluşturma (XSS) gibi potansiyel güvenlik açıklarını önlemek için değerleri doğrulayın ve temizleyin. Uygulamanızın güvenliğini sağlamak için sunucu tarafı doğrulama ve temizleme tekniklerini kullanın.
3. Varsayılan veya isteğe bağlı parametreleri işleyin: Bazı durumlarda, GET isteklerinize varsayılan veya isteğe bağlı parametreler eklemek isteyebilirsiniz. Bunu işlemek için, belirli ölçütlere bağlı olarak params nesnesine koşullu olarak parametreler ekleyebilirsiniz. Bu, bir parametre açıkça sağlanmadığında bir geri dönüş değeri sağlamanıza olanak tanır.
4. Sayfalandırmayı düşünün ve verileri sınırlayın: Büyük bir veri kümesiyle uğraşıyorsanız, her istekte alınan veri miktarını sınırlamak için sayfalandırma uygulamayı düşünün. Bu, performansı artırmaya ve hem istemci hem de sunucu üzerindeki yükü azaltmaya yardımcı olur. Sayfalandırma işlemini kontrol etmek için page ve limit gibi parametreler ekleyebilirsiniz.

Sonuç

Body ve başlıklarla Axios API GET istekleri yapmak, API'lerle çalışan herhangi bir geliştirici için çok önemli bir beceridir. Bu blog yazısı size tam olarak bunu nasıl yapacağınıza dair kapsamlı bir rehber sunmuştur. Axios'u kurmaktan, GET isteği oluşturmaya, yanıtları ve hataları işlemeye kadar her şeyi ele aldık.

Apidog'un gücüyle, başlık ve body parametrelerini kolaylıkla değiştirebilirsiniz. Bu bilgiyle, artık API'lerle güvenle etkileşim kurabilir, verileri verimli bir şekilde alabilir ve daha dinamik ve duyarlı uygulamalar oluşturabilirsiniz. Unutmayın, bu kavramlarda ustalaşmanın anahtarı uygulamadır. O halde, Apidog'u keşfetmekten ve bu istekleri yapmaya başlamaktan çekinmeyin! İyi kodlamalar!