Pengertian Axios dan Fungsi dalam Pengembangan Web

Axios adalah salah satu alat paling populer dalam pengembangan web modern yang digunakan untuk membuat permintaan HTTP. Dengan fitur-fitur canggih seperti penanganan kesalahan, transformasi data, dan intersepsi permintaan, Axios telah menjadi pilihan utama bagi banyak pengembang. Artikel ini akan menjelaskan secara lengkap apa itu Axios, bagaimana cara kerjanya, serta manfaatnya dalam pengembangan aplikasi web.

Apa Itu Axios?

Axios adalah library JavaScript berbasis promise yang dirancang untuk membuat permintaan HTTP baik di browser maupun di lingkungan Node.js. Keunggulan utamanya adalah kemampuannya untuk bekerja di kedua lingkungan tersebut dengan kode yang sama, sehingga sangat cocok untuk proyek isomorphic atau universal.

Fitur Utama Axios

Berikut adalah beberapa fitur utama dari Axios:
– Berdasarkan Promise: Memudahkan penanganan operasi asinkron.
– Transformasi Data Otomatis: Secara otomatis mengonversi respons JSON ke objek JavaScript.
– Intersepsi Permintaan dan Respons: Memungkinkan modifikasi sebelum permintaan dikirim atau setelah respons diterima.
– Pembatalan Permintaan: Membatalkan permintaan HTTP kapan saja.
– Kompatibilitas Lintas Browser: Berjalan baik di browser modern maupun lama seperti Internet Explorer 11.
– Manajemen Kesalahan yang Baik: Mendeteksi kesalahan jaringan, server, dan konfigurasi secara terperinci.

Mengapa Menggunakan Axios?

Meskipun Fetch API sudah menjadi standar bawaan di browser modern, Axios masih menawarkan beberapa keunggulan:

1. Sintaks yang Lebih Sederhana

Axios menyederhanakan proses pemrosesan respons. Misalnya, Anda tidak perlu memanggil response.json() secara manual karena Axios secara otomatis mengubah respons JSON menjadi objek JavaScript.

2. Penanganan Kesalahan yang Lebih Baik

Axios mendeteksi kesalahan HTTP seperti 404 atau 500, sementara Fetch hanya memberi tahu jika terjadi kesalahan jaringan.

3. Fleksibilitas yang Tinggi

Anda dapat menambahkan header, parameter, atau batas waktu dalam satu objek, memudahkan konfigurasi permintaan.

4. Kompatibilitas dengan Node.js

Axios bisa digunakan di backend (Node.js) tanpa perlu mengubah kode, sedangkan Fetch hanya tersedia di browser.

Cara Menginstal Axios

Menginstal Axios sangat mudah. Berikut beberapa metode instalasi:

• Dengan npm:
  bash
npm install axios

• Dengan yarn:
  bash
yarn add axios

• Melalui CDN:
  “`html
  
  
  

“`

Setelah terinstal, Anda bisa mengimpor Axios ke dalam proyek Anda dengan:

import axios from 'axios'; // untuk ESM
const axios = require('axios'); // untuk Node.js klasik

Contoh Penggunaan Dasar

Berikut contoh penggunaan dasar Axios untuk membuat permintaan GET dan POST:

GET Request

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

POST Request

axios.post('https://jsonplaceholder.typicode.com/posts', {
  title: 'Título del post',
  body: 'Cuerpo del post'
})
  .then(response => console.log('Post creado con ID:', response.data.id))
  .catch(error => console.error('Error:', error));

Integrasi dengan React

Axios sering digunakan dalam framework seperti React. Berikut contoh penggunaan Axios dalam komponen React:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function PostDetail() {
  const [post, setPost] = useState(null);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts/1')
      .then(response => setPost(response.data))
      .catch(error => console.error('Error:', error));
  }, []);

  return (
    <div>
      <h1>Detail Post</h1>
      {post ? (
        <>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

Manajemen Kesalahan dengan Axios

Axios memberikan struktur kesalahan yang detail, memungkinkan Anda membedakan antara kesalahan jaringan, server, atau konfigurasi. Contoh:

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => console.log('Data:', response.data))
  .catch(error => {
    if (error.response) {
      console.error('Error dari server:', error.response.status);
    } else if (error.request) {
      console.error('Tidak ada respons:', error.request);
    } else {
      console.error('Kesalahan konfigurasi:', error.message);
    }
  });

Fitur Tambahan: Interceptor dan Pembatalan

Interceptor

Interceptor memungkinkan logika dieksekusi sebelum permintaan dikirim atau sebelum respons tiba. Contoh:

axios.interceptors.request.use(config => {
  config.headers['Authorization'] = 'Bearer TU_TOKEN';
  return config;
}, error => Promise.reject(error));

Pembatalan Permintaan

Anda dapat membatalkan permintaan kapan saja menggunakan CancelToken:

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://api.example.com/data', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Permintaan dibatalkan', thrown.message);
  } else {
    // handle error
  }
});

// Membatalkan permintaan
source.cancel('Operasi dibatalkan oleh pengguna.');

Kesimpulan

Axios adalah alat yang sangat kuat dan fleksibel untuk membuat permintaan HTTP dalam pengembangan web. Dengan fitur-fitur seperti penanganan kesalahan yang baik, transformasi data otomatis, dan kompatibilitas lintas platform, Axios tetap menjadi pilihan utama bagi pengembang. Meskipun Fetch API sudah menjadi standar bawaan, Axios tetap unggul dalam hal kesederhanaan, keandalan, dan fleksibilitas. Jika Anda mencari alat yang mudah digunakan dan memiliki fitur canggih, maka Axios adalah pilihan yang tepat.

Penulis: Muhammad Rizki