Tutorial Fetch API JavaScript untuk Pemula
Apa itu Frontend?
Frontend adalah bagian website yang dilihat user. Tugasnya menampilkan data dari database ke browser.
📡 Sumber API
Kita akan menggunakan API gratis dari:
text
https://jsonplaceholder.typicode.com/users
API ini menyediakan data dummy 10 pengguna.
Buat File HTML
html
<!DOCTYPE html>
<html>
<head>
<title>Fetch API Tutorial</title>
</head>
<body>
<h1>Data Pengguna</h1>
<div id="container"></div>
<script src="script.js"></script>
</body>
</html>
Buat File JavaScript (script.js)
Cara 1: Simple dengan .then()
javascript
// 1. Cari tempat untuk menampilkan data
const container = document.getElementById("container");
// 2. Ambil data dari API
fetch("https://jsonplaceholder.typicode.com/users")
// 3. Ubah ke format JSON
.then(response => response.json())
// 4. Tampilkan data
.then(data => {
data.forEach(user => {
container.innerHTML += `
<div>
<h3>${user.name}</h3>
<p>Email: ${user.email}</p>
<p>Telp: ${user.phone}</p>
<hr>
</div>
`;
});
})
// 5. Tangani error
.catch(error => {
container.innerHTML = "Error: Gagal ambil data";
console.log(error);
});
Cara 2: Dengan async/await
javascript
const container = document.getElementById("container");
async function getData() {
try {
// Ambil data
const response = await fetch("https://jsonplaceholder.typicode.com/users");
const users = await response.json();
// Kosongkan container
container.innerHTML = "";
// Tampilkan data
users.forEach(user => {
const div = document.createElement("div");
div.innerHTML = `
<h3>${user.name}</h3>
<p>${user.email}</p>
<p>${user.phone}</p>
<hr>
`;
container.appendChild(div);
});
} catch (error) {
container.innerHTML = "Error mengambil data";
console.log(error);
}
}
// Jalankan fungsi
getData();
Penjelasan Singkat:
fetch() → ambil data dari URL
.json() → ubah data ke format JavaScript
.then() → lakukan sesuatu setelah data siap
.catch() → tangani jika ada error
forEach() → loop data array
innerHTML → isi data ke HTML
Selesai! Data dari API akan tampil di browser.