Cara Membuat Permintaan HTTP dengan Axios di Tahun 2025

Axios adalah pustaka JavaScript populer yang menyederhanakan proses pembuatan permintaan HTTP dari aplikasi web. Pustaka ini menyediakan antarmuka yang mudah digunakan untuk mengirim dan menerima data dari API, dan banyak digunakan oleh pengembang di seluruh dunia.

Dalam postingan blog ini, kita akan membahas cara membuat permintaan HTTP dengan Axios, pustaka JavaScript populer untuk membuat permintaan HTTP, dan memberikan contoh kode untuk mendemonstrasikan penggunaannya, kemudian kita akan memberikan beberapa tips dan trik untuk menghasilkan kode Anda menggunakan Apidog.

💡

Apidog akan menyederhanakan proses pembuatan dan pengujian API, pengembangan Anda akan lebih efisien, jadi klik tombol unduh di bawah ini untuk menggunakan Apidog sepenuhnya gratis.

button

Baik Anda seorang pengembang berpengalaman atau baru memulai pengembangan web, postingan ini akan memberi Anda pengetahuan yang Anda butuhkan untuk menggunakan Axios secara efektif dan efisien. Jadi, mari kita mulai!

Apa itu Axios?

Axios adalah pustaka JavaScript yang memungkinkan Anda membuat permintaan HTTP dari kode JavaScript Anda. Ini adalah pustaka berbasis promise yang menyediakan antarmuka yang mudah digunakan untuk membuat permintaan HTTP. Axios banyak digunakan di komunitas JavaScript dan dikenal karena kesederhanaan dan fleksibilitasnya. Axios adalah API HTTP klien berdasarkan antarmuka XMLHttpRequest yang disediakan oleh browser.

Mengapa menggunakan Axios?

Axios memberikan beberapa keuntungan dibandingkan pustaka HTTP lainnya. Berikut adalah beberapa alasan mengapa Anda harus menggunakan Axios:

Berbasis Promise: Axios berbasis promise, yang memudahkan penanganan operasi asinkron. Ini berarti Anda dapat menggunakan sintaks async/await untuk membuat kode Anda lebih mudah dibaca dan dipelihara.
Antarmuka yang sederhana dan intuitif: Axios menyediakan antarmuka yang sederhana dan intuitif untuk membuat permintaan HTTP. Anda dapat menggunakan metode axios.get(), axios.post(), axios.put(), dan axios.delete() untuk membuat permintaan GET, POST, PUT, dan DELETE masing-masing.
Transformasi data JSON otomatis: Axios secara otomatis mengubah data JSON untuk Anda, sehingga memudahkan untuk bekerja dengan API yang mengembalikan data JSON.
Dukungan untuk browser lama: Axios menyediakan beberapa fitur yang memudahkan untuk bekerja dengan browser lama. Misalnya, ia menyediakan dukungan untuk XMLHttpRequest, yang digunakan oleh browser lama untuk membuat permintaan HTTP.
Default yang baik: Axios memiliki default yang baik untuk bekerja dengan data JSON. Tidak seperti alternatif seperti Fetch API, Anda sering tidak perlu mengatur header atau melakukan tugas-tugas membosankan seperti mengonversi badan permintaan Anda menjadi string JSON.
Penanganan kesalahan yang lebih baik: Axios memberikan kesalahan rentang 400 dan 500 untuk Anda. Tidak seperti Fetch API, di mana Anda harus memeriksa kode status dan memberikan kesalahan sendiri.
Interseptor: Axios menyediakan interseptor yang memungkinkan Anda mencegat permintaan atau respons sebelum ditangani oleh then atau catch.

Menginstal Axios

Untuk menginstal Axios, Anda dapat menggunakan pengelola paket Node.js (npm) atau yarn. Berikut cara menginstal Axios menggunakan npm:

npm install axios

Dan berikut cara menginstal Axios menggunakan yarn:

yarn add axios

Jika Anda lebih suka menggunakan pnpm, Anda dapat menginstal Axios menggunakan perintah berikut:

pnpm install axios

Atau, Anda dapat menggunakan jaringan pengiriman konten (CDN) untuk menyertakan Axios dalam proyek Anda. Berikut cara menyertakan Axios menggunakan CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Setelah Anda menginstal Axios, Anda dapat mulai membuat permintaan HTTP dengannya. Axios menyediakan antarmuka yang sederhana dan intuitif untuk membuat permintaan HTTP. Anda dapat menggunakan metode axios.get(), axios.post(), axios.put(), dan axios.delete() untuk membuat permintaan GET, POST, PUT, dan DELETE masing-masing.

Membuat permintaan HTTP dengan Axios

Sekarang kita telah menginstal Axios, mari kita lihat cara membuat permintaan HTTP dengan Axios. Axios menyediakan beberapa metode untuk membuat permintaan HTTP, termasuk GET, POST, PUT, dan DELETE.

Cara membuat permintaan GET dengan Axios

Mengirim permintaan HTTP dengan Axios sangat mudah; Anda cukup meneruskan objek konfigurasi ke fungsi axios. Untuk mengirim permintaan GET dengan Axios, Anda dapat menggunakan metode axios.get(). Berikut adalah contoh cara menggunakannya:

axios.get('https://your-api-endpoint.com')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Dalam contoh ini, axios.get() digunakan untuk mengirim permintaan GET ke endpoint API yang ditentukan. Metode .then() digunakan untuk menangani respons dari server, sedangkan metode .catch() digunakan untuk menangani kesalahan apa pun yang mungkin terjadi selama permintaan.

Jika Anda perlu meneruskan parameter dengan permintaan GET Anda, Anda dapat melakukannya dengan menambahkannya ke URL. Misalnya:

axios.get('https://your-api-endpoint.com?param1=value1&param2=value2')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Di sini, param1 dan param2 adalah nama parameter yang diteruskan, sedangkan value1 dan value2 adalah nilai masing-masing.

Mengirim permintaan POST dengan Axios

Saat Anda menggunakan Axios untuk membuat permintaan POST, Anda dapat "memposting" data ke endpoint tertentu dan memicu peristiwa. Untuk membuat permintaan POST dengan Axios, Anda dapat menggunakan metode axios.post(). Berikut adalah contohnya:

axios.post('https://api.example.com/data', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Dalam contoh ini, kita mengirim permintaan POST ke https://api.example.com/data. Kita juga mengirim beberapa data bersama dengan permintaan. Saat permintaan selesai, kita mencatat data respons ke konsol. Jika ada kesalahan, kita mencatat kesalahan ke konsol.

Membuat permintaan PUT dengan Axios

Untuk membuat permintaan PUT dengan Axios, Anda dapat menggunakan metode axios.put(). Berikut adalah contoh cara menggunakannya:

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);
  });

Dalam contoh ini, axios.put() digunakan untuk mengirim permintaan PUT ke endpoint API yang ditentukan. Metode .then() digunakan untuk menangani respons dari server, sedangkan metode .catch() digunakan untuk menangani kesalahan apa pun yang mungkin terjadi selama permintaan.

Jika Anda perlu meneruskan parameter dengan permintaan PUT Anda, Anda dapat melakukannya dengan menyertakannya dalam badan permintaan. Misalnya:

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);
  });

Di sini, param1 dan param2 adalah nama parameter yang diteruskan, sedangkan value1 dan value2 adalah nilai masing-masing.

Cara mengirim permintaan DELETE dengan Axios?

Untuk mengirim permintaan DELETE dengan Axios, Anda dapat menggunakan metode axios.delete(). Berikut adalah contoh cara menggunakannya:

axios.delete('/api/article/123')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Dalam contoh ini, axios.delete() digunakan untuk mengirim permintaan DELETE ke endpoint API yang ditentukan. Metode .then() digunakan untuk menangani respons dari server, sedangkan metode .catch() digunakan untuk menangani kesalahan apa pun yang mungkin terjadi selama permintaan.

Jika Anda perlu meneruskan parameter dengan permintaan DELETE Anda, Anda dapat melakukannya dengan menyertakannya dalam badan permintaan. Misalnya:

axios.delete('/api/article/123', {
  data: {
    param1: 'value1',
    param2: 'value2'
  }
})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

Di sini, param1 dan param2 adalah nama parameter yang diteruskan, sedangkan value1 dan value2 adalah nilai masing-masing.

Menggunakan Axios dengan async dan await

async dan await adalah kata kunci JavaScript yang memungkinkan Anda menulis kode asinkron dalam gaya sinkron. Saat menggunakan async dan await dengan Axios, Anda dapat menulis kode yang lebih bersih dan lebih mudah dibaca.

Untuk menggunakan Axios dengan async dan await, Anda dapat menggunakan metode axios.get(), axios.put(), dan axios.delete(). Berikut adalah contoh cara menggunakannya:

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);
  }
}

Dalam contoh ini, axios.get(), axios.put(), dan axios.delete() digunakan untuk mengirim permintaan GET, PUT, dan DELETE ke endpoint API yang ditentukan, masing-masing. Blok try digunakan untuk menangani respons dari server, sedangkan blok catch digunakan untuk menangani kesalahan apa pun yang mungkin terjadi selama permintaan.

Jika Anda perlu meneruskan parameter dengan permintaan GET atau DELETE Anda, Anda dapat melakukannya dengan menambahkannya ke URL atau menyertakannya dalam badan permintaan, masing-masing. Misalnya:

async function getDataWithParams() {
  try {
    const response = await axios.get('https://your-api-endpoint.com?param1=value1&param2=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);
  }
}

Saat Anda memanfaatkan sintaks async dan await, adalah kebiasaan untuk menyertakan kode Anda dalam blok try-catch. Pendekatan ini menjamin bahwa Anda menangani kesalahan secara efektif dan menawarkan umpan balik untuk pengalaman pengguna yang lebih baik.

Apidog: alat gratis untuk menghasilkan kode Axios Anda

Apidog adalah platform pengembangan API kolaboratif all-in-one yang menyediakan toolkit komprehensif untuk mendesain, men-debug, menguji, menerbitkan, dan mengejek API. Apidog memungkinkan Anda membuat kode Axios secara otomatis untuk membuat permintaan HTTP.

button

Berikut adalah proses untuk menggunakan Apidog untuk menghasilkan kode Axios:

Langkah 1: Buka Apidog dan pilih permintaan baru

Langkah 2: Masukkan URL endpoint API yang ingin Anda kirimi permintaan,input header atau parameter string kueri apa pun yang ingin Anda sertakan dengan permintaan, lalu klik "Desain" untuk beralih ke antarmuka desain Apidog.

Langkah 3: Pilih "Hasilkan kode klien" untuk menghasilkan kode Anda.

Langkah 4: Salin kode Axios yang dihasilkan dan tempelkan ke proyek Anda.

Menggunakan Apidog untuk Mengirim Permintaan HTTP

Apidog menawarkan beberapa fitur lanjutan yang lebih meningkatkan kemampuannya untuk menguji permintaan HTTP. Fitur-fitur ini memungkinkan Anda menyesuaikan permintaan dan menangani skenario yang lebih kompleks dengan mudah.

button

Langkah 1: Buka Apidog dan buat permintaan baru.

Langkah 2: Temukan atau masukkan secara manual detail API untuk permintaan POST yang ingin Anda buat.

Langkah 3: Isi parameter yang diperlukan dan data apa pun yang ingin Anda sertakan dalam badan permintaan.

Kesimpulan

Axios sangat disukai oleh pengembang karena alasan yang bagus. Dalam artikel ini, kita telah membahas cara memanfaatkan Axios untuk membuat permintaan HTTP. Kita telah membahas dasar-dasar Axios, termasuk apa itu, mengapa Anda harus menggunakannya, dan cara menginstalnya.

Dengan memahami cara membuat permintaan HTTP dengan Axios, Anda dapat meningkatkan aplikasi web Anda. Dengan bantuan Axios dan alat seperti Apidog, Anda dapat menyederhanakan proses pembuatan permintaan HTPP dan fokus pada pembuatan aplikasi yang kuat dan efisien.

Menggunakan Apidog tidak hanya menghemat waktu dan tenaga yang berharga, tetapi juga memastikan bahwa kode Anda akurat dan bebas kesalahan. Dengan antarmuka yang ramah pengguna dan fitur intuitif, Apidog adalah alat yang harus dimiliki oleh setiap pengembang yang bekerja dengan permintaan Axios.

button