FluentStack

try / catch

Mode tersedia: dark, light, paper
MasukDaftar
Intermediate · Level 5: JavaScript AdvancedIntermediate45 menitBahasa Indonesia

try / catch

Menangani async function yang gagal dengan try/catch dan pesan error yang jelas.

StatusMemuat progres
ProgresMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Tujuan belajar

  • Memahami bahwa await bisa gagal jika Promise rejected
  • Memakai try/catch di async function
  • Menampilkan pesan error yang membantu user
JavaScripttry/catchError Handling

Isi lesson

6 blok
  1. 1.
    Async code perlu rencana saat gagalBelum selesaiWajib
  2. 2.
    Contoh rapuh tanpa catchBelum selesaiWajib
  3. 3.
    Flow yang punya rencana errorBelum selesaiWajib
  4. 4.
    Cek pemahamanBelum selesaiWajib
  5. 5.
    Coding practiceBelum selesaiWajib
  6. 6.
    RingkasanBelum selesaiWajib

Async code perlu rencana saat gagal

Wajib

Request bisa gagal karena network bermasalah, URL salah, server error, data kosong, atau respons tidak sesuai. Kalau kode hanya menulis await tanpa rencana error, user bisa melihat UI diam, console error, atau state yang menggantung.

try/catch memberi tempat yang jelas: coba jalankan operasi async di try, lalu tangani error di catch jika operasi gagal.

Bagian ini memengaruhi progres lesson.

Contoh rapuh tanpa catch

Wajib
js
async function loadProfile() {
  showStatus("Memuat profile...");

  const profile = await getProfile();
  renderProfile(profile);

  showStatus("Profile berhasil dimuat.");
}

Jika getProfile rejected, baris setelah await tidak berjalan. Tanpa catch, UI bisa berhenti di status loading dan user tidak tahu apa yang terjadi.

Bagian ini memengaruhi progres lesson.

Flow yang punya rencana error

Wajib
js
async function loadProfile() {
  showStatus("Memuat profile...");

  try {
    const profile = await getProfile();
    renderProfile(profile);
    showStatus("Profile berhasil dimuat.");
  } catch (error) {
    showStatus("Profile gagal dimuat. Coba lagi nanti.");
    console.error(error);
  }
}

try berisi operasi yang mungkin gagal. catch memberi pesan UI yang jujur dan tetap menyimpan detail error di console untuk debugging.

Bagian ini memengaruhi progres lesson.

Cek pemahaman

WajibJawab dulu

Cek pemahaman singkat

Dalam async function, bagian mana yang menangani Promise rejected saat memakai try/catch?

Progres lesson naik setelah jawaban benar.

Coding practice

WajibDibuka di workspace khusus

Tambahkan try/catch

Latihan memberi rencana error pada async function yang bisa gagal.

Tujuan awal: Fokus di tab JS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

4 cek otomatis4 checklist
Belum selesaiBuka practice

Ringkasan

Wajib
  • await bisa gagal jika Promise yang ditunggu rejected.
  • try/catch membuat rencana error lebih eksplisit.
  • catch sebaiknya memberi pesan UI yang membantu dan menyimpan detail error untuk debugging.
  • Berikutnya, kamu akan menampilkan loading, error, empty, dan success state dengan lebih rapi.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian penting lesson ini

Lanjutkan blok wajib berikutnya: Async code perlu rencana saat gagal.

Memuat progresReview module