Axios: apa itu, permintaan HTTP dan dasar-dasar bekerja dengan API

Apa itu Axios?

Axios adalah perpustakaan JavaScript untuk melakukan permintaan HTTP dari browser dan lingkungan Node.js. Ini dibangun di atas XMLHttpRequest di browser dan modul http di Node.js, menyediakan API terpadu untuk kedua platform.

Keuntungan utama Axios dibandingkan fetch asli adalah pemrosesan JSON otomatis, dukungan interceptor, dan penanganan kesalahan yang lebih nyaman. Tidak seperti fetch, Axios tidak memerlukan dua panggilan .then untuk mendapatkan badan JSON respons dan secara otomatis melempar pengecualian pada kesalahan HTTP (4xx, 5xx).

Perpustakaan ini mendukung semua metode HTTP utama: GET, POST, PUT, DELETE, PATCH dan HEAD. Dapat digunakan baik dalam proyek sederhana maupun dalam aplikasi perusahaan besar dengan ratusan ribu permintaan setiap hari.

Karakteristik utama Axios

• Promise API — semua operasi mengembalikan Promise, menyederhanakan kode asinkron
• Dukungan TypeScript — pengetikan lengkap untuk semua metode dan konfigurasi
• Interceptor — middleware untuk memproses permintaan dan respons
• Transformasi — konversi data otomatis pada input dan output

Arsitektur Axios dan prinsip kerja

Arsitektur Axios didasarkan pada konsep adaptor (adapters). Perpustakaan mengabstraksi lapisan transport: di browser digunakan XMLHttpRequest, di Node.js — modul http atau https. Ini memungkinkan antarmuka terpadu terlepas dari lingkungan eksekusi.

Setiap permintaan melewati rantai interceptor yang dapat memodifikasi konfigurasi permintaan atau respons. Setelah interceptor, permintaan diteruskan ke adaptor yang melakukan panggilan HTTP yang sebenarnya. Respons kemudian melewati interceptor respons sebelum mencapai kode aplikasi.

Siklus hidup permintaan Axios

1. Membuat konfigurasi — metode, URL, header, badan permintaan
2. Interceptor permintaan — memodifikasi konfigurasi, menambahkan token
3. Panggilan HTTP — eksekusi melalui adaptor browser atau Node.js
4. Interceptor respons — transformasi respons, penanganan kesalahan
5. Mengembalikan hasil — Promise diselesaikan dengan data atau ditolak

Fitur utama Axios

Axios mencakup banyak fitur bawaan yang membuatnya menjadi pilihan yang nyaman untuk bekerja dengan HTTP di aplikasi mobile dan web. Mari kita bahas yang paling penting.

Transformasi data otomatis

Saat mengirim permintaan, Axios secara otomatis mengonversi objek JavaScript menjadi string JSON menggunakan JSON.stringify. Saat menerima respons, perpustakaan mengurai JSON kembali menjadi objek. Ini membebaskan pengembang dari serialisasi dan deserialisasi data manual.

Perlindungan CSRF

Di lingkungan browser, Axios secara otomatis menambahkan header XSRF-TOKEN dari cookie, melindungi aplikasi dari pemalsuan permintaan lintas situs. Untuk ini, cukup konfigurasikan server untuk mengirim token dalam cookie bernama XSRF-TOKEN.

Time-out dan pembatalan permintaan

Perpustakaan mendukung pengaturan waktu habis melalui parameter timeout dan pembatalan permintaan melalui AbortController. Ini sangat penting dalam aplikasi mobile dengan koneksi tidak stabil, di mana permintaan yang macet menghabiskan baterai dan lalu lintas.

Instalasi dan konfigurasi Axios

Instalasi Axios dilakukan melalui manajer paket apa pun. Perpustakaan tersedia di registry npm dan dapat dihubungkan baik di Node.js maupun di proyek browser. Untuk TypeScript, tipe sudah termasuk dalam paket utama, tidak diperlukan dependensi tambahan.

Setelah instalasi, Anda dapat membuat instance dengan konfigurasi dasar: URL dasar, time-out default, header umum. Ini memungkinkan Anda untuk tidak mengulangi parameter yang sama di setiap permintaan dan mengelola pengaturan klien HTTP secara terpusat.

# Instalasi melalui npm
npm install axios

# Instalasi melalui yarn
yarn add axios

# Instalasi melalui pnpm
pnpm add axios

Membuat instance dengan konfigurasi

Disarankan untuk membuat instance Axios terpisah untuk setiap layanan API. Ini memungkinkan Anda mengatur URL dasar, header standar, dan time-out yang akan diterapkan ke semua permintaan instance ini tanpa pengulangan di setiap panggilan.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://api.example.com/v1',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
});

Contoh kode dengan Axios

Contoh permintaan menunjukkan pola penggunaan utama Axios. Semua contoh menggunakan sintaks async/await yang membuat kode asinkron lebih mudah dibaca dibandingkan dengan rantai .then().

Permintaan GET dengan parameter

Untuk mengambil data dari server, digunakan metode axios.get. Parameter permintaan dikirim melalui objek params, yang secara otomatis diubah menjadi query-string. Respons berisi data di bidang data, status di status, dan header di headers.

interface User {
  id: number;
  name: string;
  email: string;
}

async function getUsers() {
  try {
    const response = await api.get<User[]>('/users', {
      params: { page: 1, limit: 10 }
    });
    return response.data;
  } catch (error) {
    console.error('Kesalahan memuat pengguna', error);
    throw error;
  }
}

Permintaan POST dengan badan

Untuk mengirim data ke server, digunakan axios.post. Argumen kedua adalah objek dengan data yang secara otomatis di-serialisasi oleh Axios ke JSON. Tipe konten Content-Type secara default diatur ke application/json.

interface CreateUserDto {
  name: string;
  email: string;
  role: string;
}

async function createUser(data: CreateUserDto) {
  const response = await api.post<User>('/users', data);
  return response.data;
}

Interceptor

Interceptor adalah fungsi middleware yang dijalankan untuk setiap permintaan atau respons. Mereka memungkinkan penambahan token otorisasi, pencatatan permintaan, penanganan kesalahan terpusat. Interceptor permintaan menambahkan header Authorization dengan token yang diambil dari penyimpanan.

// Interceptor permintaan — menambahkan token otorisasi
api.interceptors.request.use(
  (config) => {
    const token = getToken();
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => Promise.reject(error)
);

// Interceptor respons — menangani kesalahan 401
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      redirectToLogin();
    }
    return Promise.reject(error);
  }
);

Penanganan kesalahan di Axios

Penanganan kesalahan di Axios didasarkan pada mekanisme pengecualian. Tidak seperti fetch, Axios secara otomatis menangkap kesalahan HTTP (4xx, 5xx) dan meneruskannya ke blok catch. Objek kesalahan berisi informasi tentang respons server, permintaan, dan konteks eksekusi.

Penting untuk membedakan tiga jenis kesalahan: kesalahan respons server (response), kesalahan permintaan (request), dan kesalahan konfigurasi (config). Yang pertama terjadi saat panggilan HTTP berhasil dengan kode kesalahan, yang kedua — saat tidak ada respons dari server, yang ketiga — saat konfigurasi permintaan salah.

import axios, { AxiosError } from 'axios';

async function safeRequest() {
  try {
    return await api.get('/data');
  } catch (error) {
    if (error instanceof AxiosError) {
      if (error.response) {
        console.warn('Kesalahan respons', error.response.status);
      } else if (error.request) {
        console.warn('Tidak ada respons dari server');
      } else {
        console.warn('Kesalahan konfigurasi');
      }
    }
  }
}

Perbandingan Axios dengan Fetch API

Perbandingan Axios dengan Fetch API asli membantu memahami kapan setiap teknologi tepat digunakan. Fetch adalah API bawaan browser yang tidak memerlukan instalasi. Axios adalah perpustakaan pihak ketiga dengan kemampuan tambahan. Untuk permintaan sederhana, fetch sudah cukup, untuk aplikasi kompleks dengan interceptor dan penanganan kesalahan terpusat, Axios lebih nyaman.

Fetch tidak menganggap kesalahan HTTP (4xx, 5xx) sebagai pengecualian — Anda perlu memeriksa response.ok. Fetch memerlukan dua panggilan .then() untuk mendapatkan JSON: response.json() kemudian mengembalikan Promise dengan data. Axios melakukan ini secara otomatis. Fetch tidak mendukung kemajuan unggah file tanpa polyfill tambahan. Axios memiliki onUploadProgress dan onDownloadProgress bawaan.

Di Node.js, Fetch tersedia sejak versi 18 sebagai fungsi eksperimental, sedangkan Axios bekerja secara stabil sejak Node.js 10. Untuk proyek yang mendukung versi Node.js lama, pilihannya jelas menguntungkan Axios. Untuk proyek browser modern tanpa pemrosesan permintaan yang kompleks, fetch mungkin sudah cukup.