JavaScript’te Axios ile HTTP İstekleri: GET, POST, PUT ve DELETE

JavaScript’te Axios ile HTTP İstekleri: GET, POST, PUT ve DELETE

Merhaba! Ben Fatih Soysal ve bu yazımda size JavaScript’te Axios kütüphanesini kullanarak nasıl GET, POST, PUT ve DELETE HTTP istekleri gönderebileceğinizi adım adım göstereceğim. Axios, JavaScript’te API çağrıları yapmak için popüler ve kullanımı kolay bir kütüphane. Bu yazıda, farklı istek türlerini anlamak ve Axios ile nasıl uygulanacağını öğrenmek için pratik örnekler bulacaksınız. Öncelikle, Axios’u projenize eklemeniz gerekiyor. Bunu npm veya yarn paket yöneticileri ile kolayca yapabilirsiniz:

npm install axios
// veya
yarn add axios

GET İstekleri

GET istekleri, sunucudan veri almak için kullanılır. Axios ile GET isteği göndermek oldukça basittir. Aşağıdaki örnekte, https://jsonplaceholder.typicode.com/todos/1 adresinden veri çekiyoruz:

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => {
    console.log(response.data); // Sunucudan gelen veriyi konsolda görüntüler
  })
  .catch(error => {
    console.error(error); // Hata durumunda hata mesajını görüntüler
  });

Bu kod bloğu, then() metodu ile başarılı bir yanıt aldığımızda veriyi işler, catch() metodu ile ise bir hata oluştuğunda hata mesajını yakalar. Sonuç olarak, sunucudan alınan veriler konsolda gösterilir.

POST İstekleri

POST istekleri, sunucuya yeni veri göndermek için kullanılır. Örneğin, yeni bir kullanıcı kaydı oluşturmak için POST isteği gönderebiliriz. Axios ile POST isteği gönderirken, göndereceğimiz verileri data parametresi ile belirtiriz:

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'foo',
  body: 'bar',
  userId: 1
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Bu örnekte, jsonplaceholder.typicode.com adresine bir POST isteği gönderiyoruz ve yeni bir gönderi oluşturuyoruz. Başarılı bir istek sonucunda, sunucudan gelen yanıt konsolda gösterilir. Hata durumunda ise yine hata mesajı yakalanır.

PUT İstekleri

PUT istekleri, mevcut bir kaynağı güncellemek için kullanılır. Örneğin, mevcut bir kullanıcı bilgilerini güncellemek için PUT isteği gönderebiliriz. POST isteğine benzer şekilde, güncellenecek verileri data parametresi ile belirtiriz:

axios.put('https://jsonplaceholder.typicode.com/posts/1', {
  title: 'foobar',
  body: 'baz',
  userId: 1
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Bu örnekte, id‘si 1 olan gönderiyi güncelliyoruz. Başarılı bir güncelleme sonucunda, sunucudan gelen yanıt konsolda gösterilir. Hatalar yine catch bloğu tarafından yakalanır.

DELETE İstekleri

DELETE istekleri, sunucudaki bir kaynağı silmek için kullanılır. Örneğin, bir kullanıcının hesabını silmek için DELETE isteği gönderebiliriz. Axios ile DELETE isteği göndermek için aşağıdaki gibi bir kod kullanabilirsiniz:

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

Bu örnekte, id‘si 1 olan gönderiyi siliyoruz. Başarılı bir silme işlemi sonucunda, sunucudan gelen yanıt konsolda gösterilir ve hata durumları yine yakalanır.

Umarım bu makale, Axios ile farklı HTTP isteklerini nasıl yapacağınızı anlamanıza yardımcı olmuştur. Daha fazla bilgi için fatihsoysal.com adresini ziyaret edebilir ve Axios dökümanlarına buradan ulaşabilirsiniz. Ayrıca, bu kaynaktan faydalanabilirsiniz.

#Etiketler: Axios, JavaScript, GET, POST, PUT, DELETE, HTTP istekleri, API, programlama, web geliştirme