Axios, bir web uygulamasından HTTP istekleri yapma sürecini basitleştiren popüler bir JavaScript kütüphanesidir. API'lerden veri gönderip almak için kullanımı kolay bir arayüz sağlar ve dünya çapındaki geliştiriciler tarafından yaygın olarak kullanılır.
Bu blog yazısında, HTTP istekleri yapmak için popüler bir JavaScript kütüphanesi olan Axios ile HTTP isteklerinin nasıl yapılacağını tartışacağız ve kullanımını göstermek için kod örnekleri sunacağız, ardından Apidog kullanarak kodunuzu oluşturmak için bazı ipuçları ve püf noktaları sağlayacağız.
Apidog, API oluşturma ve test etme sürecini basitleştirecek, geliştirmeniz daha verimli olacak, bu nedenle Apidog'u tamamen ücretsiz kullanmak için aşağıdaki indirme düğmesine tıklayın.
İster deneyimli bir geliştirici olun, ister web geliştirmeye yeni başlamış olun, bu yazı size Axios'u etkili ve verimli bir şekilde kullanmanız için gereken bilgileri sağlayacaktır. O halde, başlayalım!
Axios Nedir?
Axios, JavaScript kodunuzdan HTTP istekleri yapmanızı sağlayan bir JavaScript kütüphanesidir. HTTP istekleri yapmak için kullanımı kolay bir arayüz sağlayan, promise tabanlı bir kütüphanedir. Axios, JavaScript topluluğunda yaygın olarak kullanılır ve basitliği ve esnekliği ile bilinir. Axios, tarayıcılar tarafından sağlanan XMLHttpRequest arayüzüne dayalı bir istemci HTTP API'sidir.
Neden Axios Kullanmalısınız?
Axios, diğer HTTP kütüphanelerine göre çeşitli avantajlar sağlar. İşte Axios kullanmanız için bazı nedenler:
- Promise tabanlı: Axios, promise tabanlıdır, bu da eşzamansız işlemleri yönetmeyi kolaylaştırır. Bu, kodunuzu daha okunabilir ve bakımı daha kolay hale getirmek için
async/awaitsözdizimini kullanabileceğiniz anlamına gelir. - Basit ve sezgisel arayüz: Axios, HTTP istekleri yapmak için basit ve sezgisel bir arayüz sağlar. GET, POST, PUT ve DELETE isteklerini sırasıyla yapmak için
axios.get(),axios.post(),axios.put()veaxios.delete()yöntemlerini kullanabilirsiniz. - Otomatik JSON veri dönüşümü: Axios, JSON verilerini sizin için otomatik olarak dönüştürür, bu da JSON verileri döndüren API'lerle çalışmayı kolaylaştırır.
- Eski tarayıcılar için destek: Axios, eski tarayıcılarla çalışmayı kolaylaştıran çeşitli özellikler sağlar. Örneğin, eski tarayıcıların HTTP istekleri yapmak için kullandığı XMLHttpRequest için destek sağlar.
- İyi varsayılanlar: Axios, JSON verileriyle çalışmak için iyi varsayılanlara sahiptir. Fetch API gibi alternatiflerin aksine, genellikle başlıklarınızı ayarlamanız veya istek gövdenizi bir JSON dizesine dönüştürmek gibi sıkıcı görevler gerçekleştirmeniz gerekmez.
- Daha iyi hata işleme: Axios, sizin için 400 ve 500 aralığında hatalar atar. Durum kodunu kontrol etmeniz ve hatayı kendiniz atmanız gereken Fetch API'nin aksine.
- Interceptor'lar: Axios,
thenveyacatchtarafından işlenmeden önce istekleri veya yanıtları yakalamanıza olanak tanıyan interceptor'lar sağlar.
Axios'u Yükleme
Axios'u yüklemek için Node.js paket yöneticisini (npm) veya yarn'ı kullanabilirsiniz. İşte npm kullanarak Axios'u nasıl yükleyeceğiniz:
npm install axios
Ve işte yarn kullanarak Axios'u nasıl yükleyeceğiniz:
yarn add axios
Pnpm kullanmayı tercih ediyorsanız, aşağıdaki komutu kullanarak Axios'u yükleyebilirsiniz:
pnpm install axios
Alternatif olarak, projenize Axios'u dahil etmek için bir içerik dağıtım ağı (CDN) kullanabilirsiniz. İşte bir CDN kullanarak Axios'u nasıl dahil edeceğiniz:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Axios'u yükledikten sonra, onunla HTTP istekleri yapmaya başlayabilirsiniz. Axios, HTTP istekleri yapmak için basit ve sezgisel bir arayüz sağlar. GET, POST, PUT ve DELETE isteklerini sırasıyla yapmak için axios.get(), axios.post(), axios.put() ve axios.delete() yöntemlerini kullanabilirsiniz.
Axios ile HTTP İstekleri Yapma
Axios'u yüklediğimize göre, Axios ile HTTP isteklerinin nasıl yapılacağına bir göz atalım. Axios, GET, POST, PUT ve DELETE dahil olmak üzere HTTP istekleri yapmak için çeşitli yöntemler sağlar.
Axios ile GET İsteği Nasıl Yapılır
Axios ile bir HTTP isteği göndermek basittir; sadece bir yapılandırma nesnesini axios fonksiyonuna iletirsiniz. Axios ile bir GET isteği göndermek için axios.get() yöntemini kullanabilirsiniz. İşte nasıl kullanılacağına dair bir örnek:
axios.get('https://your-api-endpoint.com')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Bu örnekte, axios.get(), belirtilen API uç noktasına bir GET isteği göndermek için kullanılır. .then() yöntemi, sunucudan gelen yanıtı işlemek için kullanılırken, .catch() yöntemi, istek sırasında oluşabilecek hataları işlemek için kullanılır.
GET isteğinizle parametreler geçirmeniz gerekiyorsa, bunları URL'ye ekleyerek yapabilirsiniz. Örneğin:
axios.get('https://your-api-endpoint.com?param1=value1¶m2=value2')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Burada, param1 ve param2, geçirilen parametrelerin adlarıdır, value1 ve value2 ise ilgili değerleridir.
Axios ile POST İsteği Gönderme
Axios'u bir POST isteği yapmak için kullandığınızda, belirli bir uç noktaya veri "post" edebilir ve olayları tetikleyebilirsiniz. Axios ile bir POST isteği yapmak için axios.post() yöntemini kullanabilirsiniz. İşte bir örnek:
axios.post('https://api.example.com/data', {
firstName: 'John',
lastName: 'Doe'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
Bu örnekte, https://api.example.com/data adresine bir POST isteği gönderiyoruz. Ayrıca istek ile birlikte bazı veriler de gönderiyoruz. İstek tamamlandığında, yanıt verilerini konsola kaydediyoruz. Bir hata varsa, hatayı konsola kaydediyoruz.
Axios ile PUT İsteği Yapma
Axios ile bir PUT isteği yapmak için axios.put() yöntemini kullanabilirsiniz. İşte nasıl kullanılacağına dair bir örnek:
axios.put('/api/article/123', {
title: 'Making PUT Requests with Axios',
status: 'published'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Bu örnekte, axios.put(), belirtilen API uç noktasına bir PUT isteği göndermek için kullanılır. .then() yöntemi, sunucudan gelen yanıtı işlemek için kullanılırken, .catch() yöntemi, istek sırasında oluşabilecek hataları işlemek için kullanılır.
PUT isteğinizle parametreler geçirmeniz gerekiyorsa, bunları istek gövdesine dahil ederek yapabilirsiniz. Örneğin:
axios.put('/api/article/123', {
title: 'Making PUT Requests with Axios',
status: 'published',
param1: 'value1',
param2: 'value2'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Burada, param1 ve param2, geçirilen parametrelerin adlarıdır, value1 ve value2 ise ilgili değerleridir.
Axios ile DELETE İsteği Nasıl Gönderilir?
Axios ile bir DELETE isteği göndermek için axios.delete() yöntemini kullanabilirsiniz. İşte nasıl kullanılacağına dair bir örnek:
axios.delete('/api/article/123')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Bu örnekte, axios.delete(), belirtilen API uç noktasına bir DELETE isteği göndermek için kullanılır. .then() yöntemi, sunucudan gelen yanıtı işlemek için kullanılırken, .catch() yöntemi, istek sırasında oluşabilecek hataları işlemek için kullanılır.
DELETE isteğinizle parametreler geçirmeniz gerekiyorsa, bunları istek gövdesine dahil ederek yapabilirsiniz. Örneğin:
axios.delete('/api/article/123', {
data: {
param1: 'value1',
param2: 'value2'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Burada, param1 ve param2, geçirilen parametrelerin adlarıdır, value1 ve value2 ise ilgili değerleridir.
Axios'u async ve await ile kullanma
async ve await, eşzamansız kodu eşzamanlı bir stilde yazmanıza olanak tanıyan JavaScript anahtar kelimeleridir. Axios ile async ve await kullanırken, daha temiz ve daha okunabilir kod yazabilirsiniz.
Axios'u async ve await ile kullanmak için axios.get(), axios.put() ve axios.delete() yöntemlerini kullanabilirsiniz. İşte bunları nasıl kullanacaklarınıza dair örnekler:
async function getData() {
try {
const response = await axios.get('https://your-api-endpoint.com');
console.log(response);
} catch (error) {
console.error(error);
}
}
async function putData() {
try {
const response = await axios.put('/api/article/123', {
title: 'Making PUT Requests with Axios',
status: 'published'
});
console.log(response);
} catch (error) {
console.error(error);
}
}
async function deleteData() {
try {
const response = await axios.delete('/api/article/123', {
data: {
param1: 'value1',
param2: 'value2'
}
});
console.log(response);
} catch (error) {
console.error(error);
}
}
Bu örneklerde, axios.get(), axios.put() ve axios.delete(), sırasıyla belirtilen API uç noktalarına GET, PUT ve DELETE istekleri göndermek için kullanılır. try bloğu, sunucudan gelen yanıtı işlemek için kullanılırken, catch bloğu, istek sırasında oluşabilecek hataları işlemek için kullanılır.
GET veya DELETE isteğinizle parametreler geçirmeniz gerekiyorsa, bunları sırasıyla URL'ye ekleyerek veya istek gövdesine dahil ederek yapabilirsiniz. Örneğin:
async function getDataWithParams() {
try {
const response = await axios.get('https://your-api-endpoint.com?param1=value1¶m2=value2');
console.log(response);
} catch (error) {
console.error(error);
}
}
async function deleteDataWithParams() {
try {
const response = await axios.delete('/api/article/123', {
data: {
param1: 'value1',
param2: 'value2'
}
});
console.log(response);
} catch (error) {
console.error(error);
}
}
Async ve await sözdizimini kullandığınızda, kodunuzu bir try-catch bloğu içinde kapsüllemek adettendir. Bu yaklaşım, hataları etkili bir şekilde işlemenizi ve daha iyi bir kullanıcı deneyimi için geri bildirim sunmanızı garanti eder.
Apidog: Axios kodunuzu oluşturmak için ücretsiz bir araç
Apidog, API'leri tasarlamak, hata ayıklamak, test etmek, yayınlamak ve taklit etmek için kapsamlı bir araç takımı sağlayan hepsi bir arada işbirliğine dayalı bir API geliştirme platformudur. Apidog, HTTP istekleri yapmak için otomatik olarak Axios kodu oluşturmanızı sağlar.
İşte Apidog'u Axios kodu oluşturmak için kullanma süreci:
Adım 1: Apidog'u açın ve yeni istek seçin
Adım 2: Bir istek göndermek istediğiniz API uç noktasının URL'sini girin, isteğe dahil etmek istediğiniz başlıkları veya sorgu dizesi parametrelerini girin, ardından Apidog'un tasarım arayüzüne geçmek için "Tasarım"a tıklayın.
Adım 3: Kodunuzu oluşturmak için "İstemci kodu oluştur"u seçin.
Adım 4: Oluşturulan Axios kodunu kopyalayın ve projenize yapıştırın.
HTTP İstekleri Göndermek için Apidog'u Kullanma
Apidog, HTTP isteklerini test etme yeteneğini daha da geliştiren çeşitli gelişmiş özellikler sunar. Bu özellikler, isteklerinizi özelleştirmenize ve daha karmaşık senaryoları zahmetsizce işlemenize olanak tanır.
Adım 1: Apidog'u açın ve yeni bir istek oluşturun.
Adım 2: Yapmak istediğiniz POST isteği için API ayrıntılarını bulun veya manuel olarak girin.
Adım 3: Gerekli parametreleri ve istek gövdesine dahil etmek istediğiniz verileri doldurun.
Sonuç
Axios, geliştiriciler tarafından haklı bir nedenle çok beğeniliyor. Bu makalede, HTTP istekleri yapmak için Axios'u nasıl kullanacağınızı ele aldık. Axios'un ne olduğu, neden kullanmanız gerektiği ve nasıl kurulacağı dahil olmak üzere Axios'un temellerini ele aldık.
Axios ile HTTP isteklerinin nasıl yapılacağını anlayarak, web uygulamalarınızı geliştirebilirsiniz. Axios ve Apidog gibi araçların yardımıyla, HTPP istekleri yapma sürecini kolaylaştırabilir ve sağlam ve verimli uygulamalar oluşturmaya odaklanabilirsiniz.
Apidog'u kullanmak yalnızca size değerli zaman ve çaba kazandırmakla kalmaz, aynı zamanda kodunuzun doğru ve hatasız olmasını sağlar. Kullanıcı dostu arayüzü ve sezgisel özellikleriyle Apidog, Axios istekleriyle çalışan herhangi bir geliştirici için olmazsa olmaz bir araçtır.
