Gestión de errores e interceptores globales
Gestione los errores de las solicitudes y configure los interceptores de Axios.
Gestión de errores e interceptores globales es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 3 lecciones en total.
Las solicitudes pueden fallar
Las redes se interrumpen, los servidores devuelven errores y los tokens caducan. Las aplicaciones robustas anticipan los fallos y responden de manera adecuada, en lugar de bloquearse o dejar al usuario mirando un indicador de carga indefinidamente.
try/catch para las solicitudes
Envuelva las solicitudes esperadas en try/catch para capturar los errores. Axios lanza una excepción cuando el servidor responde con un estado 4xx o 5xx.
async fetchPosts() {
try {
const res = await api.get("/posts")
this.posts = res.data
} catch (err) {
console.error(err)
}
}Inspeccionar el error
Un error de Axios contiene información útil. error.response existe cuando el servidor ha respondido, mientras que su ausencia suele indicar un fallo de red o de tiempo de espera.
catch (err) {
if (err.response) {
console.log(err.response.status)
console.log(err.response.data)
} else {
console.log("Network error")
}
}Realizar un seguimiento del estado de error
Almacene un mensaje de error en el estado reactivo para que la plantilla pueda mostrárselo al usuario.
data() {
return { posts: [], loading: false, error: null }
}Establecer el error
Restablezca el error antes de cada solicitud y, después, asígnelo en el bloque 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
}
}Mostrar mensajes de error
Muestre el error en la plantilla para que los usuarios entiendan qué ha ocurrido y qué deben hacer a continuación.
<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>¿Qué son los interceptores?
Los interceptores de Axios permiten ejecutar código automáticamente en cada solicitud o respuesta. Son ideales para aspectos transversales, como adjuntar tokens o gestionar errores desde un único lugar central.
Interceptores de solicitudes
Un interceptor de solicitudes se ejecuta antes de enviar cada solicitud. Úselo para adjuntar globalmente un encabezado de autenticación.
api.interceptors.request.use(config => {
const token = localStorage.getItem("token")
if (token) {
config.headers.Authorization = "Bearer " + token
}
return config
})Interceptores de respuestas
Un interceptor de respuestas se ejecuta después de recibir cada respuesta. Acepta dos callbacks: uno para los casos correctos y otro para los errores.
api.interceptors.response.use(
response => response,
error => {
if (error.response && error.response.status === 401) {
// redirect to login
}
return Promise.reject(error)
}
)Gestión global de errores
Centralizar la lógica de errores en un interceptor de respuestas permite mantener limpios los componentes individuales. Los casos habituales, como 401 (cerrar sesión) o 500 (mostrar un toast), se gestionan desde un único lugar.
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)
}
)Lógica sencilla de reintento
En redes inestables, puede volver a intentar una solicitud fallida un número limitado de veces antes de darse por vencido.
async function getWithRetry(url, retries = 2) {
try {
return await api.get(url)
} catch (err) {
if (retries > 0) {
return getWithRetry(url, retries - 1)
}
throw err
}
}Comprobación rápida
Compruebe sus conocimientos sobre la gestión de errores y los interceptores.
Repaso
Envuelva las solicitudes en try/catch, muestre un mensaje error claro en la interfaz y examine error.response para distinguir entre fallos del servidor y de la red. Los interceptores centralizan aspectos comunes: los interceptores de solicitudes adjuntan tokens, los interceptores de respuestas gestionan los errores globales y un pequeño helper de reintento aporta resiliencia. A continuación, optimizará el rendimiento de la aplicación.
Preguntas frecuentes
¿La lección «Gestión de errores e interceptores globales» es gratis?
Sí — el texto completo de «Gestión de errores e interceptores globales» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Gestión de errores e interceptores globales»?
Gestione los errores de las solicitudes y configure los interceptores de Axios. Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.
¿Cuánto tiempo toma la lección «Gestión de errores e interceptores globales»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Peticiones HTTP con Axios
- Hooks de ciclo de vida y obtención de datos
- Gestión de errores e interceptores globales