Cara Pakai Fetch HTML JavaScript untuk Mengambil Data Web

Menggunakan fungsi fetch() di JavaScript memungkinkan Anda mengambil dokumen HTML dari URL lain secara asinkron tanpa harus memuat ulang halaman utama. Metode standar modern ini memanfaatkan Promise untuk melakukan permintaan HTTP GET dan memproses respons yang diterima menjadi teks HTML siap parsing.

Untuk mengambil konten HTML secara utuh, respons dari server perlu diubah dari objek Response menjadi string teks menggunakan metode .text(). Setelah teks HTML didapat, Anda bisa menyisipkannya langsung ke dalam elemen DOM atau mem-parsingnya menggunakan DOMParser untuk menyeleksi elemen tertentu.

Sintaks Dasar Fetch HTML

Berikut adalah struktur kode dasar untuk mengambil dan menampilkan halaman HTML menggunakan fetch():

fetch('https://example.com/halaman.html')
  .then(response => {
    if (!response.ok) {
      throw new Error('Gagal memuat halaman: ' + response.statusText);
    }
    return response.text();
  })
  .then(htmlText => {
    console.log(htmlText);
    // Masukkan ke dalam elemen DOM
    document.getElementById('konten-target').innerHTML = htmlText;
  })
  .catch(error => {
    console.error('Terjadi kesalahan:', error);
  });

Menggunakan Async/Await untuk Kode yang Lebih Bersih

Pendekatan modern sering kali menggunakan sintaks async/await agar alur kode terbaca lebih runtut dan mudah dikelola, terutama saat menangani error:

async function ambilHalamanHTML(url) {
  try {
    let response = await fetch(url);
    
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    
    let htmlString = await response.text();
    
    // Parsing string HTML menjadi objek dokumen
    let parser = new DOMParser();
    let doc = DOMParser.parseFromString(htmlString, 'text/html');
    
    // Ambil judul dari halaman yang di-fetch
    let judulTarget = doc.querySelector('h1').innerText;
    console.log('Judul halaman target:', judulTarget);
    
  } catch (error) {
    console.error('Gagal melakukan fetch:', error);
  }
}

ambilHalamanHTML('https://example.com');

Tabel Perbandingan Metode Pengambilan Data Web

Langkah-Langkah Teknis Implementasi

1. Pastikan Kebijakan CORS: Periksa apakah server tujuan mengizinkan akses lintas domain (Cross-Origin Resource Sharing). Jika diblokir oleh kebijakan CORS browser, Anda memerlukan proksi atau mengatur header di sisi server tujuan.
2. Panggil Fungsi Fetch: Masukkan URL target yang valid menggunakan protokol HTTPS.
3. Ubah Respons ke Teks: Jalankan metode .text() pada objek respons untuk mendapatkan format string HTML mentah.
4. Parsing dan Manipulasi DOM: Gunakan DOMParser jika Anda hanya ingin mengambil bagian tertentu dari HTML tersebut (misalnya hanya mengambil elemen <article> atau <table>).

Troubleshooting Masalah Umum

Kendala paling sering saat memakai fetch() untuk mengambil HTML adalah kemunculan error CORS policy di konsol browser. Hal ini terjadi karena browser membatasi skrip agar tidak sembarangan mengambil data dari domain berbeda demi keamanan. Solusi terbaik untuk pengembangan lokal adalah menjalankan server lokal atau melakukan fetch melalui backend server Anda sendiri sebagai perantara.