Fetch API memungkinkan JavaScript mengambil data dari server tanpa memuat ulang halaman. Dengan menambahkan setInterval, kamu bisa memperbarui tampilan secara berkala. Panduan ini membahas implementasi dari nol, termasuk cara menghentikan polling saat tab tidak aktif.
Mengapa memilih Fetch API dan setInterval
Keduanya sudah tersedia di browser modern tanpa dependensi. Fetch mengembalikan Promise sehingga penanganan error lebih jelas dibanding XMLHttpRequest. Interval memungkinkan penjadwalan sederhana, cocok untuk data yang berubah setiap beberapa detik seperti harga saham, status server, atau antrean pesanan.
Kapan pendekatan ini kurang tepat
Jika data berubah sangat cepat atau membutuhkan latensi rendah, WebSocket atau Server-Sent Events lebih sesuai. Polling dengan interval juga membebani server kalau jumlah klien besar. Untuk skala kecil hingga menengah, teknik ini masih memadai.
Menyiapkan struktur HTML dan endpoint
Siapkan wadah dengan id unik dan pastikan server memiliki endpoint yang mengembalikan JSON. Contoh endpoint: /api/status. Struktur HTML minimal seperti ini:
<div id="status-container">Memuat...</div>Letakkan elemen tersebut di area yang tidak mengganggu layout utama. Jika perlu, atur lebar tetap agar teks yang berubah tidak menggeser elemen lain.
Menulis fungsi fetch dan pembaruan DOM
Buat fungsi fetchData yang memanggil endpoint, memeriksa status respons, lalu memperbarui konten. Gunakan try...catch untuk menangani kegagalan jaringan.
async function fetchData() {
const container = document.getElementById('status-container');
try {
const response = await fetch('/api/status');
if (!response.ok) throw new Error('Respons tidak OK');
const data = await response.json();
container.textContent = data.message;
} catch (error) {
container.textContent = 'Gagal memuat data';
console.error(error);
}
}Hindari menimpa seluruh kontainer dengan innerHTML jika data berasal dari pengguna. Gunakan textContent atau buat elemen baru untuk mencegah XSS.
Menjadwalkan pembaruan dengan setInterval
Panggil fetchData segera setelah halaman dimuat, lalu ulangi setiap beberapa detik. Simpan ID interval agar bisa dihentikan nanti.
const intervalId = setInterval(fetchData, 5000);
fetchData();Jangan langsung memasang interval tanpa memanggil fungsi satu kali. Pengguna akan melihat teks “Memuat…” selama jeda pertama. Panggilan awal memastikan data tampil segera.
Menghentikan interval saat diperlukan
Jika komponen dilepas dari DOM atau halaman berpindah, hentikan interval dengan clearInterval(intervalId). Pada aplikasi single-page, ini mencegah kebocoran memori dan permintaan yang tidak perlu.
Menghindari polling saat tab tidak aktif
Browser modern menghentikan timer di tab latar belakang, tetapi tidak selalu. Gunakan Page Visibility API untuk menghentikan interval ketika tab tidak terlihat, lalu lanjutkan saat kembali.
let intervalId = null;
function startPolling() {
if (intervalId) return;
intervalId = setInterval(fetchData, 5000);
fetchData();
}
function stopPolling() {
clearInterval(intervalId);
intervalId = null;
}
document.addEventListener('visibilitychange', () => {
if (document.hidden) stopPolling();
else startPolling();
});
startPolling();Dengan cara ini, permintaan hanya terjadi saat pengguna benar-benar melihat halaman. Server akan menerima lebih sedikit permintaan, dan baterai perangkat lebih hemat.
Menangani error dan batas waktu
Fetch tidak memiliki timeout bawaan. Gunakan AbortController untuk membatalkan permintaan yang menggantung.
async function fetchData() {
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 4000);
try {
const response = await fetch('/api/status', { signal: controller.signal });
clearTimeout(timeout);
if (!response.ok) throw new Error('HTTP ' + response.status);
const data = await response.json();
document.getElementById('status-container').textContent = data.message;
} catch (error) {
if (error.name === 'AbortError') console.warn('Permintaan dibatalkan');
else console.error(error);
}
}Sebaiknya tampilkan pesan yang ramah pengguna, bukan kode error mentah. Sertakan tombol “Coba lagi” yang memanggil fetchData secara manual.
Integrasi dengan layout yang sudah ada
Pastikan kontainer data memiliki ukuran yang stabil. Jika teks bisa panjang, gunakan min-height atau overflow: auto. Untuk layout dua kolom, letakkan kontainer di kolom yang tidak mengganggu navigasi. Jika kamu baru membangun layout, panduan 7 langkah layout web dengan CSS Grid dan Flexbox untuk pemula bisa jadi titik awal.
Saat melakukan debugging, periksa apakah ada masalah tumpang tindih elemen yang disebabkan posisi atau z-index. Artikel cara mengatur z-index CSS agar elemen tidak saling timpa membahasnya secara khusus.
Alternatif yang lebih efisien
Untuk data yang jarang berubah, pertimbangkan cache di sisi klien dengan localStorage dan perbarui hanya jika ada perubahan versi. Jika server mendukung, gunakan header ETag atau Last-Modified agar fetch mengembalikan 304 dan menghemat bandwidth.
Bagi yang ingin memantau koneksi jaringan secara berkala, alat seperti ping dapat membantu mendiagnosis latensi. Ulasan membandingkan aplikasi ping untuk Windows, Linux, dan Android bisa menjadi referensi saat memilih tool. Jika aplikasi menampilkan data sensitif, pastikan kamu memahami cara memeriksa kebocoran data pribadi dan mengatasinya melalui panduan di offnow.org.
Kebutuhan akan hiburan ringan saat istirahat coding bisa dipenuhi dengan menonton pertandingan olahraga favorit. Situs tarkamlive menyediakan siaran gratis dengan host yang menghibur, cocok untuk penggemar basket, sepak bola, atau UFC.
Ringkasan
Menampilkan data real-time dengan Fetch API dan setInterval membutuhkan perhatian pada penjadwalan, penghentian interval, dan penanganan error. Gunakan Page Visibility API untuk menghemat sumber daya, dan selalu bersihkan interval saat tidak diperlukan. Dengan langkah di atas, kamu bisa membangun pembaruan data sederhana tanpa library tambahan.
Pertanyaan yang Sering Diajukan
Apakah setInterval bisa diganti dengan setTimeout rekursif?
Bisa. setTimeout rekursif lebih aman jika durasi fetch bervariasi, karena interval berikutnya baru dijadwalkan setelah fetch selesai. setInterval tetap berguna untuk tugas yang durasinya konsisten.
Bagaimana cara menguji polling tanpa membebani server?
Gunakan endpoint tiruan atau naikkan interval saat pengembangan. Pantau tab Network di DevTools untuk memastikan tidak ada permintaan berlebihan. Matikan polling saat tab tidak aktif.
Apakah Fetch API mendukung pengiriman data ke server?
Ya. Tambahkan objek konfigurasi dengan metode POST, header Content-Type, dan body berisi data yang akan dikirim. Pastikan server menangani permintaan tersebut dengan benar.
