JavaScript'te HTTP GET İsteği Nasıl Yapılır?

```html

Web sitelerinin birbiriyle nasıl iletişim kurduğunu ve veri alışverişi yaptığını hiç merak ettiniz mi? Çevrimiçi bir kaynaktan bilgilere nasıl erişir ve bunları kendi web sayfanızda nasıl görüntülersiniz? İnternet üzerinden nasıl istek gönderir ve yanıt alırsınız?

Bu soruları merak ediyorsanız, doğru yerdesiniz. Bu blog yazısında, web API'leriyle etkileşim kurmanın en yaygın ve kullanışlı yollarından biri olan Javascript'te bir HTTP GET isteği nasıl oluşturacağınızı ve Apidog'un size nasıl yardımcı olabileceğini göstereceğim.

💡

Apidog, API dokümantasyonu, API hata ayıklama, API taklidi ve API otomatik testini sağlayan hepsi bir arada bir API işbirliği platformudur. Javascript GET isteklerini işlemek için gelişmiş yetenekler sağlar. Apidog'u ücretsiz indirin.

button

Ancak önce, bir HTTP GET isteğinin ne olduğunu ve neden ihtiyacınız olduğunu anlayalım.

HTTP GET İsteği Nedir?

HTTP, web üzerinden mesajların nasıl biçimlendirildiğini ve iletildiğini tanımlayan bir dizi kural olan Hypertext Transfer Protocol'ün kısaltmasıdır. HTTP, World Wide Web için veri iletişiminin temelini oluşturur.

Bir istek, bazı bilgiler veya eylemler istemek için bir sunucuya gönderdiğiniz bir mesajdır. Bir yanıt, sunucunun size geri gönderdiği, istediğiniz bilgileri veya sonucu içeren bir mesajdır.

Bir GET isteği, sunucudan size bazı veriler göndermesini isteyen bir HTTP isteği türüdür. Örneğin, tarayıcınıza bir URL yazdığınızda, sunucuya o URL'ye karşılık gelen web sayfasını isteyen bir GET isteği gönderirsiniz. Sunucu daha sonra tarayıcınızın oluşturup görüntülediği web sayfasının HTML kodunu yanıt olarak gönderir.

Bir GET isteği iki ana bileşenden oluşur: bir URL ve bir sorgu dizesi. URL, https://example.com gibi, erişmek istediğiniz kaynağın adresidir. Sorgu dizesi, ?name=John&age=25 gibi, bazı ek bilgiler veya parametreler içeren URL'nin bir parçasıdır. Bir sorgu dizesi bir soru işareti (?) ile başlar ve ampersanlarla (&) ayrılmış anahtar-değer çiftlerinden oluşur.

Bir GET isteği şuna benzer:

https://example.com?name=John&age=25

Bu örnekte, https://example.com adresine, iki parametreyle bir GET isteği gönderiyoruz: name ve age. Sunucu, isteğimizi işlemek ve bize uygun yanıtı göndermek için bu parametreleri kullanacaktır.

Neden bir HTTP GET İsteğine İhtiyacınız Var?

Bir HTTP GET isteği, sunucuda hiçbir şeyi değiştirmeden bir web sunucusundan bazı veriler almak istediğinizde kullanışlıdır. Örneğin, çevrimiçi bir kaynaktan en son haber makalelerini, hava durumu raporlarını, hisse senedi fiyatlarını veya kullanıcı profillerini almak isteyebilirsiniz.

Ancak, tüm web sunucuları herkese açık ve erişilebilir değildir. Bazı web sunucuları, verilerine erişmek için kimlik doğrulama, yetkilendirme veya ödeme gerektirir. Bu web sunucularına web API'leri denir.

Bir web API'si, önceden tanımlanmış yöntemler ve parametreler kullanarak bir web sunucusuyla programlı olarak etkileşim kurmanıza olanak tanıyan bir uygulama programlama arabirimidir. Bir web API'si, uygulamanız ile web sunucusu arasında bir köprü görevi görerek, verileri yapılandırılmış ve standartlaştırılmış bir şekilde alışveriş etmenizi sağlar.

Örneğin, Paris'teki mevcut sıcaklığı bir hava durumu web API'sinden almak istiyorsanız, şöyle bir GET isteği göndermeniz gerekebilir:

https://api.weather.com?city=Paris&key=123456

Bu örnekte, https://api.weather.com adresine, iki parametreyle bir GET isteği gönderiyoruz: city ve key. city parametresi, hava durumu bilgilerini almak istediğimiz konumu belirtir ve key parametresi, web API'sini kullanmaya yetkili olduğumuzu kanıtlayan benzersiz bir tanımlayıcıdır. Web API'si daha sonra Paris'teki mevcut sıcaklığı, uygulamamızda kolayca ayrıştırıp kullanabileceğimiz bir biçimde yanıt olarak gönderecektir.

İnternette, çeşitli alanları ve konuları kapsayan birçok web API'si mevcuttur. Bazı web API'leri ücretsiz ve açıktır, diğerleri ise ücretli ve kısıtlıdır. Bazı web API'leri basit ve kullanımı kolaydır, diğerleri ise karmaşık ve gelişmiştir. Bazı web API'leri iyi belgelenmiş ve güvenilirdir, diğerleri ise kötü belgelenmiş ve güvenilmezdir.

İhtiyaçlarınız için en iyi web API'sini nasıl bulur ve seçersiniz? Bir web API'sini nasıl kullanacağınızı ve hangi parametreleri göndereceğinizi nasıl öğrenirsiniz? Bir web API'sini kullanırken hataları ve istisnaları nasıl ele alırsınız? Web API isteklerinizin performansını ve güvenliğini nasıl optimize edersiniz?

Bunlar, web API'leriyle çalışırken karşılaşabileceğiniz bazı sorulardır. Neyse ki, tüm bu zorluklarda ve daha fazlasında size yardımcı olabilecek bir araç var. Bu aracın adı Apidog.

button

Javascript'te HTTP GET İstekleri Nasıl Oluşturulur

JavaScript'te HTTP GET istekleri oluşturmak, sunucular veya API'lerle etkileşim kurmanın ve veri almanın yaygın bir yoludur. JavaScript'te HTTP GET istekleri oluşturmak için şunlar gibi çeşitli yöntemler kullanabilirsiniz:

XMLHttpRequest Kullanarak JavaScript'te GET İsteği Nasıl Gönderilir

XMLHttpRequest nesnesi, sunucularla iletişim kurmak ve web sayfalarında içeriği tarayıcıyı yenilemeden yüklemek için kullanılan yerel bir JavaScript özelliğidir. Bir sunucudan veri almak istediğinizde, GET isteğini kullanırsınız. JavaScript'te XMLHttpRequest kullanarak bir GET isteğini başarıyla göndermek için, aşağıdaki adımların doğru bir şekilde gerçekleştirildiğinden emin olmak önemlidir:

İlk olarak, yeni bir XMLHttpRequest nesnesi oluşturun:

const xhr = new XMLHttpRequest();

Ardından, bir GET isteği göndermek istediğiniz API uç noktasının URL'sini belirtin:

const url = 'https://api.example.com/data';

Ardından, isteği başlatmak için open() yöntemini kullanın:

xhr.open('GET', url);

Ardından, istek durumu değiştiğinde çağrılacak bir geri çağırma işlevi tanımlamak için onreadystatechange özelliğini kullanın:

xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

Son olarak, isteği göndermek için send() yöntemini kullanın:

xhr.send();

Bu örnekte, url değişkeni tarafından belirtilen API uç noktasına bir GET isteği gönderiyoruz. İstek durumu değiştiğinde çağrılacak bir geri çağırma işlevi tanımlamak için onreadystatechange özelliğini kullanıyoruz. İstek tamamlandığında ve durum kodu 200 olduğunda, yanıt metnini konsola kaydediyoruz.

Fetch API ile GET İsteği Nasıl Oluşturulur

Fetch API, tarayıcılardan ve Node.js'den (sürüm 18'den itibaren) sunuculara HTTP istekleri göndermeyi sağlayan, vaatler üzerinde çalışan çağdaş bir JavaScript arabirimidir. XMLHttpRequest nesnesiyle aynı görevleri daha JavaScript dostu bir şekilde, vaatleri kullanarak halledebilir. Ek olarak, Hizmet Çalışanları gibi diğer teknolojiler tarafından da kullanılabilir.

Fetch API'yi kullanarak bir HTTP GET isteğinin nasıl oluşturulacağını inceleyelim.

İlk olarak, yeni bir JavaScript dosyası oluşturun ve Fetch API'yi içe aktarmak için aşağıdaki kodu ekleyin:

import fetch from 'node-fetch';

Ardından, bir GET isteği göndermek istediğiniz API uç noktasının URL'sini belirtin:

const url = 'https://api.example.com/data';

Ardından, GET isteğini oluşturmak için Fetch API'yi kullanın:

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Son olarak, GET isteğinin sonuçlarını görmek için JavaScript dosyasını çalıştırın.

Fetch API, JavaScript'te HTTP GET istekleri oluşturmanın basit ve sezgisel bir yolunu sağlar. Bu adımları izleyerek, herhangi bir API uç noktasına kolayca GET istekleri oluşturabilirsiniz.

OpenWeatherMap API'sinden veri almak için Fetch API'yi kullanarak bir HTTP GET isteğinin nasıl oluşturulacağına dair bir örnek:

const apiKey = 'YOUR_API_KEY';
const city = 'Seattle';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Bu örnekte, Seattle için hava durumu verilerini almak üzere OpenWeatherMap API'sine bir GET isteği gönderiyoruz. API anahtarımızı ve veri almak istediğimiz şehrin adını URL'deki sorgu parametreleri olarak iletiyoruz.

Bu adımları izleyerek, JavaScript'te Fetch API'yi kullanarak kolayca HTTP GET istekleri oluşturabilirsiniz.

Axios ile bir HTTP GET İsteği Oluşturma

Axios bir HTTP istemci kütüphanesidir. Bu kütüphane, REST uç noktalarına eşzamansız HTTP istekleri göndermeyi basitleştiren vaatlere dayanmaktadır. JSONPlaceholder Posts API uç noktasına bir GET isteği göndereceğiz.

Fetch API'nin aksine, Axios yerleşik değildir. Bu, Axios'u JavaScript projenize yüklemeniz gerektiği anlamına gelir.

İşte adım adım talimatlar:

İlk olarak, npm veya yarn kullanarak Axios'u yükleyin:

npm install axios

veya

yarn add axios

Ardından, Axios'u JavaScript dosyanıza içe aktarın:

import axios from 'axios';

Ardından, bir GET isteği göndermek istediğiniz API uç noktasının URL'sini belirtin:

const url = 'https://api.example.com/data';

Son olarak, GET isteğini oluşturmak için Axios'u kullanın:

axios.get(url)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Bu örnekte, url değişkeni tarafından belirtilen API uç noktasına bir GET isteği gönderiyoruz. Yanıtı işlemek için then yöntemini ve oluşabilecek hataları işlemek için catch yöntemini kullanıyoruz.

Axios'u kullanarak OpenWeatherMap API'sinden veri almak için bir HTTP GET isteğinin nasıl oluşturulacağına dair başka bir örnek:

const apiKey = 'YOUR_API_KEY';
const city = 'Seattle';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

axios.get(url)
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

Bu adımları izleyerek, JavaScript'te Axios kütüphanesini kullanarak kolayca HTTP GET istekleri oluşturabilirsiniz.

jQuery kullanarak bir GET isteği nasıl gönderilir?

jQuery'de HTTP istekleri oluşturmak nispeten basittir ve Fetch API ve Axios'a benzer. Bir GET isteği oluşturmak için, önce jQuery'yi yükleyecek veya projenizde CDN'sini kullanacaksınız:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Ardından, bir GET isteği göndermek istediğiniz API uç noktasının URL'sini belirtin:

const url = 'https://api.example.com/data';

Ardından, GET isteğini oluşturmak için $.get() yöntemini kullanın:

$.get(url, function(data) {
  console.log(data);
});

Son olarak, GET isteğinin sonuçlarını görmek için JavaScript dosyanızı çalıştırın.

Bu örnekte, url değişkeni tarafından belirtilen API uç noktasına bir GET isteği gönderiyoruz. İsteği oluşturmak için $.get() yöntemini ve yanıtı işlemek için function(data) geri çağırmasını kullanıyoruz.

jQuery'yi kullanarak OpenWeatherMap API'sinden veri almak için bir HTTP GET isteğinin nasıl oluşturulacağına dair başka bir örnek:

const apiKey = 'YOUR_API_KEY';
const city = 'Seattle';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;

$.get(url, function(data) {
  console.log(data);
});

Javascript HTTP GET İsteklerinde Hataları İşleme

Bir HTTP GET isteği oluştururken, oluşabilecek hataları işlemek önemlidir. İşte REST API'de hataları işlemek için bazı en iyi uygulamalar:

HTTP Durum Kodları: Bir istemci bir HTTP sunucusuna bir istek gönderdiğinde, sunucu, isteğin başarıyla işlenip işlenmediğini istemciye bildirmelidir. HTTP bunu beş kategori durum koduyla başarır: 100 seviyesi (Bilgilendirme), 200 seviyesi (Başarılı), 300 seviyesi (Yönlendirme), 400 seviyesi (İstemci hatası) ve 500 seviyesi (Sunucu hatası). Bir istemci, yanıt koduna bağlı olarak, belirli bir isteğin sonucunu tahmin edebilir.
Hataları İşleme: Hataları işlemenin ilk adımı, bir istemciye uygun bir durum kodu sağlamaktır. Ek olarak, yanıt gövdesinde daha fazla bilgi sağlamamız gerekebilir. Hataları işlemenin en basit yolu, uygun bir durum koduyla yanıt vermektir. İşte bazı yaygın yanıt kodları: 400 Hatalı İstek, 401 Yetkisiz, 403 Yasak, 404 Bulunamadı, 412 Önkoşul Başarısız, 500 Dahili Sunucu Hatası ve 503 Hizmet Kullanılamıyor. Temel olmasına rağmen, bu kodlar bir istemcinin meydana gelen hatanın geniş doğasını anlamasını sağlar. Örneğin, 403 hatası alırsak, istediğimiz kaynağa erişim iznimiz olmadığını biliyoruz. Ancak, birçok durumda, yanıtlarımızda ek ayrıntılar sağlamamız gerekir.
Başarısız HTTP Yanıtları ve Ağ Hataları için Hata İşleme: fetch() işlevi, ağ hataları için otomatik olarak bir hata atar, ancak 4xx veya 5xx yanıtları gibi HTTP hataları için atmaz. HTTP hataları için, response.ok özelliğini kontrol ederek isteğin başarısız olup olmadığını görebilir ve Promise.reject(error) çağırarak vaadi kendimiz reddedebiliriz.
İstek hatalarını işleyin: Bir hata oluştuğunda, kullanıcınızı bilgilendirmek için neyin başarısız olduğuna dair ayrıntıları alabilirsiniz. Bazı durumlarda, isteği otomatik olarak yeniden deneyebilirsiniz. Bir uygulama, veri erişimi başarısız olduğunda kullanıcıya faydalı geri bildirim vermelidir. Ham bir hata nesnesi, geri bildirim olarak özellikle faydalı değildir.

Apidog Nedir ve Neden Kullanmalısınız?

Apidog, web API'lerini kolaylıkla keşfetmenizi, test etmenizi ve entegre etmenizi sağlayan web tabanlı bir platformdur. Apidog, aşağıdaki özellikleri ve avantajları sağlayarak web API'leriyle çalışırken hayatınızı kolaylaştırmak için tasarlanmıştır:

Keşfet: Apidog, çeşitli kategorileri ve konuları kapsayan binlerce web API'sinin küratörlüğünü yapılmış ve aranabilir bir listesini sağlayarak, ihtiyaçlarınız için en iyi web API'lerini bulmanıza yardımcı olur.
Test Et: Apidog, gerçek zamanlı olarak istek göndermenize ve yanıt almanıza olanak tanıyan kullanıcı dostu ve etkileşimli bir arayüz sağlayarak, web API'lerini test etmenize ve hata ayıklamanıza yardımcı olur. İsteklerinizin parametrelerini, başlıklarını ve gövdesini kolayca özelleştirebilir ve yanıtların durumunu, başlıklarını ve gövdesini görebilirsiniz. Ayrıca, her isteğin ve yanıtın yanıt süresini, boyutunu ve biçimini görebilir ve bunları farklı web API'leriyle karşılaştırabilirsiniz. Ayrıca, isteklerinizi ve yanıtlarınızı kaydedebilir, paylaşabilir ve dışa aktarabilir ve bunları kendi uygulamalarınızda kullanabilirsiniz.
Entegre Et: Apidog, her web API'sinin kod parçacıklarını ve belgelerini sağlayarak, web API'lerini uygulamalarınızla entegre etmenize yardımcı olur. Şunlar gibi farklı programlama dilleri ve çerçeveler arasından seçim yapabilirsiniz...

Apidog kullanmak istiyorsanız, ücretsiz olarak indirebilir ve hemen kullanmaya başlayabilirsiniz.

button

Ancak yeterince konuşuldu, Apidog'u çalışırken görelim. Bir sonraki bölümde, basit ve eğlenceli bir web API'sini kullanarak Javascript'te bir HTTP GET isteğini oluşturmak için Apidog'u nasıl kullanacağınızı göstereceğim.

Apidog ile Javascript'te bir HTTP GET İsteği Nasıl Oluşturulur

Apidog, javascript kodu oluşturmanıza yardımcı olabilir, tek yapmanız gereken şunlardır:

Adım 1: Apidog'u açın ve yeni bir istek oluşturmak için "Yeni İstek" düğmesine tıklayın.

Adım 2: Get isteğini seçin

Adım 3: İstediğiniz API uç noktasının URL'sini girin ve Tasarım arayüzüne geçin.

Adım 4: İstemci Kodunu Oluştur'a tıklayın.

Adım 4: Oluşturmak istediğiniz Javascript kodunu seçin, Fetch, Axios, Jquery, XHR ve daha fazlası olabilir. Projenize kopyalayıp yapıştırın

Apidog Kullanarak Javascript HTTP GET İsteği Nasıl Test Edilir?

Apidog kullanarak HTTP Get isteğini Test Etmek için, bu basit adımları izlemeniz gerekir:

Apidog'u açın ve yeni bir istek oluşturmak için "Yeni İstek" düğmesine tıklayın.

İsteğin yöntemi olarak "POST"u seçin.

3. API uç noktasının URL'sini girin

Ardından, isteği API'ye göndermek için "Gönder" düğmesine tıklayın.

Gördüğünüz gibi, Apidog size isteğin URL'sini, parametrelerini, başlıklarını ve gövdesini ve yanıtın durumunu, başlıklarını ve gövdesini gösterir. Ayrıca, isteğin ve yanıtın yanıt süresini, boyutunu ve biçimini görebilir ve bunları farklı web API'leriyle karşılaştırabilirsiniz.

Javascript HTTP GET İstekleri için En İyi Uygulamalar

İyi hazırlanmış HTTP GET istekleri göndermek, web sunucularıyla verimli ve güvenli iletişim için çok önemlidir. Bunları güvenlik, performans ve ölçeklenebilirlik için optimize etmek, sağlam ve verimli bir sistem için çok önemlidir. İzlenecek bazı en iyi uygulamalar şunlardır:

Güvenlik

URL kodlama: Özel karakterleri doğrudan URL'ye dahil etmekten kaçının. Olası kod enjeksiyonu güvenlik açıklarını önlemek için bunları URL kodlamasıyla kodlayın.
HTTPS: Güvenli iletişim için her zaman HTTPS kullanın. İsteği ve yanıtı şifreleyerek hassas verileri dinlemeden korur.
Parametre doğrulaması: GET isteğinde alınan tüm parametreleri sunucu tarafında doğrulayın. Bu, manipülasyonu ve olası saldırıları önlemeye yardımcı olur.
Hız sınırlaması: DDoS saldırılarını ve aşırı sunucu yükünü önlemek için hız sınırlaması uygulayın.
Hassas verilerden kaçının: Hassas verileri GET parametreleri aracılığıyla geçirmeyin. Bu tür bilgilerin güvenli iletimi için POST isteklerini kullanın.

Performans

Önbelleğe alma: Görüntüler ve komut dosyaları gibi statik kaynaklar için tarayıcı önbelleğe almayı kullanın. Bu, sunucu yükünü azaltır ve sayfa yükleme sürelerini iyileştirir.
Parametreleri en aza indirin: Sorgu dizesi parametrelerinin sayısını minimumda tutun. Aşırı parametreler performansı düşürebilir.
Gzip sıkıştırması: Yanıtların boyutunu küçültmek ve aktarım sürelerini iyileştirmek için sunucu tarafında Gzip sıkıştırmasını etkinleştirin.
CDN kullanın: İçeriğinizi coğrafi olarak dağıtmak ve farklı konumlardaki kullanıcılar için yanıt sürelerini iyileştirmek için bir İçerik Dağıtım Ağı (CDN) kullanmayı düşünün.

Ölçeklenebilirlik

Sayfalama: Büyük veri kümelerini görüntülemek için sayfalama kullanın. Bu, tüm veri kümesini bir kerede göndermekten ve işlemden kaçınır, sunucu yükünü azaltır ve yanıt verme yeteneğini artırır.
Kaynak filtreleme: Alınan veri hacmini ve sunucu iş yükünü azaltmak için sonuçları kullanıcı tanımlı ölçütlere göre filtrelemeye izin verin.
Eşzamansız istekler: Kritik olmayan kaynakları getirmek için eşzamansız istekler kullanın. Bu, ana iş parçacığını diğer görevler için serbest bırakır ve kullanıcı deneyimini iyileştirir.
API tasarımı: GET istekleri için API'nizi verimli bir şekilde tasarlayın. Kaynaklar ve parametreler için net ve tutarlı adlandırma kuralları kullanın.
Durumsuzluk: HTTP, durumsuz bir protokoldür. GET isteklerinin durumsuz kalmasını sağlayın. Herhangi bir istek, önceki isteklerden bağımsız olarak aynı sonucu döndürmelidir.

Ek ipuçları:

Sunucu yanıtlarını optimize edin: Sunucu yanıtında gereksiz veri işleminden ve biçimlendirmeden kaçının.
API'nizi izleyin ve analiz edin: Darboğazları ve iyileştirme alanlarını belirlemek için API kullanımını ve performans ölçümlerini izleyin.
Güvenli kitaplıklar ve çerçeveler kullanın: HTTP istekleri oluşturmak ve göndermek için yerleşik ve güvenli kitaplıklar ve çerçeveler kullanın.

Bu önerilen yöntemlere uyarak, HTTP GET isteklerinizin hem güvenli hem de optimize edilmesini sağlayabilir, dayanıklı ve etkili bir web uygulaması veya API'si teşvik edebilirsiniz. Bunların genel ilkeler olduğunu ve projenizin özel ihtiyaçlarının ve sınırlamalarının alternatif stratejiler gerektirebileceğini unutmayın. Gereksinimlerinizi karşıladığından emin olmak için her zaman uygulamanızı iyice test edin.

Sonuç

Bu blog yazısında, Javascript'te bir HTTP GET isteğinin nasıl oluşturulacağını öğrendik. Ayrıca, Apidog'un, gerçek zamanlı olarak istek göndermemize ve yanıt almamıza olanak tanıyan kullanıcı dostu ve etkileşimli bir arayüz sağlayarak, web API'lerini test etmemize ve hata ayıklamamıza nasıl yardımcı olduğunu gördük. Ayrıca, Apidog'un, her web API'sinin kod parçacıklarını ve belgelerini sağlayarak, web API'lerini uygulamalarımızla nasıl entegre ettiğini de gördük.

button

Umarız yeni ve faydalı bir şeyler öğrenmişsinizdir. Web API'leri, Apidog veya Javascript hakkında daha fazla bilgi edinmek istiyorsanız.