apa itu axios

 

 

Axios adalah pustaka (library) berbasis JavaScript yang digunakan untuk membuat permintaan HTTP dari aplikasi web atau Node.js. Axios mempermudah pengambilan data dari server atau pengiriman data ke server, biasanya untuk berkomunikasi dengan API.

Fitur Utama Axios

1. Mendukung Semua Metode HTTP:
   Axios mendukung semua metode HTTP, seperti GET, POST, PUT, DELETE, dan lainnya.

2. Berbasis Promise:
   Axios menggunakan Promise untuk menangani hasil permintaan, membuat kode lebih bersih dan mudah dipahami.

3. Dukungan JSON Secara Bawaan:
   Axios secara otomatis mengonversi data JSON saat mengirim atau menerima data dari server.

4. Manajemen Header yang Mudah:
   Anda dapat menyesuaikan headers permintaan dengan mudah, seperti menambahkan token autentikasi.

5. Dukungan untuk Cancel Requests:
   Axios memungkinkan Anda membatalkan permintaan yang sedang berjalan menggunakan Cancel Tokens.

6. Penanganan Kesalahan Otomatis:
   Axios menyediakan mekanisme untuk menangani respons gagal, seperti kode status 404 atau 500.

7. Interceptors:
   Anda dapat menggunakan interceptors untuk memodifikasi permintaan atau respons sebelum ditangani oleh aplikasi Anda.

8. Kompatibel dengan Browser Lama:
   Axios bekerja baik di browser modern maupun beberapa browser lama.

 

Kapan Menggunakan Axios?

• Ketika Anda membutuhkan alat yang kuat untuk menangani API RESTful.
• Ketika Anda ingin pengelolaan permintaan HTTP yang lebih baik dibandingkan menggunakan fetch bawaan browser.

 

 

Contoh Penggunaan Axios

1. Menggunakan Axios untuk Mengambil Data (GET Request)

 import axios from 'axios';

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(response => {
    console.log(response.data); // Menampilkan data dari API
  })
  .catch(error => {
    console.error(error); // Menangani kesalahan
  });

 2. Mengirim Data ke Server (POST Request)

 axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'Belajar Axios',
  body: 'Ini adalah contoh POST request',
  userId: 1
})
  .then(response => {
    console.log(response.data); // Menampilkan respons dari server
  })
  .catch(error => {
    console.error(error); // Menangani kesalahan
  });

3. Menggunakan Interceptors

axios.interceptors.request.use(
  config => {
    console.log('Permintaan dikirim:', config);
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

Kelebihan Axios

• Sintaks yang lebih sederhana dibandingkan fetch.
• Mendukung transformasi data sebelum dikirim ke server.
• Mendukung timeout dan cancelation permintaan.
• Mudah digunakan di browser maupun Node.js.

Kekurangan Axios

• Ukuran pustaka sedikit lebih besar dibandingkan fetch.
• Bisa menjadi berlebihan untuk proyek kecil atau sederhana yang hanya memerlukan satu atau dua permintaan HTTP.

Jika Anda ingin memulai, Axios dapat diinstal melalui npm atau Yarn:

npm install axios

Atau dengan CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Axios sangat berguna dalam proyek yang memerlukan banyak komunikasi dengan API atau server.