Tutorial Pemrograman & Komputer Part 28: Mastering Error Handling in Asynchronous JavaScript

Pendahuluan

Selamat datang di bagian ke-28 dari seri tutorial Pemrograman & Komputer kami! Di bagian ini, kita akan menyelami topik penting dalam pemrograman JavaScript asinkron: penanganan kesalahan (error handling). Setelah mempelajari tentang Asynchronous JavaScript dan Event Loop di bagian sebelumnya, kini saatnya untuk memastikan bahwa kode asinkron kita tangguh dan dapat menangani kesalahan dengan baik.

Prasyarat:

• Pemahaman dasar tentang JavaScript.
• Pengetahuan tentang asynchronous JavaScript, promises, async/await, dan event loop (dari tutorial sebelumnya).

Konsep Dasar: Mengapa Error Handling Penting?

Dalam dunia nyata, bayangkan Anda memesan kopi secara online. Proses pemesanan adalah operasi asinkron. Apa yang terjadi jika terjadi kesalahan? Misalnya, kopi habis, pembayaran gagal, atau koneksi internet terputus? Tanpa penanganan kesalahan yang tepat, aplikasi Anda bisa crash, memberikan pengalaman pengguna yang buruk, atau bahkan kehilangan data.

Dalam kode asinkron, kesalahan dapat terjadi di berbagai tempat: saat membuat promise, saat menunggu promise selesai, atau saat memproses hasilnya. Kita perlu mekanisme untuk menangkap dan menangani kesalahan ini secara efektif.

Hands-on Coding: Penanganan Kesalahan dengan Promises

Mari kita mulai dengan penanganan kesalahan dalam Promises.

Menggunakan .catch()

Metode .catch() digunakan untuk menangkap kesalahan yang terjadi dalam rantai promise.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5;
      if (success) {
        resolve('Data berhasil diambil!');
      } else {
        reject('Gagal mengambil data!');
      }
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Terjadi kesalahan:', error);
  });

Penjelasan:

• fetchData() mengembalikan promise yang disimulasikan untuk mengambil data setelah satu detik.
• Jika success adalah true, promise di-resolve dengan pesan keberhasilan. Jika tidak, promise di-reject dengan pesan kesalahan.
• .then() menangani kasus keberhasilan dan mencetak data ke konsol.
• .catch() menangani kasus kesalahan dan mencetak pesan kesalahan ke konsol.

Menangani Kesalahan dengan .finally()

Metode .finally() dieksekusi terlepas dari apakah promise di-resolve atau di-reject. Ini berguna untuk melakukan pembersihan atau tindakan akhir lainnya.

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Terjadi kesalahan:', error);
  })
  .finally(() => {
    console.log('Operasi selesai.');
  });

Penjelasan:

• .finally() selalu dieksekusi setelah .then() atau .catch().

Hands-on Coding: Penanganan Kesalahan dengan Async/Await

Sekarang mari kita lihat bagaimana menangani kesalahan dengan async/await.

Menggunakan try...catch

Blok try...catch adalah cara standar untuk menangkap kesalahan dalam fungsi async.

async function fetchDataAsync() {
  try {
    const data = await fetchData();
    console.log('Data:', data);
  } catch (error) {
    console.error('Terjadi kesalahan:', error);
  } finally {
    console.log('Operasi selesai.');
  }
}

fetchDataAsync();

Penjelasan:

• Kita membungkus kode yang berpotensi menimbulkan kesalahan (await fetchData()) dalam blok try.
• Jika terjadi kesalahan, blok catch akan dieksekusi.
• Blok finally selalu dieksekusi setelah try atau catch.

Common Pitfalls

• Tidak Menangani Kesalahan: Kesalahan yang tidak tertangani dapat menyebabkan aplikasi crash atau perilaku yang tidak terduga.
• Menangkap Semua Kesalahan: Terkadang, kita mungkin hanya ingin menangani jenis kesalahan tertentu dan membiarkan kesalahan lain naik ke atas.
• Lupa await: Jika Anda lupa menggunakan await di depan promise dalam fungsi async, kesalahan tidak akan ditangkap dengan benar.

Challenge

Modifikasi kode di atas sehingga hanya menangani kesalahan jaringan (misalnya, kesalahan dengan kode status 500) dan membiarkan kesalahan lain ditangani oleh handler kesalahan global.

Sumber Referensi

• MDN Web Docs: try...catch
• MDN Web Docs: Promise.prototype.catch()
• MDN Web Docs: async function