Penanganan Kesalahan dan Interseptor Global
Tangani kesalahan permintaan dan konfigurasikan interseptor Axios.
Penanganan Kesalahan dan Interseptor Global adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. 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 3 pelajaran total.
Permintaan Dapat Gagal
Jaringan dapat terputus, server dapat mengembalikan kesalahan, dan token dapat kedaluwarsa. Aplikasi yang tangguh mengantisipasi kegagalan dan merespons dengan baik, bukan malah mogok atau membiarkan pengguna menatap pemutar tanpa batas.
try/catch di Sekitar Permintaan
Bungkus permintaan yang ditunggu dengan try/catch untuk menangkap kesalahan. Axios akan melempar kesalahan ketika server merespons dengan status 4xx atau 5xx.
async fetchPosts() {
try {
const res = await api.get("/posts")
this.posts = res.data
} catch (err) {
console.error(err)
}
}Memeriksa Kesalahan
Kesalahan Axios membawa detail yang berguna. error.response tersedia ketika server mengirimkan respons, sedangkan ketiadaannya biasanya berarti terjadi kegagalan jaringan atau batas waktu.
catch (err) {
if (err.response) {
console.log(err.response.status)
console.log(err.response.data)
} else {
console.log("Network error")
}
}Melacak Status Kesalahan
Simpan pesan kesalahan dalam status reaktif agar templat dapat menampilkannya kepada pengguna.
data() {
return { posts: [], loading: false, error: null }
}Menetapkan Kesalahan
Atur ulang kesalahan sebelum setiap permintaan, lalu isi nilainya di blok catch.
async fetchPosts() {
this.loading = true
this.error = null
try {
this.posts = (await api.get("/posts")).data
} catch (err) {
this.error = "Could not load posts. Please try again."
} finally {
this.loading = false
}
}Menampilkan Pesan Kesalahan
Tampilkan kesalahan dalam templat agar pengguna memahami apa yang terjadi dan apa yang harus dilakukan selanjutnya.
<template>
<p v-if="loading">Loading...</p>
<p v-else-if="error" class="error">{{ error }}</p>
<ul v-else>
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
</template>Apa Itu Pencegat?
Pencegat Axios memungkinkan Anda menjalankan kode secara otomatis pada setiap permintaan atau respons. Pencegat sangat cocok untuk kebutuhan lintas fitur, seperti menambahkan token atau menangani kesalahan di satu tempat terpusat.
Pencegat Permintaan
Pencegat permintaan berjalan sebelum setiap permintaan dikirim. Gunakan pencegat ini untuk menambahkan header autentikasi secara global.
api.interceptors.request.use(config => {
const token = localStorage.getItem("token")
if (token) {
config.headers.Authorization = "Bearer " + token
}
return config
})Pencegat Respons
Pencegat respons berjalan setelah setiap respons tiba. Pencegat ini menerima dua fungsi panggilan balik: satu untuk keberhasilan dan satu untuk kesalahan.
api.interceptors.response.use(
response => response,
error => {
if (error.response && error.response.status === 401) {
// redirect to login
}
return Promise.reject(error)
}
)Penanganan Kesalahan Global
Memusatkan logika kesalahan dalam pencegat respons membuat komponen individual tetap bersih. Kasus umum seperti 401 (keluar) atau 500 (menampilkan notifikasi singkat) dapat ditangani di satu tempat.
api.interceptors.response.use(
res => res,
error => {
const status = error.response ? error.response.status : null
if (status === 401) logout()
if (status >= 500) showToast("Server error, try later")
return Promise.reject(error)
}
)Logika Percobaan Ulang Sederhana
Untuk jaringan yang tidak stabil, Anda dapat mencoba kembali permintaan yang gagal beberapa kali sebelum menyerah.
async function getWithRetry(url, retries = 2) {
try {
return await api.get(url)
} catch (err) {
if (retries > 0) {
return getWithRetry(url, retries - 1)
}
throw err
}
}Pemeriksaan Singkat
Uji pengetahuan Anda tentang penanganan kesalahan dan pencegat.
Ringkasan
Bungkus permintaan dengan try/catch, tampilkan pesan error yang mudah dipahami di antarmuka, dan periksa error.response untuk membedakan kegagalan server dari kegagalan jaringan. Pencegat memusatkan berbagai kebutuhan: pencegat permintaan menambahkan token, pencegat respons menangani kesalahan global, dan pembantu percobaan ulang sederhana meningkatkan ketangguhan. Selanjutnya, Anda akan mengoptimalkan kinerja aplikasi.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Penanganan Kesalahan dan Interseptor Global” gratis?
Ya — teks lengkap “Penanganan Kesalahan dan Interseptor Global” 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 3 pelajaran total.
Apa yang akan aku pelajari di “Penanganan Kesalahan dan Interseptor Global”?
Tangani kesalahan permintaan dan konfigurasikan interseptor Axios. 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 3 dari 3.
Berapa lama pelajaran “Penanganan Kesalahan dan Interseptor Global” 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
- Permintaan HTTP dengan Axios
- Hook Siklus Hidup dan Pengambilan Data
- Penanganan Kesalahan dan Interseptor Global