JavaScript Fetch API
Ketika kamu membuka aplikasi web modern (Tokopedia, Shopee, Facebook, Youtube), yang terjadi sebenarnya sederhana:
Browser meminta data → Server mengirim data → JavaScript menampilkan data ke HTML
Tapi di balik itu ada konsep penting yang perlu kamu pahami:
- HTTP Method
- HTTP Status Code
- Fetch API + async/await
- DOM Manipulation
Bayangkan:
- Client (Browser) = Pelanggan
- Server = Dapur restoran
- Request = Pesanan pelanggan
- Response = Makanan yang dikirim
- Fetch API = Pelayan yang membawa pesanan
Alurnya:
- Pelanggan memesan makanan
- Pelayan membawa pesanan ke dapur
- Dapur memasak
- Pelayan membawa makanan kembali
- Pelanggan melihat hasilnya
Dalam web:
Browser → Request → Server
Browser ← Response ← Server1. HTTP Method
HTTP Method = jenis tindakan yang diminta client ke server
GET
Digunakan untuk mengambil data
Contoh:
- Ambil daftar user
- Ambil produk
- Ambil komentar
POST
Digunakan untuk mengirim data baru
Contoh:
- Buat akun
- Tambah produk
- Kirim komentar
PUT / PATCH
Digunakan untuk update data
Contoh:
- Edit profile
- Update produk
- Edit komentar
DELETE
Digunakan untuk menghapus data
Contoh:
- Hapus user
- Hapus produk
- Hapus komentar
2. HTTP Status Code
Server akan menjawab dengan Status Code.
1xx — "Pesanan diterima"
Jarang dipakai frontend
Contoh:
100 Continue2xx — "Berhasil!"
Semua lancar
Yang penting:
200 OK
Berhasil atau success
201 Created
Data berhasil di buat
3xx — "Dialihkan"
Server menyuruh ke tempat lain
Contoh:
301 Moved Permanently
302 Found4xx — Kesalahan dari Client
Client salah pesan
400 Bad Request
Request tidak jelas atau salah
401 Unauthorized
Kamu belum login
403 Forbidden
Kamu tidak memiliki izin untuk request ini
404 Not Found
Data yang kamu minta tidak ada
5xx — Kesalahan dari Server
Internal Server Error
500 Internal Server Error
Kesalahan terjadi di server
503 Service Unavailable
Service sedang di tutup
3. Fetch API + Async/Await
Sekarang kita panggil pelayan = fetch()
Kenapa pakai async/await?
Lebih rapi dibanding .then()
Style Lama (then/catch)
fetch(url)
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.log(err))Sulit dibaca jika banyak langkah.
Style Modern (async/await)
Lebih seperti kode synchronous.
async function ambilData() {
try {
const response = await fetch(url)
const data = await response.json()
console.log(data)
} catch (error) {
console.log(error)
}
}Lebih mudah dipahami.
4. Contoh
Kita akan:
- Fetch data dari API
- Cek status code
- Render ke HTML
- Tampilkan list user
API:
https://jsonplaceholder.typicode.com/usersHTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Fetch API Demo</title>
</head>
<body>
<h1>Daftar User</h1>
<!-- Tempat render data -->
<ul id="userList"></ul>
<!-- Tempat error -->
<p id="error"></p>
<script src="script.js"></script>
</body>
</html>JavaScript
// Ambil element DOM tempat data akan dirender
const userList = document.getElementById("userList")
// Ambil element untuk menampilkan error
const errorText = document.getElementById("error")
// Fungsi async untuk fetch data dari server
async function getUsers() {
try {
// Mengirim request GET ke server
// Ini seperti pelanggan memesan ke pelayan
const response = await fetch(
"https://jsonplaceholder.typicode.com/users"
)
// Cek status code
// Jika response tidak OK (bukan 2xx)
if (!response.ok) {
// Lempar error manual
throw new Error(
"Gagal mengambil data. Status: " + response.status
)
}
// Convert response menjadi JSON
// Ini seperti membuka kotak makanan
const users = await response.json()
// Render ke DOM
renderUsers(users)
} catch (error) {
// Tangkap error network / status code
errorText.textContent = error.message
console.error("Error:", error)
}
}
// Fungsi untuk merender data ke HTML
function renderUsers(users) {
// Kosongkan isi list dulu
userList.innerHTML = ""
// Loop setiap user
users.forEach(user => {
// Buat element li baru
const li = document.createElement("li")
// Gunakan textContent untuk mencegah XSS
// JANGAN gunakan innerHTML sembarangan
li.textContent = `${user.name} - ${user.email}`
// Masukkan li ke dalam ul
userList.appendChild(li)
})
}
// Jalankan function
getUsers()