Axios: Interceptor dan URL Dasar
Buat instance Axios dengan baseURL, lampirkan token autentikasi dalam interceptor permintaan, dan tangani error 4xx/5xx dalam interceptor respons.
Axios: Interceptor dan URL Dasar adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Mengapa Menggunakan Axios?
Axios adalah klien HTTP populer yang dibangun di atas XMLHttpRequest. Axios menambahkan: JSON otomatis, pencegat permintaan/respons, konfigurasi baseURL, batas waktu, dan token pembatalan permintaan. Banyak tim masih lebih memilihnya daripada fetch.
Memasang Axios
Pasang melalui npm. Bundel peramban berukuran sekitar 14 KB setelah dikompresi dengan gzip.
npm install axiosGET dan POST Dasar
Axios secara otomatis mengubah isi JSON menjadi string dan menguraikan respons JSON — tidak perlu memanggil JSON.stringify atau .json() secara manual.
import axios from 'axios';
const { data } = await axios.get('/api/users');
console.log(data); // already parsed
const res = await axios.post('/api/users', { name: 'Alice' });
console.log(res.data, res.status);Membuat Instans Axios
Buat instans yang telah dikonfigurasi untuk API Anda agar tidak perlu mengulangi URL dasar, header, dan batas waktu pada setiap pemanggilan.
import axios from 'axios';
export const api = axios.create({
baseURL: import.meta.env.VITE_API_URL,
timeout: 10000,
headers: { 'Content-Type': 'application/json' }
});
// Use it:
const { data } = await api.get('/users');
const res = await api.post('/users', { name: 'Alice' });Pencegat Permintaan: Token Autentikasi
Sisipkan token autentikasi pada setiap permintaan tanpa menulis ulang kode yang sama.
api.interceptors.request.use((config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});Pencegat Respons: Galat Global
Pusatkan penanganan galat untuk semua respons: alihkan saat 401, tampilkan notifikasi singkat saat 5xx, dan sebagainya.
api.interceptors.response.use(
(response) => response,
(error) => {
if (error.response?.status === 401) {
window.location.href = '/login';
}
if (error.response?.status >= 500) {
toast.error('Server error. Please try again.');
}
return Promise.reject(error);
}
);Penyegaran Token saat 401
Gunakan pencegat respons untuk mendeteksi 401, menyegarkan token, dan mencoba kembali permintaan asli secara transparan.
api.interceptors.response.use(null, async (error) => {
const originalRequest = error.config;
if (error.response?.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
const newToken = await refreshToken();
localStorage.setItem('token', newToken);
originalRequest.headers.Authorization = `Bearer ${newToken}`;
return api(originalRequest); // retry
}
return Promise.reject(error);
});Parameter URL dan Kueri
Axios menerima objek params—objek tersebut otomatis diubah menjadi string kueri.
const { data } = await api.get('/search', {
params: { q: 'react hooks', page: 2 }
});
// GET /search?q=react+hooks&page=2Batas Waktu
Tetapkan batas waktu permintaan agar proses tidak menggantung saat server lambat.
api.get('/slow-endpoint', { timeout: 5000 })
.catch(err => {
if (err.code === 'ECONNABORTED') {
console.log('Request took too long');
}
});Membatalkan Permintaan
Gunakan AbortController (Axios modern) atau CancelToken (API lama).
const controller = new AbortController();
api.get('/big-data', { signal: controller.signal })
.catch(err => {
if (axios.isCancel(err)) console.log('cancelled');
});
controller.abort();Struktur Objek Kesalahan
Kesalahan Axios memiliki error.response (server membalas dengan status kesalahan), error.request (tidak ada respons yang diterima), atau tidak memiliki keduanya (penyiapan permintaan gagal).
Axios vs Fetch — Kapan Memilihnya
Axios: API lebih rapi, pencegat bawaan, dan penanganan kesalahan lebih sederhana. Fetch: bawaan platform, bundel lebih kecil, serta dukungan streaming modern. Proyek baru sering memilih fetch + pembungkus tipis; proyek Axios yang sudah ada jarang bermigrasi.
Pemeriksaan Singkat
Fitur Axios apa yang memungkinkan Anda menambahkan header Authorization ke setiap permintaan tanpa mengubah setiap pemanggilan secara terpisah?
Rangkuman: Axios
Gunakan axios.create() untuk instans yang dikonfigurasi dengan baseURL dan batas waktu. Respons JSON diuraikan otomatis (res.data). Pencegat permintaan melampirkan token; pencegat respons menangani kesalahan dan menyegarkan token. Gunakan objek params untuk string kueri. Gunakan AbortController untuk pembatalan. Pilih Axios untuk kerapian; pilih fetch + pembungkus untuk bundel yang lebih kecil.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Axios: Interceptor dan URL Dasar” gratis?
Ya — teks lengkap “Axios: Interceptor dan URL Dasar” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Axios: Interceptor dan URL Dasar”?
Buat instance Axios dengan baseURL, lampirkan token autentikasi dalam interceptor permintaan, dan tangani error 4xx/5xx dalam interceptor respons. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Axios: Interceptor dan URL Dasar” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Fetch API: GET, POST, PUT, DELETE
- Axios: Interceptor dan URL Dasar
- Penanganan Error: Kode Status HTTP
- SWR dan React Query untuk Penyimpanan Tembolok Data