Pernah nggak kamu pakai aplikasi seperti Google Maps, dan peta-nya update sendiri tanpa halaman di-reload? Atau feed Instagram yang terus muncul postingan baru kalau kamu scroll ke bawah? Nah, di balik semua keajaiban itu ada satu teknologi bernama Fetch API — cara JavaScript mengambil data dari internet secara diam-diam di balik layar. Di artikel ke-12 dari Seri Belajar Javascript ini, kamu akan belajar cara kerja fetch API, AJAX, dan REST API sehingga halaman web buatan kamu bisa hidup, dinamis, dan terhubung ke dunia luar — tanpa pengguna perlu tekan tombol refresh sekali pun.
AJAX (Asynchronous JavaScript And XML) adalah teknik meminta data ke server tanpa me-reload seluruh halaman.
Fetch API adalah cara modern JavaScript untuk melakukan AJAX — pengganti XMLHttpRequest yang lebih bersih, lebih ringkas, dan berbasis Promise.
🌐 Apa Itu AJAX dan Fetch API? (Plus Analogi yang Bikin Mudeng)
Bayangkan kamu duduk di restoran. Ada dua model pelayanan:
Model Lama (tanpa AJAX): Kamu pesan makanan → seluruh restoran tutup → semua orang keluar → restoran buka lagi dengan makanan di meja. Aneh banget, kan?
Model Modern (dengan AJAX/Fetch API): Kamu pesan makanan → pelayan pergi ke dapur → kamu tetap ngobrol, minum teh, scrolling HP → beberapa menit kemudian makanan datang. Hidup terus berjalan!
Itulah esensi AJAX. Halaman web tidak perlu berhenti dan reload hanya untuk mengambil data baru. Fetch API adalah "pelayan" JavaScript modern yang bertugas bolak-balik ke "dapur" (server/API) membawakan data yang kamu butuhkan.
AJAX pertama kali dipopulerkan oleh Google Maps dan Gmail pada tahun 2005. Sebelumnya, setiap update data di halaman web selalu butuh reload penuh. Gmail mengubah segalanya — dan internet tidak pernah sama lagi sejak itu.
Sekarang, mari kenalan dengan REST API — mitra sejati Fetch API. REST API adalah antarmuka yang disediakan server agar bisa "diajak bicara" oleh JavaScript kamu. Biasanya server menjawab dalam format JSON (JavaScript Object Notation) — sebuah format data yang tampilannya mirip banget dengan object JavaScript biasa.
| Metode | Kemudahan | Promise Support | Rekomendasi |
|---|---|---|---|
| XMLHttpRequest | 😩 Ribet | ❌ Tidak | Hindari (legacy) |
| jQuery $.ajax() | 😐 Oke | ⚠️ Parsial | Butuh library jQuery |
| Fetch API ✨ | 😍 Mudah | ✅ Native | Pilihan Terbaik! |
🚀 Cara Menggunakan Fetch API JavaScript — Step by Step
Oke, sekarang kita masuk ke bagian yang paling seru: praktik langsung! Kita akan menggunakan layanan REST API publik yang gratis bernama jsonplaceholder.typicode.com untuk latihan. Tidak perlu daftar, tidak perlu bayar.
Ini adalah template paling sederhana untuk mengambil data dari REST API menggunakan fetch API JavaScript:
fetch('https://jsonplaceholder.typicode.com/posts/1') .then(response => response.json()) .then(data => { console.log(data); }) .catch(error => { console.error('Terjadi kesalahan:', error); });
⬆️ .then(response => response.json()) mengubah respons mentah dari server menjadi object JavaScript yang bisa kamu pakai.
Kode yang sama, tapi jauh lebih mudah dibaca. Ini cara yang direkomendasikan di 2026:
async function ambilData() { try { const response = await fetch('https://jsonplaceholder.typicode.com/posts/1'); // Cek apakah request berhasil if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); console.log('Judul Post:', data.title); } catch (error) { console.error('Gagal ambil data:', error); } } ambilData();
response.ok bernilai true hanya jika status HTTP adalah 200–299. Selalu cek properti ini sebelum mengolah data — karena Fetch API tidak otomatis throw error saat server mengembalikan status 404 atau 500!
Nah ini inti sebenarnya! Kita gabungkan Fetch API dengan manipulasi DOM yang sudah kamu pelajari di Artikel 6:
<!-- HTML --> <div id="container">Memuat data...</div> <!-- JavaScript --> <script> async function tampilkanPost() { const container = document.getElementById('container'); try { const response = await fetch('https://jsonplaceholder.typicode.com/posts'); const posts = await response.json(); // Ambil 5 post pertama saja const limaPost = posts.slice(0, 5); container.innerHTML = limaPost.map(post => ` <div style="border: 1px solid #eee; padding: 16px; margin: 8px 0; border-radius: 8px;"> <h3>${post.title}</h3> <p>${post.body}</p> </div> `).join(''); } catch (error) { container.innerHTML = `<p style="color:red">Gagal: ${error.message}</p>`; } } tampilkanPost(); </script>
📤 Kirim Data ke Server — POST, PUT, DELETE via Fetch API
Fetch API bukan hanya untuk mengambil data (GET). Kamu juga bisa mengirim data ke server! Ini penting kalau kamu mau membuat fitur seperti form pendaftaran, komentar, atau update profil pengguna. Pola ini disebut operasi CRUD via REST API.
async function kirimPost(judulBaru, isiBaru) { const response = await fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', // Metode HTTP headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ // Data dalam format JSON title: judulBaru, body: isiBaru, userId: 1 }) }); const hasil = await response.json(); console.log('Post berhasil dibuat! ID baru:', hasil.id); } kirimPost('Belajar Fetch API', 'Ini isi artikelnya...');
Saat mengirim data ke REST API, kamu harus set Content-Type: application/json di headers DAN mengkonversi data JavaScript menjadi string JSON menggunakan JSON.stringify(). Tanpa dua hal ini, server tidak akan mengerti data yang kamu kirim.
| Method | Fungsi | Analogi | Contoh Endpoint |
|---|---|---|---|
| GET | Ambil data | Baca menu restoran | /posts |
| POST | Buat data baru | Pesan makanan baru | /posts |
| PUT | Update data penuh | Ganti seluruh pesanan | /posts/1 |
| PATCH | Update data sebagian | Ubah level kepedasan aja | /posts/1 |
| DELETE | Hapus data | Cancel pesanan | /posts/1 |
🛠️ Mini Project: Aplikasi Cuaca Sederhana dengan Fetch API JavaScript
Teori saja tidak cukup. Mari kita buat sesuatu yang nyata — sebuah mini aplikasi yang menampilkan daftar pengguna dari REST API publik dan menampilkannya sebagai kartu profil yang cantik di halaman web. Ini simulasi yang sangat mirip dengan dunia kerja nyata.
<!-- HTML --> <button onclick="muatPengguna()" style="padding:10px 20px; background:#6366f1; color:#fff; border:none; border-radius:8px; cursor:pointer;"> Muat Data Pengguna </button> <div id="kartu-wrapper" style="display:flex; flex-wrap:wrap; gap:16px; margin-top:20px;"></div> <!-- JavaScript --> <script> async function muatPengguna() { const wrapper = document.getElementById('kartu-wrapper'); wrapper.innerHTML = '⏳ Memuat...'; try { const res = await fetch('https://jsonplaceholder.typicode.com/users'); const users = await res.json(); wrapper.innerHTML = users.map(u => ` <div style="background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:20px; width:220px; box-shadow:0 4px 12px rgba(0,0,0,0.06);"> <div style="font-size:36px; text-align:center; margin-bottom:8px;">👤</div> <h4 style="margin:0 0 4px; font-size:15px; font-weight:700;">${u.name}</h4> <p style="margin:0 0 4px; font-size:13px; color:#6366f1;">@${u.username}</p> <p style="margin:0; font-size:12px; color:#6b7280;">📧 ${u.email}</p> <p style="margin:4px 0 0; font-size:12px; color:#6b7280;">🌐 ${u.website}</p> </div> `).join(''); } catch (e) { wrapper.innerHTML = '❌ Gagal memuat data!'; } } </script>
CORS (Cross-Origin Resource Sharing) adalah mekanisme keamanan browser yang bisa memblokir request Fetch API kamu ke server lain. Jika kamu mendapat error "CORS policy", itu artinya server tujuan tidak mengizinkan request dari domain kamu. Solusinya: gunakan API yang sudah CORS-friendly, atau atur server sendiri dengan header yang tepat. JSONPlaceholder yang kita pakai di atas sudah CORS-friendly, jadi aman buat latihan!
Ada banyak REST API gratis yang bisa kamu gunakan untuk belajar selain JSONPlaceholder:
- OpenWeatherMap API — Data cuaca real-time (butuh API key gratis)
- PokeAPI (
pokeapi.co) — Data Pokemon, 100% gratis & CORS-friendly - The Dog API — Foto-foto anjing random. Serius, ini ada 😄
- REST Countries (
restcountries.com) — Data negara-negara di dunia
JavaScript from Zero to Zorro
Kuasai JavaScript dari nol — mulai dari sintaks dasar hingga membangun aplikasi web interaktif. 14 artikel terstruktur, gratis, dan cocok untuk pemula.
📖 Lihat Daftar Isi Lengkap →
No comments:
Post a Comment