Axios kütüphanesi, web uygulamalarında HTTP istekleri yapmak ve verileri almak için kullanılan popüler bir JavaScript kütüphanesidir Kurulumu oldukça basit olan bu kütüphane, GET gibi istekler yapmak için axiosget fonksiyonu kullanılabilir Birden fazla istek yapmak isteyenler için eşzamanlı istekler yapmak da mümkündür Axios ile istek yaparken, URL içinde yer alan parametrelerin belirtilmesi gerekmektedir Hata yakalamada catch metodu oldukça kullanışlıdır Axios kütüphanesi, veri getirme işlemlerinde oldukça kullanışlıdır ve Promise tabanlı bir yapıya sahip olduğundan süreçler daha sorunsuz bir şekilde gerçekleştirilebilmektedir Axios kütüphanesini kurmak için ise npm veya yarn kullanabilirsiniz

Axios kütüphanesi, web uygulamalarında HTTP istekleri yapmak ve verileri almak için kullanılan popüler bir JavaScript kütüphanesidir. Bu rehber, Axios kullanarak veri getirme işlemlerinin nasıl yapıldığına dair bir giriş niteliği taşımaktadır.

Axios kütüphanesini kurmak oldukça basittir ve npm veya yarn gibi paket yöneticileri kullanılarak yapılabilir. Kurulum işlemi tamamlandıktan sonra, GET gibi istekler yapmak için axios.get() fonksiyonu kullanılabilir. Bunun yanı sıra, birden fazla istek yapmak isteyenler için eşzamanlı istekler yapmak da mümkündür.

Axios ile istek gönderirken, URL içinde yer alan parametrelerin belirtilmesi gerekmektedir. Ayrıca, istek başlıklarını ayarlamak için .headers() metodu kullanılabilir. Özellikle hata yakalamada .catch() metodu oldukça kullanışlıdır.

Axios kütüphanesi, veri getirme işlemlerinde oldukça kullanışlıdır ve sık kullanılan bir JavaScript kütüphanesidir. Bu rehber, Axios kullanarak veri getirme işlemlerinin nasıl yapıldığını anlatmaktadır. Ancak, tüm özellikleri açıklamak için daha spesifik örnekler yaparak öğrenmek gerekmektedir.

Axios Nedir?

Axios, HTTP istekleri yapmak ve verileri almak için kullanılabilecek en popüler ve etkili JavaScript kütüphanelerinden biridir. Bu kütüphane, modern web uygulamalarında oldukça sık kullanılan RESTful API'ler ile etkileşimde bulunmak için ideal bir seçimdir.

Axios kütüphanesi, hem tarayıcı hem de Node.js tarafında kullanılabilen açık kaynaklı bir JavaScript kütüphanesidir. Bu kütüphane, daha önce XMLHttpRequest ile yapılan işlemlerin yerini alarak, daha verimli ve güvenilir HTTP istekleri yapmanızı sağlar.

Axios, hem GET hem de POST gibi farklı HTTP metotlarını destekler ve uluslararası karakter desteği, isteğe bağlı arka planda hata denetimi, otomatik istek iptali ve daha birçok özelliği içerisinde barındırır.

Bunların yanı sıra, Axios kütüphanesi, Promise tabanlı bir yapıya sahiptir. Bu nedenle, isteklerin eşzamanlı olarak yapılabildiği, hata yakalama ve verileri işleme gibi süreçlerin daha sorunsuz bir şekilde gerçekleştirilebildiği bir deneyim sunar.

Axios Kurulumu

Axios Kurulumu

Axios kütüphanesini kurmak oldukça basittir. Kurulum işlemi için npm veya yarn kullanabilirsiniz. İşlemi gerçekleştirmek için öncelikle terminale

npm install axios 

yarn add axios 

Axios'u kullanmak için İndirdikten sonra, kodunuzun başlangıcında aşağıdaki kodu ekleyerek kullanılmaya başlayabilirsiniz:

import axios from 'axios';

Axios'un kurulumu ile ilgili olarak esas nokta, kullanmak istediğiniz platformda axios'un doğru bir şekilde kurulu olmasıdır. Bu sayede, axios'u rahatça kullanarak kolayca veri çekme işlemleri gerçekleştirebilirsiniz.

Axios kütüphanesini kurmak için npm veya yarn kullanabilirsiniz. Kurulum için terminale `npm install axios` veya `yarn add axios` komutunu yazmanız yeterlidir. Bu işlem sayesinde, Axios ve bağımlılıkları otomatik olarak yüklenecektir. Axios, kurulum işlemi tamamlandıktan sonra hemen kullanıma hazırdır ve HTTP istekleri yapmak için kullanılabilecek en popüler JavaScript kütüphanelerinden biridir. Kurulum işlemi sırasında hata alırsanız, Node.js veya NPM'nin güncellemeleri gerekebilir. Bu durumda, Node.js ve NPM paketlerinin güncel sürümlerini yükleyin ve tekrar deneyin. Ayrıca kurulum işlemi için internet bağlantınızın da stabil olması gerekmektedir. Kurulumun başarılı olup olmadığını kontrol etmek için, kurulum sonrası terminale `axios --version` komutunu girerek versiyon numarasını kontrol edebilirsiniz.

Axios kurulum işlemlerini tamamladıktan sonra, basit bir istek yapmak için kullanabileceğiniz axios.get() fonksiyonunu kullanarak örneklendirebilirsiniz. Bu işlem için, URL adresini fonksiyona parametre olarak vermeniz yeterlidir. Bu sayede, isteğin yapılması ve sonucun alınması işlemleri kolayca gerçekleştirilebilir.

Ayrıca, axios.all() fonksiyonunu kullanarak birden fazla isteği eşzamanlı olarak gönderebilirsiniz. Bu fonksiyon, performans açısından oldukça avantajlıdır ve işlem süresini kısaltır.

Bunun yanı sıra, axios.catch() metodu ile hataların yakalanması da oldukça önemlidir. Bu metot, istek sırasında oluşabilecek hataları yakalayarak işlemi başarısız olmaktan kurtarır.

Axios ile istek yaparken, parametrelerin ve header bilgilerinin kullanımı oldukça yaygındır. URL adresinde parametre kullanmak için ? işareti ilave edilerek parametreler belirtilirken, header bilgileri için .header() metodu kullanılabilir. Bu sayede, istekte kullanılacak olan parametreler ve header bilgileri kolayca belirlenebilir.

yarn paket yöneticisi, paketlerin proje içinde dağıtımını ve yönetimini kolaylaştıran bir araçtır. Axios kütüphanesini proje içine dahil etmek için terminalde aşağıdaki komutu yazmanız yeterlidir:

yarn add axios

Bu komut sayesinde, paket yöneticisi Axios kütüphanesini proje içinde kullanılabilir hale getirecektir.

Bu işlemi gerçekleştirmeden önce, proje dizininizde yarn kurulu olduğunu kontrol etmeniz gerekmektedir. Yarn kurulu değilse, Yarn resmi web sitesinden indirip kurabilirsiniz.

Axios kütüphanesi kullanarak veri çekme işlemleri oldukça basit bir şekilde gerçekleştirilebilir. Axios kütüphanesi kurulumu için öncelikle tercih ettiğiniz paket yöneticisi olan npm veya yarn kullanarak kütüphaneyi kurmanız gerekmektedir. Kütüphaneyi kurduktan sonra, istediğiniz URL adreslerine GET isteği yapmak için axios.get() fonksiyonunu kullanabilirsiniz. Ayrıca, eş zamanlı istekler yapmak için axios.all() fonksiyonunu kullanarak birden fazla isteği eşzamanlı olarak gerçekleştirebilirsiniz. Axios ile istekler yaparken oluşabilecek hataları yakalamak için .catch() metodu kullanabilirsiniz. İsteğinizde parametre kullanmak istediğiniz durumlarda, istek URL'i içinde ? işareti kullanarak parametreleri belirtebilirsiniz. Header bilgileri ayarlamak istediğiniz durumlarda ise .headers() metodu kullanarak isteğinizdeki header bilgilerini ayarlayabilirsiniz. Bu kadar basit! Sadece npm install axios veya yarn add axios komutunu yazmanız yeterlidir.

Basit Bir Axios İsteği Nasıl Yapılır?

Axios kütüphanesi, JavaScript ile HTTP istekleri yapmak ve verileri almak için kullanabileceğimiz oldukça kullanışlı bir kütüphanedir. Eğer bir URL adresinden veri almak istiyorsanız, Axios'un get() fonksiyonunu kullanarak basit bir GET isteği oluşturabilirsiniz.

Örneğin, "https://jsonplaceholder.typicode.com/posts" adresinden JSON verisi almak için aşağıdaki kod kullanılabilir:

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

Bu kod, URL adresine GET isteği yapar ve gelen veri bir response objesi içinde tutulur. then() metodu ile veri okunabilir veya catch() metodu ile oluşabilecek hatalar yakalanabilir.

GET isteği gönderirken, URL adresi değişkenler içerebilir. Örneğin, "https://jsonplaceholder.typicode.com/posts" yerine "https://jsonplaceholder.typicode.com/posts/1" adresinden sadece bir kayıt almak isteyebilirsiniz. Bu durumda URL adresine değişken olarak kayıt ID'si verilmesi gerekmektedir:

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

Bu örnekte, URL adresinde "/1" değişkeni kullanılarak sadece bir kayıt alınacaktır.

Eşzamanlı İstekler Nasıl Yapılır?

Axios ile bir çok farklı isteği eşzamanlı olarak gönderebilirsiniz. Bunun için kullanabileceğiniz axios.all() metodu, birden fazla get isteği oluşturmanızı ve tüm istekleri aynı anda göndermenizi sağlar.

Örneğin, bir web sayfasında farklı bölümler için farklı API'lere istek göndermeniz gerekebilir. Bu durumda, axios.all() kullanarak tüm istekleri aynı anda gönderebilir ve sayfanın yüklenme süresini hızlandırabilirsiniz.

Bir örnek vermek gerekirse;

axios.all([    axios.get('https://api.website.com/posts/1'),    axios.get('https://api.website.com/users/1')  ])  .then(axios.spread((postResponse, userResponse) => {    const postData = postResponse.data;    const userData = userResponse.data;    console.log(postData, userData);  }))  .catch(error => console.log(error));

Bu kod bloğunda, axios.all() metodu ile iki farklı get isteği oluşturulmuş ve .then() metodu ile tüm isteklerin tamamlanması beklenmiştir. Tamamlanması durumunda, bir önceki örnekteki gibi .then() metodu içinde işlemler yapılabilir.

Bu özellik sayesinde, birden fazla veri kaynağına basit bir şekilde ulaşabilir ve uygulamalarınızı daha hızlı hale getirebilirsiniz.

Hata Yakalama Nasıl Yapılır?

Hata yakalama, Axios kullanırken oldukça önemlidir. İstek sırasında bir hata oluştuğunda, bu hatayı kullanıcıya göstermek yerine, hatayı yakalamak ve hata mesajını konsol ekranında görüntülemek daha faydalı olacaktır. Axios ile hata yakalamak için kullanılan metot ise .catch() metodudur.

.catch() metodunu kullanmak için, isteği göndermeden önce .then() metodu kullanılır. .then() metodu, istek başarılı bir şekilde tamamlandığında çalışırken, .catch() metodu istek sırasında bir hatanın meydana gelmesi durumunda çalışır.

Örneğin, aşağıdaki kod örneğinde, bir istek gönderilirken bir hata meydana gelirse, hatanın neden kaynaklandığı konsol ekranında görüntülenir:

axios.get('https://example.com/api/data')  .then(response => {    console.log(response.data);  })  .catch(error => {    console.log(error);  });

404: Not Found

.catch() metodu, hatayı yakalar ve hatayı konsol ekranında görüntüler. Bu sayede, geliştiriciler hata nedenini belirleyip çözüme kavuşturabilirler.

Axios İsteği İçinde Parametre Kullanımı

Axios kütüphanesi ile yapılan isteklerde, belirli parametrelerin istek içinde kullanılması gerekebilir. Bu parametreleri istek URL adresinde belirleyerek axios.get() fonksiyonuna gönderebilirsiniz. Parametrelerin istek içinde kullanımı için sorgu parametreleri kullanılmaktadır. URL adresinde istek yapmak istediğiniz konumun yanına ? işareti koyduktan sonra, parametreleri belirtmelisiniz.?

Örnek olarak, bir API'den "movies" isimli kaynak için filtreleme yapabilirsiniz. İsteği yapmak istediğiniz konumun yanına sorgu parametrelerini yazarak, filtreleme işlemi gerçekleştirebilirsiniz. Örneğin, "movies" kaynağını filtrelemek için istek adresi şu şekilde olacaktır: "api/movies?year=2021&genre=action". Bu istek ile sadece 2021 yılında ve 'action' türünde filmleri alabilirsiniz.

Axios isteklerinde, URL adresi içinde belirli parametreler kullanarak daha spesifik bir istek yapabilirsiniz. Bu parametrelerin kullanımı için, URL adresi içinde ? değeri kullanmanız gerekmektedir. Örneğin, bir API'den sadece belirli bir kullanıcının verilerini almak istiyorsanız, URL adresine ? sonrasında kullanıcının kimlik numarasını belirten bir parametre ekleyerek isteğinizi oluşturabilirsiniz.

Axios ile parametreli istekler yapmak oldukça kolaydır. Sadece axios.get() fonksiyonu içinde istenilen URL adresine ? sonrasında parametreleri belirtmeniz yeterlidir. Axios, otomatik olarak isteği gönderir ve parametreleri doğru şekilde alır.

Parametrelerin yanı sıra, isteğin metodunu da belirleyebilirsiniz. Axios varsayılan olarak GET metodu kullanmaktadır ancak isteği başka bir metot ile göndermek istiyorsanız, post() veya put() gibi diğer fonksiyonları kullanabilirsiniz.

Örneğin, bir post isteği yaparak yeni bir kullanıcı kaydetmek istiyorsanız, axios.post() fonksiyonunu kullanabilirsiniz ve isteğin içeriğini (yani göndermek istediğiniz verileri) belirleyebilirsiniz. Axios, isteğin gönderilmesini sağlayacak kapsamlı bir API'ye sahiptir ve onlarca seçenek sunar.

Axios istekleri yaparken URL adresinde yer alan parametreleri belirlemek oldukça önemlidir. Parametreler, HTTP istekleri sırasında istenilen verilerin filtrelenmesi ve özelleştirilmesi için kullanılabilir. Axios ile bir istek yapmak ve parametreler kullanmak için, istek URL’inde ? işareti kullanılarak parametreler belirtilir. Bu işaretten sonra parametreler arasına & işaretiyle ayrılmaları gerekmektedir. Örneğin, bir blog sitesinden belirli bir kategoriye sahip yazıları getiren bir GET isteği yapmak istediğimizde URL içinde categoryId=5 şeklinde parametreler belirtebiliriz. Parametrelerin belirli bir sırası olmamakla birlikte, hangi parametrelerin kullanılacağına ve hangi sırada yazılacaklarına karar vermek önemlidir. Bu sayede, istekten beklenen sonuçlar elde edilebilir.

Axios İsteği İçinde Header Kullanımı

Axios kütüphanesi ile bir istek gönderirken, header bilgilerini ayarlamak oldukça önemlidir. Axios, HTTP isteklerini yaparken varsayılan olarak belirli header değerlerini kullanır. Ancak talebiniz farklı bir header değerleri gerektiriyorsa .headers() metodu kullanarak talebinizi özelleştirebilirsiniz.

.headers() metodu, bir doğrulama anahtarı, bir kullanıcı kimliği, bir oturum kimliği vb. gibi farklı header değerleri eklemenize olanak tanır. Bu header değerleri, isteğin gerçekleşeceği sunucu tarafında doğrulanacaklardır.

Örneğin, bir talebinizde api anahtarınızı kullanmanız gerekiyorsa, talebinizde bu anahtarın tanımlı olduğundan emin olmalısınız. Bunu yapmak için, .headers() metodu içinde 'Authorization' anahtarını ve api anahtarınızı ayarlayabilirsiniz.

Yukarıdaki örnekte, .headers() metodu tanımlanır ve Authorization anahtarı ile api anahtarınız ayarlanır. Bu, talebinizde belirtilen anahtarlarla birlikte sunucuya gönderilecek ve sunucu tarafında doğrulanacaktır.

Genel olarak, .headers() metodunu kullanarak, talebinizin sunucuya doğru bir şekilde gönderilmesini ve doğru şekilde işlenmesini sağlayabilirsiniz.

Sonuç

Axios kütüphanesi, JavaScript programcıları tarafından en sık kullanılan ve HTTP istekleri ile veri çekme işlemlerinde oldukça pratik bir çözüm sunan bir kütüphanedir. Bu rehber, Axios kullanarak veri çekme işlemlerinin nasıl yapıldığına dair bir giriş niteliği taşıyor. Ancak Axios'un tüm özellikleri, daha spesifik örnekler yaparak daha ayrıntılı bir şekilde anlatılabilir.

Axios ile basit bir GET isteği oluşturmak oldukça kolaydır. Bunun için, axios.get() fonksiyonunu kullanarak istediğiniz web sitesinin URL adresini girerek isteği oluşturabilirsiniz. Ayrıca, eşzamanlı tüm istekleri axios.all() fonksiyonu ile gönderebilir ve oluşabilecek hataları .catch() metodu ile kolaylıkla yakalayabilirsiniz.

Axios kütüphanesi aynı zamanda isteklerde parametre ve header kullanımına da olanak tanır. Parametreli isteklerinizi, istek URL'inin sonuna ? işareti kullanarak yapabilir, header bilgilerini .headers() metodu ile ayarlayabilirsiniz. Tüm bu özellikleri kullanarak, Axios ile yüksek performanslı ve güvenilir bir veri çekme uygulaması oluşturabilirsiniz.

Sonuç olarak, Axios kütüphanesi web sitelerinde veri çekme işlemlerinde oldukça kullanışlı ve güvenilirdir. Daha spesifik örnekler yaparak bu kütüphanenin tüm özelliklerini öğrenebilir ve web uygulamalarınızda en etkili şekilde kullanabilirsiniz.