Error Handling Asynchronous (try…catch dan finally) di JavaScript

Saat bekerja dengan asynchronous code seperti fetch(), async/await, atau Promise, kita pasti akan menghadapi error entah karena API gagal, jaringan lambat, atau data tidak sesuai format. Di sinilah peran error handling menjadi sangat penting. Maka dalam tutorial kali ini, kita akan belajar tentang Error Handling Asynchronous (try…catch dan finally) di JavaScript.

Pada tutorial ini, kita akan membahas:

• Konsep dasar error handling

• Penggunaan try...catch

• Blok finally

• Contoh error handling di kode asynchronous

Mengapa Perlu Error Handling?

Tanpa penanganan error, JavaScript akan menghentikan eksekusi program begitu error muncul.

Contoh:

console.log("Mulai program...");
fetch("https://api.tidakada.com/data")
  .then(res => res.json())
  .then(data => console.log(data)); // error
console.log("Selesai.");

Jika fetch() gagal (misalnya API tidak ditemukan), maka kode setelahnya bisa terhenti tanpa penjelasan.

1. Struktur Dasar try...catch

try...catch digunakan untuk menangkap error dan mencegah program berhenti secara tiba-tiba.

Contoh:

try {
  let hasil = JSON.parse("{nama:'John'}"); // JSON tidak valid
} catch (error) {
  console.error("Terjadi kesalahan parsing JSON:", error.message);
}

Penjelasan:

• Kode dalam try akan dijalankan.

• Jika ada error, eksekusi langsung lompat ke catch.

• Program tetap berjalan setelahnya.

2. Menangani Error di Asynchronous Code

a. Menggunakan async/await + try...catch

Dengan async/await, kita bisa menangani error secara lebih mudah dan rapi.

Contoh:

async function getUserData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
    if (!response.ok) throw new Error("Gagal mengambil data pengguna");
    const data = await response.json();
    console.log("Data user:", data);
  } catch (error) {
    console.error("Terjadi error:", error.message);
  }
}

getUserData();

Di sini, throw new Error() digunakan untuk menandai error secara manual, lalu ditangkap di blok catch.

b. Contoh Error Handling Fetch Gagal

async function getData() {
  try {
    const res = await fetch("https://api.salahalamat.com/posts");
    if (!res.ok) throw new Error("Server tidak merespons dengan benar");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.log("Error:", err.message);
  }
}

getData();

Jika URL salah atau server down, pesan error tetap bisa tampil dengan rapi.

3. Blok finally — Selalu Dijalankan

finally akan selalu dieksekusi, baik proses berhasil atau gagal.
Biasanya digunakan untuk menutup koneksi, menyembunyikan loading spinner, atau reset form.

Contoh:

async function loadData() {
  try {
    console.log("⏳ Memuat data...");
    const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    const data = await res.json();
    console.log("✅ Data berhasil:", data);
  } catch (error) {
    console.error("❌ Gagal memuat data:", error.message);
  } finally {
    console.log(" Selesai proses (sukses atau gagal).");
  }
}

loadData();

Output:

⏳ Memuat data…
✅ Data berhasil: {…}
Selesai proses (sukses atau gagal).

Studi Kasus: Fetch API dengan Spinner Loading

Berikut contoh penerapan lengkap try...catch...finally di tampilan web

<div id="status">⏳ Memuat data...</div>
<pre id="output"></pre>

<script>
async function fetchData() {
  const status = document.getElementById("status");
  const output = document.getElementById("output");

  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    if (!response.ok) throw new Error("Data tidak ditemukan!");
    const data = await response.json();
    output.textContent = JSON.stringify(data, null, 2);
    status.textContent = "✅ Data berhasil dimuat!";
  } catch (error) {
    status.textContent = "❌ Error: " + error.message;
  } finally {
    console.log("Request selesai diproses.");
  }
}

fetchData();
</script>

Hasilnya:

• Saat loading → tampil “⏳ Memuat data…”

• Jika sukses → tampil “✅ Data berhasil dimuat!”

• Jika gagal → tampil “❌ Error: …”

• finally tetap berjalan untuk log akhir.

Kesimpulan

Blok	Fungsi
try	Menjalankan kode utama
catch	Menangkap error dan menanganinya
finally	Menjalankan kode akhir (selalu dijalankan)

Gunakan try...catch...finally untuk menjaga aplikasi tetap stabil, terutama saat berurusan dengan proses asinkron (fetch, API, async/await).