Penanganan Error Asinkron dalam Composable
try/catch dalam composable asinkron, mengekspos status error, serta logika percobaan ulang dalam useFetch.
Penanganan Error Asinkron dalam Composable adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Kesalahan dalam Komposabel Asinkron
Komposabel yang mengambil data atau menjalankan pekerjaan asinkron memerlukan strategi kesalahan sendiri. Polanya: tampilkan referensi error agar konsumen dapat merespons, sementara fungsi asinkron menangkap kegagalan secara internal.
Menampilkan Referensi Kesalahan
Kembalikan referensi error bersama data dan status pemuatan. Konsumen mengamatinya untuk menampilkan pesan.
function useApi() {
const data = ref(null);
const error = ref(null);
return { data, error };
}Percobaan / Penangkapan dalam Fungsi Asinkron
Di dalam fungsi asinkron, bungkus panggilan yang ditunggu dalam percobaan/penangkapan dan simpan kegagalan dalam referensi kesalahan, alih-alih membiarkannya dilemparkan tanpa penanganan.
async function load() {
try {
data.value = await api.get();
} catch (e) {
error.value = e;
}
}Mengatur Ulang Status Kesalahan
Hapus kesalahan sebelumnya di awal setiap percobaan agar pesan lama tidak tetap muncul setelah percobaan ulang berhasil.
async function load() {
error.value = null;
try { /* ... */ } catch (e) { error.value = e; }
}Referensi retryCount
Untuk mendukung percobaan ulang, lacak setiap percobaan dengan referensi retryCount. Tingkatkan nilainya setiap kali pengguna mencoba lagi.
const retryCount = ref(0);
function retry() {
retryCount.value++;
load();
}Logika Percobaan Ulang Otomatis
Anda dapat mencoba ulang secara otomatis hingga batas tertentu dengan menambah jeda di antara percobaan. Hentikan proses setelah jumlahnya melebihi maksimum.
async function load() {
try {
data.value = await api.get();
} catch (e) {
if (retryCount.value < 3) {
retryCount.value++;
return load();
}
error.value = e;
}
}Mengembalikan API Lengkap
Tampilkan data, kesalahan, fungsi percobaan ulang, dan retryCount agar komponen memiliki semua yang diperlukan.
return { data, error, retry, retryCount };Menangani Kesalahan
Di dalam komponen, lakukan perenderan berdasarkan referensi kesalahan dan sediakan tombol percobaan ulang yang dihubungkan ke fungsi yang ditampilkan.
<p v-if="error">Failed: {{ error.message }}</p>
<button v-if="error" @click="retry">Retry</button>Kesalahan Komposabel dan Penangan Global
Penanganan kesalahan pada tingkat komposabel ditujukan untuk kegagalan yang diharapkan dan perlu direspons oleh UI—permintaan yang gagal atau kesalahan validasi. Komponen menentukan cara menampilkannya.
Saat Batas Global Mulai Menangani
Penangan global dan batas kesalahan menangkap kesalahan tidak terduga yang tidak tertangani—cacat pemrograman dan kerusakan perenderan. Keduanya adalah jaring pengaman, bukan penangan utama untuk kegagalan asinkron yang dapat diperkirakan.
Memilih Lapisan yang Tepat
Aturan praktisnya: tangani kesalahan asinkron yang diperkirakan di dalam komposabel menggunakan referensi kesalahan; biarkan kesalahan yang benar-benar tidak terduga diteruskan ke penangan global. Dengan begitu, umpan balik UI tetap lokal dan perlindungan dari kerusakan tetap global.
Pemeriksaan Singkat
Di mana kesalahan asinkron yang diharapkan, seperti pengambilan data yang gagal, harus ditangani?
Ringkasan
Anda telah mempelajari bahwa komposabel asinkron menampilkan referensi error, menggunakan percobaan/penangkapan dalam fungsi asinkron, mendukung percobaan ulang dengan referensi retryCount dan fungsi percobaan ulang, serta bahwa kesalahan pada tingkat komposabel menangani kegagalan yang diharapkan sementara penangan global mencakup kegagalan yang tidak terduga.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Penanganan Error Asinkron dalam Composable” gratis?
Ya — teks lengkap “Penanganan Error Asinkron dalam Composable” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Penanganan Error Asinkron dalam Composable”?
try/catch dalam composable asinkron, mengekspos status error, serta logika percobaan ulang dalam useFetch. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Vue Academy?
Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Penanganan Error Asinkron dalam Composable” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Hook Siklus Hidup onErrorCaptured
- Komponen Error Boundary
- app.config.errorHandler untuk Error Global
- Penanganan Error Asinkron dalam Composable