Panduan Lengkap: Apa itu Axios JS, bagaimana cara kerjanya, dan mengapa Anda membutuhkannya?

Depan » Pengembangan » Panduan Lengkap: Apa itu Axios JS, bagaimana cara kerjanya, dan mengapa Anda membutuhkannya?

Ekosistem JavaScript penuh dengan alat yang membuat hidup kita lebih mudah saat kita mengembangkan aplikasi web atau server di Node.js. Di antara alat-alat ini, salah satu yang tertua dan paling berguna adalah Axios, pustaka yang sangat populer yang menangani permintaan HTTP di browser dan Node.js, dan tetap menjadi favorit ribuan pengembang di seluruh dunia karena kesederhanaan dan kekuatannya.

Pernahkah Anda berhenti sejenak dan berpikir tentang berapa kali Anda perlu terhubung ke API atau server eksternal, mengirim atau menerima data dalam format berbeda? Untuk semua situasi ini, terdapat beragam solusi, tetapi hanya sedikit yang seteruji, serbaguna, dan mudah digunakan seperti Axios. Dalam artikel ini, kami menjelaskan secara detail apa itu Axios, kegunaannya, cara menginstal dan menggunakannya secara menyeluruh, serta mengapa Axios tetap menjadi pilihan utama untuk menangani permintaan HTTP dalam proyek JavaScript modern.

Apa itu Axios dan UNTUK APA?

Axios adalah pustaka yang ditulis dalam JavaScript yang memungkinkan kita membuat permintaan HTTP dengan mudah, cepat, dan efisien, baik di browser maupun di aplikasi Node.js. Karakteristik utamanya adalah didasarkan pada menjanjikan (Promises), yang membuatnya jauh lebih mudah untuk menulis kode asinkron dan menyusun operasi dengan jelas, menghindari kekacauan klasik dari panggilan balik bersarang atau "callback hell" yang terkenal.

Toko buku ini adalah isomorfisArtinya, kode yang sama yang Anda gunakan di frontend untuk menggunakan API dapat digunakan tanpa perubahan di backend dengan Node.js. Di frontend, kode tersebut menggunakan XMLHttpRequest, dan di backend, kode tersebut memanfaatkan modul http bawaan Node.js, tetapi Anda hanya perlu memanggil satu API saja.

Apa kegunaan Axios? Terutama untuk menggunakan layanan web dan REST API., baik data dipertukarkan dalam format JSON, XML, teks biasa, atau format lainnya. Ideal untuk operasi seperti:

• Buat permintaan GET untuk mengambil informasi dari server atau API
• Kirim data menggunakan POST, PUT atau DELETE
• Memproses respons dan mengubahnya secara otomatis
• Bekerja dengan mudah dengan API RESTful atau titik akhir yang mengembalikan data dalam format apa pun
• Kelola kesalahan dan status HTTP secara terorganisir

Artinya, Segala sesuatu yang Anda harapkan dari klien HTTP modern... tetapi dengan sintaksis yang elegan dan ringkas yang sangat mudah diintegrasikan ke dalam proyek apa pun.

Fitur Utama Axios

Axios bukan hanya tentang kesederhanaan: ia dilengkapi dengan fitur-fitur canggih yang menjadikannya suatu keharusan bagi setiap pengembang web. Berikut ini adalah beberapa aset terbaiknya:

• Berdasarkan janji: Anda dapat merangkai operasi menggunakan then/catch, atau menggunakan async/await agar lebih jelas.
• Transformasi data otomatis: Secara otomatis mengonversi dan memproses JSON atau format respons lainnya, tanpa Anda harus menguraikannya secara manual.
• Intersepsi permintaan dan tanggapan: Anda dapat menambahkan logika Anda sendiri sebelum permintaan dikirim atau saat respons tiba (misalnya, log, penanganan kesalahan umum, menambahkan header khusus, dll.)
• API yang seragam dan sangat mudah diingatLupakan detail internal XMLHttpRequest atau Fetch; dengan Axios, semuanya mudah dan konsisten.
• Pembatalan permintaan:Jika Anda perlu membatalkan permintaan HTTP karena alasan apa pun, Anda dapat melakukannya dengan mudah.
• Perlindungan XSRF: Mendukung langkah-langkah untuk mencegah serangan CSRF di browser.
• Kompatibilitas lintas-peramban:Berfungsi dengan baik bahkan di peramban lama seperti Internet Explorer 11.
• Perpustakaan ringan:Hanya membutuhkan 13 KB saat diperkecil, dan bahkan lebih sedikit lagi jika Anda menyajikan situs dalam bentuk terkompresi.

Kombinasi kesederhanaan dan kekuatan inilah yang telah memikat komunitas JavaScript selama bertahun-tahun.

Keunggulan Axios dibandingkan Fetch dan alternatif lainnya

Anda mungkin bertanya-tanya, “Mengapa saya harus menggunakan Axios jika sudah ada API Fetch asli?” Faktanya adalah Fetch fantastis dan modern, tetapi Axios masih menang di beberapa area utama.

Pertama, Axios memiliki sintaksis yang lebih langsung dan tidak bertele-tele.Jika Fetch mengharuskan Anda melakukan konversi manual (misalnya, .json() untuk mengekstrak data), Axios melakukannya untuk Anda dan memaparkan data dalam properti data respons, sehingga menghemat langkah tambahan.

Selain itu, Axios menangani kesalahan HTTP jauh lebih baikSementara pada Fetch kesalahan hanya terjadi jika terjadi kegagalan jaringan dan tidak jika server mengembalikan kesalahan HTTP (misalnya, 404 atau 500), Axios mendeteksinya dan menyampaikannya kepada Anda dengan mudah.

Pembatalan aplikasi Jauh lebih sederhana di Axios, dan dukungannya terhadap interseptor, batas waktu, header khusus, dan perlindungan XSRF menjadikannya alat produksi yang sempurna bahkan untuk proyek yang menuntut.

Bagaimana cara menginstal Axios?

Menginstal Axios di proyek Anda sangatlah mudah. Ini adalah salah satu paket NPM yang paling banyak diunduh, jadi Anda dapat menginstalnya dengan beberapa cara:

• dengan npm:
  npm install axios
• dengan benang:
  yarn add axios
• Melalui CDN untuk menggunakannya langsung di browser:
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> o <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Setelah terinstal, Anda dapat mengimpornya ke proyek Anda dengan satu baris:
import axios from 'axios'; dalam proyek modern (ESM), atau
const axios = require('axios'); dalam Node.js klasik.

Memulai: Penggunaan Browser Dasar dan Node.js

Cara paling umum untuk menggunakan Axios adalah membuat permintaan GET ke sumber daya atau API apa pun:

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(function(response) {
    console.log(response.data); // Aquí están los datos
  })
  .catch(function(error) {
    console.error('Error al obtener datos:', error);
  });

Sekarang, jika Anda lebih suka sintaksis modern, dengan async/menunggu Anda dapat menuliskannya lebih bersih:

async function obtenerDatos() {
  try {
    const respuesta = await axios.get('https://jsonplaceholder.typicode.com/posts/1');
    console.log(respuesta.data);
  } catch (error) {
    console.error('Error:', error);
  }
}
obtenerDatos();

Axios memudahkan pengelolaan respons dan kesalahan, memungkinkan Anda mendeteksi apakah permintaan tersebut disebabkan oleh kesalahan jaringan, server, atau konfigurasi.

Contoh praktis: permintaan GET, POST, dan penanganan Axios tingkat lanjut

Salah satu keunggulan Axios adalah fleksibilitasnya untuk beradaptasi dengan alur kerja apa pun saat menggunakan API atau layanan HTTP. Berikut beberapa contoh umum:

Buat permintaan GET

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

Contoh ini mengambil sumber daya dari titik akhir dan menampilkannya di konsol.

Kirim data melalui POST

axios.post('https://jsonplaceholder.typicode.com/posts', {
  userId: 1,
  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 al crear el post:', error);
});

Data yang Anda kirim dalam parameter kedua ditransmisikan sebagai badan permintaan. dan responsnya biasanya menyertakan sumber daya yang baru dibuat.

Sesuaikan permintaan (header, parameter, batas waktu…)

axios.get('https://api.ejemplo.com/datos', {
  params: {
    page: 1,
    limit: 10
  },
  headers: {
    'Authorization': 'Bearer TOKEN_SECRETO'
  },
  timeout: 5000 // 5 segundos máximo
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (error.code === 'ECONNABORTED') {
    console.log('Timeout alcanzado');
  } else {
    console.error('Otro error:', error);
  }
});

Aspek permintaan, seperti header, parameter, atau batas waktu, mudah dikonfigurasi dalam satu objek.

Mengintegrasikan Axios ke dalam kerangka kerja modern: React sebagai contoh

Axios banyak digunakan dalam kerangka kerja modern seperti Bereaksi, Pandangan o KakuIntegrasinya sederhana dan sangat nyaman untuk bekerja dengan RESTful API.

Misalnya, dalam React, pola umum adalah membuat permintaan GET saat komponen dipasang, memperbarui status dengan data yang diperoleh:

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

function PostDetalle() {
  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>Detalle de post</h1>
      {post ? (
        <>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </>
      ) : (
        <p>Cargando...</p>
      )}
    </div>
  );
}

Pola ini menyebabkan Axios membuat permintaan saat komponen dipasang, memperbarui status, dan menyajikan data secara otomatis.

Manajemen kesalahan dan respons tingkat lanjut dengan Axios

Dengan Axios Anda dapat memiliki kontrol terperinci atas kesalahan yang terjadi dalam permintaan.Struktur kesalahan memungkinkan Anda membedakan apakah permintaan tersebut merupakan masalah server, jaringan, atau konfigurasi:

axios.get('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => console.log('Datos:', response.data))
  .catch(error => {
    if (error.response) {
      // El servidor respondió con un error HTTP
      console.error('Error del servidor:', error.response.status);
    } else if (error.request) {
      // No se recibió respuesta
      console.error('No se recibió respuesta:', error.request);
    } else {
      // Error al crear la petición
      console.error('Error de configuración:', error.message);
    }
  });

Tingkat detail ini membantu men-debug dan mengelola kesalahan secara profesional.

Fitur tambahan: pencegat, transformasi data, dan pembatalan

Interceptor memungkinkan logika dieksekusi sebelum permintaan dikirim atau sebelum respons tiba. Mereka sangat berguna untuk menambahkan header autentikasi, pencatatan, atau penanganan kesalahan secara terpusat.

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

Selain itu, Axios secara otomatis mengubah data menjadi JSON dan memungkinkan Anda menyesuaikan transformasi tersebut jika Anda menginginkannya.

Akhirnya, Anda dapat membatalkan permintaan dengan metode CancelToken, sangat berguna untuk antarmuka tempat pengguna menavigasi dengan cepat dan Anda ingin mencegah permintaan lama terus diproses dan memengaruhi pengalaman.

Perbandingan Axios vs. Fetch dan klien HTTP lainnya

Ada beberapa alternatif untuk mengelola permintaan HTTP. Fetch API sudah menjadi standar di peramban modern, tetapi Axios tetap memiliki keunggulan di beberapa area, seperti:

• Sintaks dan penanganan kesalahan yang lebih sederhana daripada Fetch
• Kompatibilitas dengan browser lama
• Transformasi respons otomatis
• Pembatalan dan batas waktu yang mudah diterapkan
• Intersepsi permintaan dan respons tingkat lanjut
• Lintas platform (kompatibel dengan browser dan Node.js tanpa mengubah kode)

Karena alasan ini, Axios tetap menjadi pilihan yang solid untuk proyek baru atau yang sudah ada yang memerlukan kontrol, keandalan, dan kemudahan penggunaan dalam menangani permintaan HTTP.

FAQ dan Praktik Terbaik Axios

• Apakah Axios lintas platform? Ya, cara kerjanya sama di peramban seperti di Node.js.
• Apakah perangkat lunak ini menangani data JSON secara otomatis? Ya, perangkat lunak ini mengubah dan menerima data dalam format JSON.
• Apakah Anda bisa menyesuaikan header? Tentu saja, Anda bisa menentukan header khusus untuk setiap permintaan.
• Bisakah permintaan dibatalkan? Ya, dengan CancelToken, Anda dapat membatalkan permintaan kapan saja.
• Bagaimana penanganan kesalahan dilakukan? Anda dapat membedakan antara kesalahan server, jaringan, atau konfigurasi dan meresponsnya dengan tepat.
• Apakah lebih baik menggunakan async/await atau then/catch? Tergantung preferensi Anda, meskipun async/await umumnya menawarkan kode yang lebih bersih untuk permintaan yang kompleks atau berurutan.

Keunggulan Axios menjadikannya salah satu alat paling canggih dan andal untuk bekerja dengan HTTP dalam JavaScript, baik front-end maupun back-end. Kesederhanaan, kekuatan, dan kompatibilitasnya menjadikannya pilihan yang sangat direkomendasikan untuk menggunakan API, menangani beragam respons, dan sangat menyederhanakan pekerjaan sehari-hari Anda sebagai pengembang.