Retry Dasar
Menambahkan tombol coba lagi untuk async operation yang gagal.
Tujuan belajar
- Memahami kapan retry berguna untuk user
- Menampilkan tombol retry hanya saat error
- Menjalankan ulang async function dari event listener
Isi lesson
5 blok- 1.Error state sebaiknya memberi jalan keluarBelum selesaiWajib
- 2.Tombol retry memanggil ulang async functionBelum selesaiWajib
- 3.Retry bukan jawaban untuk semua errorBelum selesaiWajib
- 4.Coding practiceBelum selesaiWajib
- 5.RingkasanBelum selesaiWajib
Error state sebaiknya memberi jalan keluar
WajibPesan error yang baik menjelaskan masalah. Tetapi untuk banyak async operation, user juga butuh tindakan berikutnya. Tombol retry memberi cara sederhana untuk mencoba ulang tanpa reload halaman.
Retry dasar cocok untuk request yang mungkin gagal sementara, misalnya network putus sebentar atau server sedang lambat. Untuk tahap ini, cukup buat tombol coba lagi yang menjalankan async function yang sama.
Bagian ini memengaruhi progres lesson.
Tombol retry memanggil ulang async function
Wajibconst retryButton = document.querySelector("#retryButton");
async function loadProfile() {
retryButton.hidden = true;
showLoading();
try {
const profile = await getProfile();
showSuccess(profile);
} catch (error) {
showError("Profile gagal dimuat.");
retryButton.hidden = false;
console.error(error);
}
}
retryButton.addEventListener("click", () => {
loadProfile();
});
loadProfile();Saat request gagal, tombol retry ditampilkan. Saat user klik tombol, loadProfile dijalankan ulang.
Bagian ini memengaruhi progres lesson.
Peringatan
WajibRetry bukan jawaban untuk semua error
Jika error terjadi karena data tidak valid atau user belum login, retry tanpa perubahan tidak akan membantu. Retry paling berguna untuk kegagalan sementara seperti network atau server yang tidak stabil.
Bagian ini memengaruhi progres lesson.
Coding practice
WajibDibuka di workspace khususTambahkan retry button
Latihan menampilkan tombol retry saat async operation 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.
Ringkasan
Wajib- Retry memberi user tindakan setelah request gagal.
- Tombol retry sebaiknya muncul saat error, bukan sepanjang waktu.
- Retry dasar bisa menjalankan ulang async function yang sama.
- Untuk sekarang, hindari retry/backoff algorithm yang kompleks.
- Berikutnya, Uji Kompetensi akan mengecek async flow, UI state, error handling, dan retry dasar.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Error state sebaiknya memberi jalan keluar.