Handle JSON Error

Google

Dari fungsi dibawah ini aku ingin membuat "else" berjalan jika json error,
aku hanya memeriksa dengan JSON.stringify(data).length > 100

var hasil;
async function fetchContent(halaman) {
    try {
        let response = await fetch(halaman);
        let data = await response.json();
        if (JSON.stringify(data).length > 100) {
            hasil = data;
        } else {
            let resHTML = await fetch(halaman);
            let dataText = await resHTML.text();
            let parser = new DOMParser();
            let doc = parser.parseFromString(dataText, 'text/html');
            hasil = doc.querySelector('body')?.innerHTML;
        }
    } catch (error) {
        hasil = `Error: ${error.message}`;
    }
}

  • CodingAI1 bulan yang lalu

    Kode yang Anda berikan mencoba memeriksa apakah panjang string JSON lebih dari 100 karakter untuk menentukan apakah JSON valid atau tidak. Ini bukan cara yang tepat untuk mendeteksi error JSON. Panjang string JSON tidak menunjukkan validitasnya. JSON yang valid bisa sangat pendek, dan JSON yang invalid bisa sangat panjang.

    Berikut adalah cara yang lebih baik untuk menangani error JSON dan mencapai tujuan Anda, dengan penjelasan detail:

    var hasil;

async function fetchContent(halaman) {
  try {
    let response = await fetch(halaman);

    // Periksa status response HTTP.  Status 200 menunjukkan sukses.
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    let data = await response.json();

    // Periksa apakah data adalah objek JSON yang valid.  
    //  Cara ini jauh lebih handal daripada memeriksa panjang string.
    if (typeof data === 'object' && data !== null) {
      // Jika data valid dan memiliki property/atribut tertentu, lakukan hal ini.
      // Contoh, memastikan ada property tertentu untuk menjamin data valid:
      if(data.hasOwnProperty('key_penting') && data.key_penting.length > 0){ //Ganti key_penting dengan property yang sesuai
          hasil = data;
      } else {
          throw new Error("JSON valid tetapi tidak mengandung data yang diharapkan.");
      }

    } else {
      // Jika bukan objek JSON valid (misalnya, server mengembalikan HTML error)
      let resHTML = await fetch(halaman);
      let dataText = await resHTML.text();
      let parser = new DOMParser();
      let doc = parser.parseFromString(dataText, 'text/html');
      hasil = doc.querySelector('body')?.innerHTML;
    }
  } catch (error) {
    hasil = `Error: ${error.message}`;
    console.error("Terjadi error:", error); // Log error ke konsol untuk debugging
  }
}

    Penjelasan Perubahan dan Perbaikan:

    1. Pemeriksaan Status HTTP: Kode sekarang memeriksa response.ok. Ini adalah cara yang jauh lebih andal untuk menentukan apakah permintaan fetch berhasil. Status kode 200 (OK) menunjukkan sukses. Kode status lainnya (misalnya, 404 Not Found, 500 Internal Server Error) menunjukkan kesalahan. throw new Error akan memicu blok catch.

    2. Validasi JSON yang Lebih Baik: Alih-alih memeriksa panjang string JSON, kode sekarang memeriksa tipe data data. typeof data === 'object' && data !== null memastikan bahwa data adalah objek JavaScript yang valid, yang merupakan indikasi kuat bahwa parsing JSON berhasil. Jika bukan objek, berarti parsing JSON gagal.

    3. Penanganan Error yang Lebih Spesifik: Blok try...catch sekarang menangani berbagai jenis error, termasuk error HTTP dan error parsing JSON, dengan pesan error yang lebih informatif. Tambahan console.error sangat membantu untuk debugging.

    4. Periksa Isi JSON: Ditambahkan pengecekan apakah JSON mengandung data yang diharapkan. Ini memastikan bahwa meskipun parsing berhasil, data yang diterima sesuai dengan yang diharapkan.

    Cara Menggunakan:

    fetchContent('your_url_here').then(() => {
  console.log(hasil); // Tampilkan hasil atau proses hasil di sini
});

    Ganti 'your_url_here' dengan URL yang ingin Anda akses. Perhatikan bahwa kode sekarang menggunakan then() untuk menangani hasil async function secara asinkron.

    Dengan perubahan ini, kode Anda akan jauh lebih andal dalam menangani error JSON dan memberikan tanggapan yang lebih akurat. Ingat selalu untuk menangani error dengan cara yang tepat untuk membuat aplikasi Anda lebih robust.

    0 0
Beri jawaban terbaikmu