Fetch API: Mengambil Data dari Internet
Request HTTP modern dengan fetch: GET, POST, membaca JSON, dan menangani error HTTP.
Berkomunikasi dengan server
Aplikasi modern mengambil data dari server tanpa reload halaman. fetch adalah API bawaan browser untuk itu, dan ia mengembalikan Promise.
GET: mengambil data
async function ambilUser() {
let response = await fetch("https://jsonplaceholder.typicode.com/users/1");
let data = await response.json(); // parse body jadi object
console.log(data.name);
}
ambilUser();Dua await: pertama menunggu response (header), kedua menunggu body selesai dibaca dan di-parse.
POST: mengirim data
async function kirimData() {
let response = await fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
title: "Halo",
body: "Isi postingan",
userId: 1
})
});
let hasil = await response.json();
console.log("Terkirim dengan id: " + hasil.id);
}
kirimData();Header Content-Type memberi tahu server bahwa body berupa JSON. Body harus string, jadi object di-stringify dulu.
Menangani error HTTP
async function aman() {
try {
let response = await fetch("https://contoh.com/data");
if (!response.ok) {
throw new Error("HTTP error: " + response.status);
}
let data = await response.json();
console.log(data);
} catch (error) {
console.log("Gagal: " + error.message);
}
}Contoh nyata: tampilkan daftar
async function tampilkanUser() {
let response = await fetch("https://jsonplaceholder.typicode.com/users");
let users = await response.json();
let ul = document.querySelector("#daftar");
ul.innerHTML = users.map(u => `<li>${u.name} - ${u.email}</li>`).join("");
}Ini pola inti aplikasi web modern: fetch data, lalu render ke DOM.
Catatan teknis: fetch hanya reject pada kegagalan jaringan (offline, DNS gagal). Error HTTP seperti 404 atau 500 TIDAK menyebabkan reject, responsenya tetap "sukses" secara Promise. Selalu cek response.ok (true untuk status 200-299) sebelum memproses data.
Studi kasus: pencarian user
Contoh lengkap dengan loading state dan penanganan error:
let input = document.querySelector("#cari-user");
let hasil = document.querySelector("#hasil");
input.addEventListener("input", async (e) => {
let keyword = e.target.value.trim().toLowerCase();
if (!keyword) { hasil.innerHTML = ""; return; }
hasil.textContent = "Mencari...";
try {
let res = await fetch("https://jsonplaceholder.typicode.com/users");
if (!res.ok) throw new Error("HTTP " + res.status);
let users = await res.json();
let cocok = users.filter(u => u.name.toLowerCase().includes(keyword));
hasil.innerHTML = cocok.map(u =>
`<li>${u.name} (${u.email})</li>`).join("") || "<li>Tidak ketemu</li>";
} catch (err) {
hasil.textContent = "Error: " + err.message;
}
});Perhatikan innerHTML di sini aman karena datanya dari API terpercaya, bukan input pengguna langsung. Untuk latihan, tambahkan debounce agar request tidak dikirim tiap ketikan.
Kesimpulan
fetch + async/await + response.ok adalah trio wajib untuk komunikasi API. Latihan dengan API gratis seperti jsonplaceholder.typicode.com sampai polanya mendarah daging.