HTTP (Hypertext Transfer Protocol), bir sunucu ve istemci arasında veri iletişimini sağlayan bir protokoldür. Temel olarak, web tarayıcıları gibi istemcilerin web sunucularına istek göndermesine ve sunucuların istemcilere yanıt vermesine izin verir.
VanillaJS ile HTTP İstekleri Nasıl Yapılır?
HTTP istekleri, bir istemci (genellikle bir web tarayıcısı) tarafından sunucuya gönderilen isteklerdir. Bu istekler, genellikle belirli bir kaynağı almak veya sunucuda belirli bir işlemi gerçekleştirmek için yapılır. Örneğin, bir web tarayıcısı bir web sayfasını görüntülemek için sunucuya bir HTTP GET isteği gönderebilir.
HTTP istekleri, genellikle aşağıdaki unsurları içerir:
- Metod (Method): İstek türünü belirtir. En yaygın olarak kullanılanlar
GET,POST,PUT,DELETE,PATCHgibi metotlardır. Bu metodlar, sunucunun istemciye ne tür bir yanıt vereceğini belirler. - URL (Uniform Resource Locator): İstek yapılan kaynağın adresini belirtir. Bu, genellikle web sunucusunun adresi ve istenen kaynağın yolunu içerir.
- Başlık (Header): İstekle ilgili ek bilgileri içerir. Örneğin, kullanıcı tarayıcısı, kabul edilebilir içerik türleri, kimlik doğrulama bilgileri gibi bilgileri içerebilir.
- Gövde (Body): İstekte taşınan verileri içerir. Bu genellikle
POST,PUTgibi metodlarda kullanılır ve istemcinin sunucuya veri göndermesine izin verir.
HTTP istekleri, sunucudan bir yanıt almadan önce istemci tarafından gönderilir. Sunucu, isteği aldıktan sonra isteğe göre işlem yapar ve istemciye bir yanıt döner. Bu yanıt da genellikle bir başlık, gövde ve yanıt kodu içerir.
Kısacası, HTTP istekleri, bir istemcinin bir sunucuya belirli bir kaynak veya işlem için talepte bulunması ve sunucunun bu talebe uygun bir yanıt vermesi için kullanılan iletişim aracıdır.
javaScript ile temel bir HTTP GET isteği örneği:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script> // XMLHttpRequest nesnesi oluştur var xhr = new XMLHttpRequest(); // İstek türünü belirle (GET) var method = "GET"; // İstek yapılacak URL'yi belirle var url = "https://jsonplaceholder.typicode.com/posts/1"; // İstek açıkça asenkron olarak yapılacak mı? var async = true; // İstek başlatıldığında çağrılacak fonksiyonu tanımla xhr.onreadystatechange = function () { // İstek tamamlandı mı ve başarılı mı? if (xhr.readyState === 4 && xhr.status === 200) { // İstek başarılı oldu, gelen veriyi işle var responseData = JSON.parse(xhr.responseText); console.log(responseData); } }; // İstek ayarlarını yap ve gönder xhr.open(method, url, async); xhr.send(); </script> |
fetch() yöntemini kullanarak:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script> // İstek yapılacak URL'yi belirle var url = "https://jsonplaceholder.typicode.com/posts/1"; // Fetch ile GET isteği yap fetch(url) .then(response => { // İstek başarılı olursa, yanıtı JSON olarak döndür if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { // Gelen veriyi işle console.log(data); }) .catch(error => { // Hata durumunda hata mesajını yazdır console.error('There was a problem with your fetch operation:', error); }); </script> |
Örnek çıktı:
Aynı işlemi Axios kullanarak nasıl yaparız işte çözüm:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // Axios kütüphanesini projeye dahil etmek için CDN bağlantısını ekleyebilirsiniz: // İstek yapılacak URL'yi belirle var url = "https://jsonplaceholder.typicode.com/posts/1"; // Axios ile GET isteği yap axios.get(url) .then(function (response) { // İstek başarılı oldu, gelen veriyi işle console.log(response.data); }) .catch(function (error) { // Hata durumunda hata mesajını yazdır console.error('There was a problem with your axios request:', error); }); </script> |
Axios Nedir?
Axios, modern tarayıcılar ve Node.js’de kullanılabilen popüler bir JavaScript kütüphanesidir. HTTP isteklerini yapmak ve yanıtları işlemek için tasarlanmıştır. Axios, XMLHttpRequest veya Fetch API’sine kıyasla daha kullanımı kolay ve güçlü bir API sağlar. İşte Axios kütüphanesinin geniş tanımı ve nasıl kullanılacağına dair bir açıklama:
Axios Kütüphanesinin Geniş Tanımı:
Axios, JavaScript ile HTTP isteklerini yapmak için tasarlanmış bir kütüphanedir. Tarayıcıda ve Node.js ortamında kullanılabilir. Axios’un temel özellikleri şunlardır:
- Kolay Kullanım: Axios, HTTP isteklerini yapmayı ve yanıtları işlemeyi oldukça basit hale getirir. İsteği yapılandırmak için çeşitli seçenekler sunar ve Promise tabanlı bir API sağlar.
- Tarayıcı Desteği: Axios, modern web tarayıcılarında kullanılabilir. Bu sayede web tabanlı uygulamalar geliştirirken kolayca kullanılabilir.
- Node.js Desteği: Axios, Node.js ortamında da kullanılabilir. Bu özelliği sayesinde sunucu tarafında da HTTP istekleri yapmak için idealdir.
- HTTP Metodları Desteği: Axios, GET, POST, PUT, DELETE gibi yaygın HTTP metodlarını destekler. Bu sayede farklı türde istekler yapabilir ve sunucu tarafındaki işlemleri yönetebilirsiniz.
- Interceptors (Araçlar): Axios, istekler ve yanıtlar üzerinde interceptor’lar kullanarak işlem yapmayı sağlar. Bu, özellikle istekleri ön işlemek veya yanıtları işlemek için kullanışlıdır.
- Cancelation (İptal): Axios, istekleri iptal etme özelliği sağlar. Bu özellik, kullanıcılar isteklerin tamamlanmasını beklemeden istekleri iptal etmek istediklerinde kullanılır.
Axios Kullanımı:
Axios kullanmak oldukça basittir. İlk olarak, projenize Axios’u dahil etmelisiniz. Bunun için CDN bağlantısını veya npm/yarn gibi paket yöneticilerini kullanabilirsiniz. Ardından, istekleri yapmak için Axios’un sağladığı fonksiyonları kullanabilirsiniz. İşte temel bir Axios kullanım örneği:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // Axios kütüphanesini projeye dahil etmek için CDN bağlantısını ekleyebilirsiniz: // İstek yapılacak URL'yi belirle var url = "https://jsonplaceholder.typicode.com/posts/1"; // Axios ile GET isteği yap axios.get(url) .then(function (response) { // İstek başarılı oldu, gelen veriyi işle console.log(response.data); }) .catch(function (error) { // Hata durumunda hata mesajını yazdır console.error('There was a problem with your axios request:', error); }); </script> |
Bu örnekte, axios.get() fonksiyonunu kullanarak bir HTTP GET isteği yapılıyor. İstek başarılı olduğunda .then() bloğu çalışır ve gelen veriyi işler. .catch() bloğu ise herhangi bir hata durumunda çalışır ve hatayı işler. Bu şekilde, Axios’un kolay kullanımı ve güçlü özelliklerinden faydalanabilirsiniz.
Axios ile HTTP İstekleri Nasıl Yapılır?
1. POST İsteği Göndermek:
Axios ile bir POST isteği göndermek için axios.post() fonksiyonunu kullanabiliriz. Bu, genellikle bir formun sunucuya gönderilmesi veya veritabanına yeni bir kayıt eklemek için kullanılır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // İstek yapılacak URL'yi ve gönderilecek veriyi belirle var url = "https://jsonplaceholder.typicode.com/posts"; var postData = { title: 'Başlık', body: 'İçerik', userId: 1 }; // Axios ile POST isteği yap axios.post(url, postData) .then(function (response) { // İstek başarılı oldu, sunucudan dönen yanıtı işle console.log(response.data); }) .catch(function (error) { // Hata durumunda hata mesajını yazdır console.error('There was a problem with your axios request:', error); }); </script> |
Bu örnekte, axios.post() ile bir POST isteği gönderiyoruz. İstekin URL’si ve gönderilecek veri belirtilir. İstek başarılı olduğunda .then() bloğu çalışır ve sunucudan dönen yanıtı işler.
2. PUT İsteği Yapmak:
Bir kaydı güncellemek için PUT isteği kullanabiliriz. Axios ile PUT isteği yapmak için axios.put() fonksiyonunu kullanabiliriz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // İstek yapılacak URL'yi ve güncellenecek veriyi belirle var url = "https://jsonplaceholder.typicode.com/posts/1"; var updateData = { title: 'Yeni Başlık', body: 'Yeni İçerik', userId: 1 }; // Axios ile PUT isteği yap axios.put(url, updateData) .then(function (response) { // İstek başarılı oldu, sunucudan dönen yanıtı işle console.log(response.data); }) .catch(function (error) { // Hata durumunda hata mesajını yazdır console.error('There was a problem with your axios request:', error); }); </script> |
Bu örnekte, axios.put() ile bir PUT isteği gönderiyoruz. İstekin URL’si ve güncellenecek veri belirtilir. İstek başarılı olduğunda .then() bloğu çalışır ve sunucudan dönen yanıtı işler.
3. DELETE İsteği Yapmak:
Bir kaydı silmek için DELETE isteği kullanabiliriz. Axios ile DELETE isteği yapmak için axios.delete() fonksiyonunu kullanabiliriz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // Silinecek kaydın URL'sini belirle var url = "https://jsonplaceholder.typicode.com/posts/1"; // Axios ile DELETE isteği yap axios.delete(url) .then(function (response) { // İstek başarılı oldu, sunucudan dönen yanıtı işle console.log(response.data); }) .catch(function (error) { // Hata durumunda hata mesajını yazdır console.error('There was a problem with your axios request:', error); }); </script> |
Bu örnekte, axios.delete() ile bir DELETE isteği gönderiyoruz. İstekin URL’si belirtilir. İstek başarılı olduğunda .then() bloğu çalışır ve sunucudan dönen yanıtı işler.
4. Başlık Eklemek:
Axios isteklerine başlık eklemek için, headers parametresini kullanabiliriz. Örneğin, kimlik doğrulama bilgilerini veya kabul edilebilir içerik türlerini belirtmek için başlık ekleyebiliriz.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // İstek yapılacak URL'yi belirle var url = "https://api.example.com/data"; // İstekin bir referansını tut var request; // Axios ile GET isteği yap request = axios.get(url) .then(function (response) { // İstek başarılı oldu, sunucudan dönen yanıtı işle console.log(response.data); }) .catch(function (error) { // Hata durumunda hata mesajını yazdır if (axios.isCancel(error)) { console.log('Request canceled:', error.message); } else { console.error('There was a problem with your axios request:', error); } }); // İsteği iptal etmek için request.cancel(); </script> |
Bu örnekte, bir GET isteği gönderiyoruz ve isteğin bir referansını tutarak bu isteği iptal etme olasılığını koruyoruz. İsteği iptal etmek için, tutulan referans üzerinden cancel fonksiyonunu çağırıyoruz.
Bu örnekler, Axios’un çeşitli senaryolarda nasıl kullanılabileceğini gösterir. Axios’un esnek ve güçlü API’si sayesinde, HTTP isteklerini yapmak ve yanıtları işlemek oldukça kolaydır. Axios’un esnek ve güçlü API’si, geliştiricilere çeşitli senaryolarda ihtiyaç duydukları işlevselliği sağlar. İşte Axios’un bu esnekliği ve gücüyle çeşitli senaryolarda nasıl kullanılabileceği hakkında birkaç ek örnek:
6. Eşzamanlı İstekler Yapma:
Axios, eşzamanlı olarak birden fazla istek yapma yeteneğine sahiptir. Örneğin, bir sayfa yüklendiğinde birden fazla kaynağa ihtiyaç duyuluyorsa, bu kaynaklara eşzamanlı istekler yapılabilir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // Eşzamanlı olarak iki farklı kaynağa istek yap axios.all([ axios.get('https://api.example.com/data1'), axios.get('https://api.example.com/data2') ]) .then(axios.spread(function (response1, response2) { // İki istek de başarılı oldu, yanıtları işle console.log(response1.data); console.log(response2.data); })) .catch(function (error) { // Herhangi bir istekte hata olursa, hata mesajını yazdır console.error('There was a problem with your axios request:', error); }); </script> |
Bu örnekte, axios.all() ve axios.spread() yöntemlerini kullanarak eşzamanlı olarak iki farklı kaynağa istek yapıyoruz. Tüm istekler başarılı olduğunda, her iki yanıtı da işleyebiliriz.
7. Axios İnterceptor’ları Kullanma:
Axios, istekler ve yanıtlar üzerinde interceptor’lar kullanarak işlem yapmayı sağlar. Bu, özellikle tüm isteklere belirli başlık veya parametreleri eklemek, yanıtları ön işlemek veya hata durumlarında özel işlemler yapmak için kullanışlıdır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // Request interceptor axios.interceptors.request.use(function (config) { // Tüm isteklere ek bir başlık ekleme örneği config.headers['X-Custom-Header'] = 'value'; return config; }, function (error) { return Promise.reject(error); }); // Response interceptor axios.interceptors.response.use(function (response) { // Yanıtları ön işleme veya özel işlemler yapma örneği return response; }, function (error) { // Hata durumunda özel işlemler yapma örneği return Promise.reject(error); }); </script> |
Bu örnekte, axios.interceptors.request.use() ve axios.interceptors.response.use() metodlarını kullanarak bir istek interceptor ve bir yanıt interceptor tanımlıyoruz. Bu interceptor’lar, tüm isteklerinize veya yanıtlarınıza uygulanacak özel işlemleri sağlar.
Axios’un bu ve diğer özellikleri, HTTP istekleri yapmak ve yanıtları işlemek için geliştiricilere geniş bir esneklik sağlar. Bu sayede, farklı senaryolara uygun çözümler üretmek mümkündür.
Sonuç
Axios’un esnek ve güçlü API’si, çeşitli senaryolarda HTTP isteklerini yapmayı ve yanıtları işlemeyi oldukça kolay hale getirir, bu da geliştiricilere daha etkili ve verimli bir geliştirme deneyimi sunar.
Yorum Yap