React uygulamalarında veri alışverişi için sık kullanılan Axios kütüphanesi, hem Nodejs hem de web tarayıcılarında kullanılabilir ve Promise tabanlıdır Axios ile GET, POST, PUT, DELETE gibi HTTP metodlarını kullanarak istekler yapabiliriz ve verileri yönetebiliriz Axios uygulamasını kullanmak için öncelikle npm veya yarn kullanarak projemize yüklememiz gerekiyor Yükledikten sonra, Axios'u projenize dahil edip Promise yapısını anlamanız gerekiyor Sonrasında, Axios fonksiyonlarını kullanarak istekler yapabilir ve Promise yapısı sayesinde cevapları ele alabilirsiniz GET veya POST isteği gibi örnek kodların yer aldığı dokümantasyonlara göz atarak daha fazla bilgi edinebilirsiniz

React, modern web uygulamalarının popüler bir JavaScript kütüphanesidir. Ancak, birçok uygulama, sunucudan veri almak veya sunucuya veri göndermek için HTTP istekleri yapmayı gerektirir. Bu makalede, React uygulamalarında HTTP istekleri yapmak için kullanılabilecek Axios kütüphanesi ele alınmaktadır.

Axios, HTTP istekleri yapmak için yaygın olarak kullanılan bir JavaScript kütüphanesidir. Hem Node.js hem de web tarayıcılarında kullanılabilir ve Promise tabanlıdır. Bu nedenle, React uygulamaları içinde Axios kullanmak oldukça kolaydır.

Bu makalede, Axios kütüphanesi kullanarak React uygulamalarının nasıl HTTP istekleri yapabileceği ayrıntılı olarak ele alınacaktır. İsteğe bağlı olarak, HTTP istekleri nasıl yapıldığına dair örnek kodlar ve Axios ile ilgili temel kurulum adımları da gösterilecektir.

Axios Nedir?

Axios, Javascript programlama dili kullanılarak HTTP istekleri yapmak için kullanabileceğimiz bir kütüphanedir. Özellikle Node.js ortamında ve web tarayıcılarında rahatlıkla kullanılabilen Axios, birçok programlama dili ile de uyumlu bir yapıya sahiptir. Axios'un temel özelliklerinden biri, Promise yapısıdır. Bu sayede, kodlarımızın başarılı bir şekilde tamamlanmasını bekler ve sonuçları daha hızlı bir şekilde ele alabiliriz.

Axios kullanarak, kolaylıkla GET, POST, PUT, DELETE ve diğer HTTP metodları ile istekler yapabiliriz. Her istek için belirli parametreler belirtiyoruz ve Axios, bize Promise yapısı ile cevap döndürüyor. Bu sayede, HTTP istekleri yapmak oldukça pratik bir hale getirilmiş oluyor. Axios kütüphanesinin avantajlarından biri de, kolay bir şekilde entegre edilebilir olmasıdır. Yapmanız gereken tek şey, Axios'u projenize dahil etmek ve basit bir şekilde kullanmaktır.

Axios Kurulumu

Axios'u kullanabilmek için ilk yapmanız gereken şey, Axios kütüphanesini yüklemektir. Bu işlemi yapabilmek için npm veya yarn gibi bir paket yöneticisi kullanmanız gerekmektedir. Eğer npm kullanacaksanız, aşağıdaki komutu kullanabilirsiniz:

npm install axios

Eğer yarn kullanmayı tercih ederseniz, aşağıdaki komutu kullanmanız yeterlidir:

yarn add axios

Bu işlemleri tamamladıktan sonra, Axios'u kullanmaya başlayabilirsiniz.

npm kullanarak Axios kurulumu:

Axios kütüphanesini bir JavaScript projesinde kullanmak için npm kullanarak kolayca yükleme işlemleri gerçekleştirebilirsiniz. Axios kütüphanesini yüklemek için öncelikle terminal veya komut istemi üzerinde projenizde çalıştığınız dizinde aşağıdaki komutu çalıştırmanız gerekir:

npm install axios

Bu komut sayesinde Axios kütüphanesi projenize yüklenerek kullanıma hazır hale gelir. Projede kullanacağınız sayfada Axios'u çağırmak için, sayfanın en üst kısmına Axios kütüphanesini import etmeniz gerekir. Ayrıca, Axios'u projenizde kullanabilmeniz için Promise tabanlı yapısını anlamak da önemlidir. Axios ile veri alışverişi yaparken Promises yapısı ile verilerinizi yönetebilirsiniz.

Axios kütüphanesini yükledikten sonra, projenizde HTTP istekleri yapmak ve almak için tüm Axios fonksiyonlarını kullanabilirsiniz. Axios ile HTTP isteklerinin nasıl yapıldığına dair daha fazla bilgi edinmek için Axios resmi belgelerine göz atabilirsiniz.

yarn kullanarak Axios kurulumu:

Axios kütüphanesini bir JavaScript projesinde kullanmak için yarn paket yöneticisini kullanabilirsiniz. Axios kütüphanesini yüklemek için terminal penceresinde proje dizininde "yarn add axios" komutunu çalıştırmanız yeterli olacaktır. Bu komut, Axios kütüphanesini proje dizininize yükleyecektir.

Axios kütüphanesinin doğru şekilde yüklenip yüklenmediğini kontrol etmek için, "yarn list" komutunu kullanabilirsiniz. Bu komut, yüklü paketleri listelemenize olanak tanır. Axios paketinin listeye dahil edildiğinden emin olabilirsiniz.

Axios kütüphanesini yükledikten sonra, projenizdeki JavaScript kodunda Axios'u kullanmaya başlayabilirsiniz. Bunun için öncelikle Axios'u projenizin dosyalarına dahil etmeniz gerekiyor. Axios'u projenize dahil etmek için, JavaScript dosyanızın başlangıcına aşağıdaki satırları eklemelisiniz:

import axios from 'axios';

Bu satırlar, Axios kütüphanesini projenize dahil eder ve kullanmanıza olanak tanır. Artık Axios kütüphanesini proje içinde kullanarak HTTP istekleri yapabilirsiniz.

Axios'ta HTTP İstekleri Nasıl Yapılır?

Axios kütüphanesi, React uygulamalarında HTTP istekleri yapmak için en yaygın kullanılan araçlardan biridir. Axios, Node.js veya web tarayıcılarındaki JavaScript koduna kolayca entegre edilebilir ve Promise tabanlı bir yapıya sahiptir.

Axios aynı zamanda GET, POST, PUT, DELETE gibi birçok HTTP metodu ile uyumlu bir biçimde çalışır. GET isteği yapmak için axios.get() metodu, POST isteği yapmak için axios.post() metodu, PUT isteği yapmak için axios.put() metodu ve DELETE isteği yapmak için axios.delete() metodu kullanılır.

Örneğin, GET isteği yapmak için aşağıdaki kod bloğunu kullanabilirsiniz:

axios.get('https://jsonplaceholder.typicode.com/users')  .then(response => {    console.log(response);  })  .catch(error => {    console.log(error);  });

POST isteği yapmak için aşağıdaki kod bloğunu kullanabilirsiniz:

axios.post('https://jsonplaceholder.typicode.com/posts', {    title: 'başlık',    body: 'gövde'  })  .then(response => {    console.log(response);  })  .catch(error => {    console.log(error);  });

Axios ile PUT ve DELETE istekleri yapmak da benzer şekilde gerçekleştirilebilir.

Her bir HTTP isteği, Promise tabanlı bir yapıya sahiptir. Bu, isteklerin doğru şekilde yapıldığından emin olmak için then() ve catch() zincirleri kullanılarak yönetilebilir. Yakalanan hatalar ise Error nesneleri kullanılarak işlenebilir.

Sonuç olarak, Axios kütüphanesi, React uygulamalarında HTTP istekleri yapmak için oldukça kolay ve pratik bir araçtır.

GET İsteği Yapmak

Axios kullanarak React uygulamalarındaki HTTP istekleri, GET isteği de dahil olmak üzere çeşitli istek türleriyle kolayca yapılabilmektedir. GET isteği yapmak için Axios.get() metodu kullanılır. Bu metot, bir URL adresi alır ve bir Promise döndürür. Veri alındığında Promise, resolve() fonksiyonunu döndürür. İşlem sırasında herhangi bir hata oluşursa, reject() fonksiyonunu döndürür.

GET isteği sırasında bazı parametreler kullanmak isterseniz, bunları da Axios.get() metodu içinde belirtebilirsiniz. Örneğin, 'q' parametresi ile arama sorguları oluşturabilirsiniz.

Bu şekilde Axios kullanarak GET isteği yapabilir ve aldığınız verileri kullanabilirsiniz.

Örnek:

Bu örnekte, Axios kütüphanesi kullanılarak 'https://jsonplaceholder.typicode.com/users' adresine GET isteği yapılmaktadır. Bu istek, 'axios.get()' metodu ile tanımlanır ve bir Promise döndürür. Promise, GET isteği sonucunda elde edilen verileri içerir.

Bu örnek ile ilgili bir kod örneği aşağıdaki gibidir:

axios.get('https://jsonplaceholder.typicode.com/users') .then(function (response) {   console.log(response); }) .catch(function (error) {   console.log(error); });

• axios.get(): Bu metot, GET isteği yapmak için kullanılır. Bir URL adresi alır ve bir Promise döndürür.
• then(): Bu fonksiyon, Promise başarıyla çözüldüğünde çalıştırılır ve istek cevabını içeren bir response nesnesi oluşturur.
• catch(): Bu fonksiyon, Promise bir hata ile karşılaştığında çalıştırılır ve hata mesajını içeren bir nesne oluşturur.

Bu örnekle ilgili olarak, 'console.log()' fonksiyonu kullanılarak elde edilen veriler konsola yazdırılabilir. Bu şekilde, elde edilen verilerin doğru şekilde alındığı kontrol edilebilir.

POST İsteği Yapmak

Axios kütüphanesi, HTTP istekleri yapmak için kullanılan oldukça kullanışlı bir Javascript kütüphanesidir. Axios ile POST isteği yapmak oldukça kolay ve basittir. İstek yapmak için, axios.post() metodu kullanılır. Bu metot, bir URL adresi ve gönderilecek verileri alır ve bir Promise döndürür. Örneğin, aşağıdaki kod bloğu, bir başlık ve gövde verisi ile birlikte örnek bir POST isteği yapar.

axios.post('https://jsonplaceholder.typicode.com/posts', {title: 'başlık', body: 'gövde'}).then(response => console.log(response.data)).catch(error => console.log(error.message))

Bu kod, jsonplaceholder.typicode.com adresindeki "posts" kaynağına bir POST isteği yapar ve "başlık" ve "gövde" verilerini gönderir. Ardından, then() metodu zincirleme kullanarak, cevap veriyi konsola yazar.

Bu örnekle birlikte, Axios kütüphanesinin günlük kullanımına dair genel bir fikir edinmiş olduk. Umarız bu bilgi size fayda sağlar!

Örnek:

Aşağıdaki örnekte, Axios kütüphanesi kullanarak POST isteği nasıl yapılacağı gösterilmektedir:

Bu örnek kod parçası, https://jsonplaceholder.typicode.com/posts adresine, gönderilen verilere sahip bir POST isteği gönderir. Başlık ve gövde alanlarına göre yeni bir gönderi oluşturulur. Axios, istekle ilgili olarak Promise tabanlı bir yapıda çalışır ve isteğin sonucuna göre bir Promise nesnesi döndürür.

PUT İsteği Yapmak

Axios ile PUT isteği yapmak için axios.put() metodu kullanılır. Bu metot, bir URL adresi ve güncellenecek verileri alır ve bir Promise döndürür. İlk parametre olarak URL adresi verilirken ikinci parametre olarak güncellenecek verilerin JSON formatında verilmesi gerekiyor.

Burada dikkat edilmesi gereken, PUT isteği yaparken güncellenecek verilerin tamamını vermeniz gerekiyor. Eğer sadece güncellenen verileri gönderirseniz, var olan veriler silinir ve yeni verilerle değiştirilir.

Örneğin, bir blog yazısı üzerinde değişiklik yapmak istediğinizi varsayalım. Önce, yazıya ait ID bilgisini almanız gerekiyor. Ardından, axios.put() metodunu kullanarak güncellenecek verileri göndermeniz gerekiyor.

axios.put('https://jsonplaceholder.typicode.com/posts/1', {  id: 1,  title: 'Lorem Ipsum',  body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',  userId: 1}).then(response => {  console.log(response);}).catch(error => {  console.log(error);});

Bu örnekte, 1 numaralı yazıyı güncellemek için url adresine, güncellenecek verileri de JSON formatında axios.put() metoduna parametre olarak veriyoruz. Promise döndüren bu metodun then() ve catch() metotları kullanılarak başarılı veya başarısız durumlar kontrol edilebilir.

Sonuç olarak, Axios ile React uygulamaları içinde HTTP istekleri yapmak oldukça kolay ve basittir. GET, POST, PUT, DELETE gibi HTTP metotlarını destekleyen Axios, hata yönetimi ve otomatik JSON dönüşümü yapabilmesi ile oldukça güçlü bir kütüphanedir.

Örnek:

Axios kütüphanesi ile bir PUT isteği göndermek oldukça basit bir işlemdir. Axios.put() metodu kullanılarak, belirtilen URL adresine güncellenecek veriler gönderilir. Bir Promise nesnesi döndüren bu metot, veri talebini asenkron olarak gerçekleştirir. Aşağıdaki örnekte, jsonplaceholder.typicode.com/posts/1 adresine başlık ve gövde bilgilerini içeren bir PUT isteği gönderilmiştir:

Yukarıdaki tabloda da görülebileceği gibi, Axios.put() metodu kullanılarak jsonplaceholder.typicode.com/posts/1 adresine güncellemeler yapılmıştır. Burada veriler başlık ve gövde parametreleri olarak gönderilmiştir.

DELETE İsteği Yapmak

Axios ile DELETE isteği yapmak için axios.delete() metodunu kullanabilirsiniz. Bu metod, bir URL adresi alır ve bir Promise döndürür. DELETE metodu, belirtilen URL adresindeki kaydı veya veriyi silmek için kullanılır.

Örneğin, bir blog yazısı silmek istediğinizde axios.delete() metodunu kullanabilirsiniz. Aşağıdaki örnekte, 'https://jsonplaceholder.typicode.com/posts/1' URL adresindeki ilk blog yazısı silinecektir:

axios.delete('https://jsonplaceholder.typicode.com/posts/1')  .then(response => {    console.log(response);  })  .catch(error => {    console.log(error);  });

Bu örnekte, axios.delete() metodu 'https://jsonplaceholder.typicode.com/posts/1' URL adresindeki ilk blog yazısını silecektir. then() metodu, işlem başarılı olduğunda çalışır ve response değişkeni kullanılarak yanıt alınabilir. catch() metodu ise, bir hata oluştuğunda çalışır ve hatayı "error" değişkeni aracılığıyla alabilirsiniz.

Örnek:

Örnek olarak, Axios delete() metodu kullanarak JSON Placeholder sitesindeki bir gönderiyi silme işlemi yapılabilmektedir. Bu işlem için, axios.delete() metodu kullanılır ve silinecek gönderinin URL adresi belirtilir.

Bu istek gönderildiğinde, 1 numaralı gönderi silinecektir. Bu işlem başarılı bir şekilde tamamlandığında, HTTP 200 durum kodu döndürülür ve bir dizi boş obje döndürülür. Örnek kod aşağıdaki gibi olabilir:

axios.delete('https://jsonplaceholder.typicode.com/posts/1').then(response => console.log(response.data)).catch(error => console.log(error.message))

Axios'ta Hata Yakalama

Axios kütüphanesi, HTTP istekleri sırasında oluşabilecek hataları yakalamak için Error nesneleri kullanmaktadır. Bu sayede yazdığınız kodların daha güvenli hale gelmesi sağlanır. Axios ile yapılan HTTP isteklerinde bir hata oluşursa, then() zincirinin yerine catch() zinciri çalışır.

Hata yakalama işlemi oldukça basittir. Axios ile bir HTTP isteği yaparken, then() métodu kullanılarak başarılı bir sonuç durumunda işlemler devam ettirilir. Fakat bir hata durumunda, catch() zinciri çalışır ve hatanın detayları yakalanır.

Örnek olarak, axios.get() metodunu kullanarak bir GET isteği yapalım:

axios.get('https://jsonplaceholder.typicode.com/users').then(response => console.log(response.data)).catch(error => console.log(error.message))

Yukarıdaki örnekte, GET isteği başarılı bir şekilde tamamlandığında then() zinciri çalışır ve response nesnesi üzerindeki verileri konsol ekranında görebiliriz. Fakat bir hata oluştuğunda, catch() zinciri çalışır ve hata mesajını konsol ekranında görebiliriz.

Hata yakalama özelliği, Axios kullanırken oldukça faydalıdır ve hata durumlarını kontrol etmek için kullanıcı dostu bir yöntem sağlar. Bu sayede, yazdığınız kodun daha güvenli ve hatasız olması sağlanır.

Örnek:

Axios kütüphanesi kullanarak, RESTful servislerine GET isteği yapmak oldukça kolaydır. Örnek olarak, "https://jsonplaceholder.typicode.com/users" adresinden kullanıcılar listesini elde edebilirsiniz.

axios.get() metodu parametre olarak URL adresini alır ve bir Promise döndürür. Bu Promise, şu şekilde kullanılabilir:

• then() metodu, istek başarılı olduğunda çalışır ve gelen verilerle birlikte bir response nesnesi döndürür.
• catch() metodu, istek başarısız olduğunda çalışır ve bir error nesnesi döndürür.

Aşağıdaki örnek kod, axios.get() metodu kullanarak "https://jsonplaceholder.typicode.com/users" adresinden kullanıcılar listesini alır:

axios.get('https://jsonplaceholder.typicode.com/users').then(function (response) {  console.log(response.data);}).catch(function (error) {  console.log(error);});

Bu kod, kullanıcılar listesini console'a yazdırır. response.data, gelen verilerin kendisini ifade eder, bu durumda bir JSON objesi.

.then(response => console.log(response.data)) zinciri, Axios ile yapılan HTTP isteklerindeki verilerin işlenmesi için kullanılır. HTTP isteği başarılı bir şekilde gerçekleştiğinde, then() zinciri tetiklenir ve istekteki verileri işleyebilirsiniz. response.data, Axios tarafından döndürülen yanıttaki verileri ifade eder. Bu veriler JSON formatında olabilir, bu nedenle JSON.parse() yöntemi kullanarak verileri JavaScript nesnelerine çevirmeniz gerekebilir. Örneğin, bir GET isteği yaptığımızı ve JSON yanıtı aldığımızı varsayalım:

axios.get('https://jsonplaceholder.typicode.com/users') .then(response => { const users = JSON.parse(response.data); console.log(users); }) .catch(error => console.log(error.message));

Yukarıdaki örnek, JSON yanıtını JavaScript nesnelerine dönüştürür ve konsola yazdırır. Bu, Axios ile yapılan HTTP isteklerindeki verileri işlemek için basit bir yöntemdir. Ayrıca, catch() zinciri, istekte bir hata oluşursa çalışır ve hatayı yakalamanızı sağlar. Axios'un üstün özelliklerinin yanı sıra, hatayı kolayca yakalayabilmesi ve yanıtları işleyebilmesi, Axios'u HTTP istekleri yapmak için mükemmel bir araç haline getirir.

Axios, HTTP istekleri sırasında oluşabilecek hataları yakalamak için Error nesneleri kullanır. Axios ile yapılan HTTP isteklerinde bir hata oluşursa, then() zincirinin yerine catch() zinciri çalışır. Bu durumda, catch() zincirinde tanımlanan fonksiyon, hatanın türüne ve messajına göre uygun bir işleme tabi tutulabilir.

Örneğin, aşağıdaki kod bloğu, bir Axios GET isteği sırasında oluşabilecek bir hatayı yakalayarak hata mesajını konsola yazdırır:

axios.get('https://jsonplaceholder.typicode.com/users')  .then(response => console.log(response.data))  .catch(error => console.log(error.message))

Bu kod bloğunda, catch() fonksiyonu, Promise zincirinin bir önceki halkasından gelen hata nesnesini alır ve hata mesajını konsola yazdırır. Hata nesnesi, hatanın türüne ve mesajına göre farklı özellikler içerebilir. Örneğin, bir ağ hatası durumunda, nesnenin status ve statusText özellikleri kullanılabilir.