Tentu, berikut adalah penjelasan lengkap tentang Axios beserta contoh penggunaannya dalam melakukan fetch data dari API:
### 1. **Apa itu Axios?**
Axios adalah library berbasis JavaScript yang memudahkan untuk melakukan HTTP request ke server, misalnya untuk mendapatkan atau mengirim data. Axios sering digunakan dalam pengembangan Front End untuk mengambil data dari API RESTful.
Beberapa keunggulan utama Axios dibandingkan dengan `fetch` native:
- **Mendukung promosi dengan `.then()`** dan **async/await** untuk sintaks yang lebih bersih.
- **Otomatis mengubah JSON** saat menerima atau mengirim data.
- **Interceptors** yang dapat digunakan untuk menangani request dan response, seperti menyisipkan token autentikasi.
- **Timeout** untuk mengatur batas waktu permintaan.
- **Error handling** yang lebih rinci dan bisa digunakan dalam berbagai skenario.
### 2. **Instalasi**
Sebelum mulai, install Axios terlebih dahulu:
```bash
npm install axios
Jika menggunakan di HTML biasa, bisa langsung mengimpor dari CDN:
```html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
```
### 3. **Penggunaan Dasar Axios**
#### Mengambil Data dari API (GET Request)
Misalnya, kita ingin mengambil daftar pengguna dari API publik `jsonplaceholder`:
```javascript
import axios from 'axios';
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
console.log(response.data); // response.data adalah array dari pengguna
})
.catch(error => {
console.error("Ada masalah dalam mengambil data:", error);
});
Dengan menggunakan **async/await**:
```javascript
async function fetchData() {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
console.log(response.data);
} catch (error) {
console.error("Ada masalah dalam mengambil data:", error);
}
}
fetchData();
#### Mengirim Data ke API (POST Request)
Jika kita ingin mengirim data (misalnya membuat pengguna baru), kita bisa menggunakan **POST**:
```javascript
const newUser = {
name: "John Doe",
username: "johndoe",
email: "john@example.com"
};
axios.post('https://jsonplaceholder.typicode.com/users', newUser)
.then(response => {
console.log("Data berhasil dikirim:", response.data);
})
.catch(error => {
console.error("Ada masalah dalam mengirim data:", error);
});
Dengan **async/await**:
```javascript
async function createUser() {
try {
const response = await axios.post('https://jsonplaceholder.typicode.com/users', newUser);
console.log("Data berhasil dikirim:", response.data);
} catch (error) {
console.error("Ada masalah dalam mengirim data:", error);
}
}
createUser();
### 4. **Axios dengan Headers**
Headers berguna untuk menambahkan informasi tambahan pada request, misalnya token untuk autentikasi:
```javascript
const token = "Bearer your-auth-token";
axios.get('https://jsonplaceholder.typicode.com/users', {
headers: {
Authorization: token
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error("Ada masalah dalam mengambil data:", error);
});
### 5. **Interceptors di Axios**
Interceptors adalah fitur untuk memanipulasi request atau response sebelum sampai di aplikasi kita. Misalnya, untuk menambahkan token secara otomatis pada setiap request:
```javascript
axios.interceptors.request.use(
config => {
config.headers.Authorization = `Bearer your-auth-token`;
return config;
},
error => Promise.reject(error)
);
### 6. **Setting Timeout pada Axios**
Untuk menangani permintaan yang terlalu lama, kita bisa menetapkan **timeout**. Misalnya, jika request membutuhkan waktu lebih dari 5 detik (5000 ms), permintaan akan gagal:
```javascript
axios.get('https://jsonplaceholder.typicode.com/users', { timeout: 5000 })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error("Request timeout atau error lainnya:", error);
});
### 7. **Handling Errors**
Axios memberikan informasi lengkap ketika terjadi error, seperti `error.response`, `error.request`, atau pesan error yang mudah dibaca.
```javascript
async function fetchData() {
try {
const response = await axios.get('https://jsonplaceholder.typicode.com/invalid-url');
console.log(response.data);
} catch (error) {
if (error.response) {
console.log("Data gagal diambil:", error.response.status, error.response.data);
} else if (error.request) {
console.log("Tidak ada respon dari server:", error.request);
} else {
console.log("Error:", error.message);
}
}
}
fetchData();
### 8. **Penggunaan Axios secara Global**
Kita bisa menetapkan base URL secara global, jadi tidak perlu menuliskan URL lengkap setiap kali:
```javascript
axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.get('/users')
.then(response => console.log(response.data))
.catch(error => console.error(error));
Dengan memahami dasar-dasar ini, Anda akan lebih siap untuk melakukan fetch API menggunakan Axios dalam berbagai proyek Front End Anda.