Axios ile REST API çağrıları nasıl yapılır

REST API'leri, web servislerinin birbiriyle iletişim kurmasının bir yoludur. Veri almak, göndermek, güncellemek ve silmek için HTTP isteklerini kullanırlar. REST API'leri önemlidir çünkü geliştiricilerin sosyal medya platformları, e-ticaret siteleri ve daha fazlası dahil olmak üzere çeşitli kaynaklardan verilere erişmesini sağlar.

Bu blog yazısında, REST API çağrıları yapmak için Axios'u nasıl kullanacağınızı göstereceğim. Ayrıca, REST API çağrılarınızı test etmenize ve hatalarını ayıklamanıza yardımcı olan bir araç olan Apidog'u da tanıtacağım.

button

Öyleyse, Axios ve Apidog ile harika REST API çağrıları yapmayı öğrenmeye hazır mısınız? Hadi başlayalım!

Neden REST API'leri Web Servislerinin Geleceğidir?

REST API'leri web servisleri ve verilerle etkileşim kurmanın güçlü bir yoludur. Geliştiricilerin sosyal medya platformları, e-ticaret siteleri ve daha fazlası dahil olmak üzere çeşitli kaynaklardan verilere erişmesini ve bu verileri işlemesini sağlar. REST API'leri önemlidir çünkü web servislerinin birbiriyle iletişim kurması için standartlaştırılmış bir yol sağlar.

Axios Nedir?

Axios, hem tarayıcıdan hem de Node.js'den HTTP istekleri yapmanızı sağlayan bir JavaScript kütüphanesidir. Promise tabanlıdır, bu da isteklerinizin sonuçlarını işlemek için async/await veya promise'ları kullanabileceğiniz anlamına gelir.

Axios'un yerel Fetch API'si veya jQuery'nin $.ajax() işlevine göre birçok avantajı vardır. Axios kullanmanın bazı faydaları şunlardır:

Polyfill gerektiren Fetch'in aksine, eski tarayıcıları destekler
Yanıt üzerinde .json() çağırmanızı gerektiren Fetch'in aksine, JSON verilerini otomatik olarak dönüştürür
Zaman aşımı seçeneği olmayan Fetch'in aksine, istekleriniz için bir zaman aşımı ayarlamanıza olanak tanır
Yerleşik XSRF koruması olmayan jQuery'nin aksine, sizi siteler arası istek sahteciliği (XSRF) saldırılarından korur
İlerleme seçeneği olmayan jQuery'nin aksine, isteklerinizin ilerlemesini izlemenize olanak tanır
İptal seçeneği olmayan jQuery'nin aksine, isteklerinizi iptal etmenize olanak tanır
Daha öz ve okunabilir bir sözdizimine sahiptir, jQuery'nin aksine, bu uzun ve karmaşık olabilir

Gördüğünüz gibi, Axios, JavaScript'te HTTP istekleri yapmak için harika bir seçim yapan birçok özelliğe sahiptir. Peki Axios nasıl kullanılır? Hadi öğrenelim!

Axios Nasıl Kurulur

Axios'u kullanmak için önce kurmanız gerekir. Ortamınıza ve tercihlerinize bağlı olarak Axios'u kurmanın birkaç yolu vardır. Axios'u şunları kullanarak kurabilirsiniz:

npm: npm install axios
Yarn: yarn add axios
pnpm: pnpm add axios
Bower: bower install axios
CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios'u kurduktan sonra, JavaScript dosyanıza içe aktarabilir ve kullanmaya başlayabilirsiniz. Örneğin, Node.js kullanıyorsanız, Axios'u şu şekilde içe aktarabilirsiniz:

const axios = require('axios');

Webpack veya Rollup gibi bir modül birleştirici kullanıyorsanız, Axios'u şu şekilde içe aktarabilirsiniz:

import axios from 'axios';

Bir CDN kullanıyorsanız, Axios'a global değişken axios'tan erişebilirsiniz.

REST API'leri, web servisleri ve verilerle etkileşim kurmanın güçlü bir yoludur. Geliştiricilerin sosyal medya platformları, e-ticaret siteleri ve daha fazlası dahil olmak üzere çeşitli kaynaklardan verilere erişmesini ve bu verileri işlemesini sağlar. Axios, REST API'leriyle çalışmayı kolaylaştıran popüler bir JavaScript kütüphanesidir. Bu blog yazısında, REST API çağrıları yapmak için Axios'u nasıl kullanacağımızı inceleyeceğiz.

Axios ile İlk REST API Çağrınızı Yapmak

Bu bölümde, Axios ile ilk REST API çağrınızı nasıl yapacağınızı göstereceğiz. Axios'u nasıl kuracağınızı, basit bir GET isteği nasıl yapacağınızı ve hataları nasıl ele alacağınızı ele alacağız.

Axios'a başlamak için, npm veya yarn kullanarak kurmanız gerekir. Axios'u kurduktan sonra, şu şekilde basit bir GET isteği yapabilirsiniz:

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

Bu kod, https://api.example.com/data adresine bir GET isteği yapar ve yanıt verilerini konsola kaydeder. Bir hata varsa, bunun yerine hatayı konsola kaydeder.

Axios ile Sunucuya Veri Gönderme

Bu bölümde, Axios ile sunucuya nasıl veri göndereceğinizi göstereceğiz. POST isteği nasıl yapacağınızı, istek gövdesinde veri nasıl göndereceğinizi ve başlıkları nasıl ayarlayacağınızı ele alacağız.

Axios ile bir POST isteği yapmak için, axios.post() yöntemini kullanabilirsiniz. İşte bir örnek:

axios.post('https://api.example.com/data', {
  name: 'John Doe',
  email: 'john.doe@example.com'
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Bu kod, https://api.example.com/data adresine, istek gövdesinde { name: 'John Doe', email: 'john.doe@example.com' } verileriyle bir POST isteği gönderir. Bir hata varsa, bunun yerine hatayı konsola kaydeder.

Axios Interceptor'ları ile İstekleri ve Yanıtları Değiştirme

Bu bölümde, istekleri ve yanıtları değiştirmek için Axios interceptor'larını nasıl kullanacağınızı göstereceğiz. Axios örneğinize nasıl interceptor ekleyeceğinizi, istekleri ve yanıtları nasıl değiştireceğinizi ve hataları nasıl ele alacağınızı ele alacağız.

Axios interceptor'ları, then() veya catch() yöntemleri tarafından işlenmeden önce istekleri veya yanıtları yakalamanıza olanak tanır. Bu, kimlik doğrulama başlıkları eklemek, istekleri veya yanıtları değiştirmek veya hataları ele almak için yararlı olabilir.

İşte Axios örneğinize bir interceptor eklemeye bir örnek:

const axiosInstance = axios.create();

axiosInstance.interceptors.request.use(config => {
  // Add authentication headers here
  return config;
});

axiosInstance.interceptors.response.use(response => {
  // Modify response data here
  return response;
}, error => {
  // Handle errors here
  return Promise.reject(error);
});

Bu kod, yeni bir Axios örneği oluşturur ve istek ve yanıt boru hatlarına bir interceptor ekler. İstek interceptoru, isteğe kimlik doğrulama başlıkları ekler ve yanıt interceptoru, yanıt verilerini değiştirir. Bir hata varsa, Promise'ı hatayla reddeder.

Axios ile REST API Çağrılarında Hatalarla Başa Çıkma

Axios, hataları işlemek için basit ve sezgisel bir API sağlar. Ağ hatalarını, HTTP hatalarını ve özel hataları işlemek için catch() yöntemini kullanabilirsiniz.

İşte bir örnek:

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (error.response) {
      // The request was made and the server responded with a status code
      // that falls out of the range of 2xx
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // The request was made but no response was received
      console.log(error.request);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });

Bu kod, https://api.example.com/data adresine bir GET isteği yapar ve yanıt verilerini konsola kaydeder. Bir hata varsa, bunun yerine hatayı konsola kaydeder. catch() yöntemi hatayı işler ve hata türüne göre uygun mesajı kaydeder.

Axios ile REST API Çağrılarını Optimize Etmek İçin En İyi Uygulamalar

Axios, REST API'leriyle çalışmayı kolaylaştıran popüler bir JavaScript kütüphanesidir. HTTP istekleri yapmak için basit ve sezgisel bir API sağlar ve istek ve yanıt interceptor'ları, otomatik dönüşümler ve daha fazlası gibi özellikleri destekler. İşte Axios ile REST API çağrılarınızı optimize etmek için bazı ipuçları:

Interceptor'ları Dikkatli Kullanın: Axios interceptor'ları güçlü olsa da, kodu aşırı karmaşık hale getirmekten kaçınmak için bunları az kullanın. Interceptor'lar, kimlik doğrulama başlıkları eklemek, istekleri veya yanıtları değiştirmek veya hataları ele almak için kullanılabilir. Ancak, çok fazla interceptor kullanmak kodunuzun okunmasını ve bakımını zorlaştırabilir.
Global Hata İşleme: Axios istekleri için global bir hata işleme mekanizması uygulayın. Bu, hataları erken yakalamanıza ve kullanıcılarınız için tutarlı bir hata işleme deneyimi sağlamanıza yardımcı olabilir. Global bir hata işleyici eklemek için axios.interceptors.response özelliğini kullanabilirsiniz.
Modüler Yapılandırmalar: Uygulamanız farklı yapılandırmalara sahip birden fazla API ile etkileşim kuruyorsa, kodunuzu düzenli tutmak için kendi ayarlarıyla ayrı Axios örnekleri oluşturun. Bu, farklı API yapılandırmaları arasındaki çakışmaları önlemenize ve kodunuzun okunmasını ve bakımını kolaylaştırmanıza yardımcı olabilir.
İptal Belirteçleri Kullanın: Bir istek tamamlanmadan önce iptal etmek için iptal belirteçleri kullanılabilir. Bu, kullanıcının bir sayfadan ayrılması veya isteğin tamamlanmasının çok uzun sürmesi durumunda yararlı olabilir. Bir iptal belirteci oluşturmak için axios.CancelToken özelliğini kullanabilirsiniz.
Zaman Aşımı Kullanın: Bir isteğin alabileceği süreyi sınırlamak için zaman aşımı kullanılabilir. Bu, uzun bekleme sürelerinden kaçınmanıza ve kullanıcı deneyimini iyileştirmenize yardımcı olabilir. İstekleriniz için bir zaman aşımı ayarlamak için timeout özelliğini kullanabilirsiniz.
Verilerinizi Optimize Edin: İsteklerinizde veri gönderirken, gönderilen veri miktarını azaltmak için optimize edin. Bu, sunucunuzdaki yükü azaltmanıza ve uygulamanızın performansını iyileştirmenize yardımcı olabilir. İstekleriniz için optimize edilmiş veri yapıları oluşturmak için Apidog gibi araçları kullanabilirsiniz.
SEO Dostu URL'ler Kullanın: REST API'nizi tasarlarken, arama motorlarının içeriğinizi taramasını ve dizine eklemesini kolaylaştırmak için SEO dostu URL'ler kullanın. Bu, arama motoru sıralamalarınızı iyileştirmenize ve sitenize daha fazla trafik çekmenize yardımcı olabilir.
Önbelleğe Alma Kullanın: Sık erişilen verileri bellekte veya diskte depolamak için önbelleğe alma kullanılabilir. Bu, sunucunuzdaki yükü azaltmanıza ve uygulamanızın performansını iyileştirmenize yardımcı olabilir. Uygulamanızda önbelleğe almayı uygulamak için Redis veya Memcached gibi araçları kullanabilirsiniz.
Sıkıştırma Kullanın: İsteklerinizin ve yanıtlarınızın boyutunu azaltmak için sıkıştırma kullanılabilir. Bu, sunucunuzdaki yükü azaltmanıza ve uygulamanızın performansını iyileştirmenize yardımcı olabilir. Uygulamanızda sıkıştırmayı uygulamak için Gzip veya Brotli gibi araçları kullanabilirsiniz.
Yük Dengeleme Kullanın: Yükü birden fazla sunucuya dağıtmak için yük dengeleme kullanılabilir. Bu, uygulamanızın performansını ve güvenilirliğini iyileştirmenize yardımcı olabilir. Uygulamanızda yük dengelemeyi uygulamak için NGINX veya HAProxy gibi araçları kullanabilirsiniz.

Bu en iyi uygulamaları izleyerek, Axios ile REST API çağrılarınızı optimize edebilir ve uygulamanızın performansını ve güvenilirliğini iyileştirebilirsiniz. Kodunuzu her zaman iyice test etmeyi ve uygulamanızın sorunsuz çalıştığından emin olmak için performansını izlemeyi unutmayın.

REST API Çağrılarınızı Test Etmek ve Hatalarını Ayıklamak İçin Apidog'u Kullanın

Apidog, API tasarımı, dokümantasyonu, sahtekarlığı, otomatik test ve daha fazlası için çeşitli araçlar sağlayan, hepsi bir arada bir işbirliğine dayalı API geliştirme platformudur. Apidog ile REST API geliştirme iş akışınızı kolaylaştırabilir ve API'lerinizin güvenilir ve performanslı olmasını sağlayabilirsiniz. Apidog'a başlamak için ücretsiz kaydolabilir ve Mac veya Linux için uygulamayı indirebilirsiniz.

button

Apidog ile bir API çağrısı yapmak için, yeni bir istek oluşturun ve tam istek adresini ve istek parametrelerini girin.

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.

REST API çağrılarınızı test etmek ve hatalarını ayıklamak için Apidog'u kullanarak, geliştirme iş akışınızı kolaylaştırabilir ve API'lerinizin güvenilir ve performanslı olmasını sağlayabilirsiniz. Kodunuzu her zaman iyice test etmeyi ve uygulamanızın sorunsuz çalıştığından emin olmak için performansını izlemeyi unutmayın.

Sonuç

Bu yazıda, sunuculardan veri almak için popüler bir JavaScript kütüphanesi olan Axios ile REST API çağrıları yapmayı öğrendik.

Axios, çeşitli kaynaklardan gelen verilere dayanan modern web uygulamaları oluşturmak için güçlü ve kullanımı kolay bir araçtır, REST API çağrıları yapmak için harika bir seçimdir çünkü kullanımı kolaydır ve çok fazla esneklik sağlar. Bu yazıda yer alan örnekleri ve ipuçlarını izleyerek, kendi projelerinizde Axios'u kullanmaya başlayabilir ve avantajlarından yararlanabilirsiniz. İyi kodlamalar!

button