useFetch: Un composable para datos asíncronos
refs para los datos, la carga y los errores, obtención al montar, función para volver a obtener los datos y limpieza con AbortController
useFetch: Un composable para datos asíncronos es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 3 de 4. 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 4 lecciones en total.
El objetivo de useFetch
La obtención de datos asíncronos se repite en todas partes: indicadores de carga, gestión de errores y la solicitud en sí. useFetch reúne todo esto en un composable reutilizable que devuelve data, loading y error.
Las tres refs reactivas
Comience con tres refs que describan el estado de cualquier solicitud asíncrona.
import { ref } from "vue";
function useFetch(url) {
const data = ref(null);
const loading = ref(false);
const error = ref(null);
}La rutina de obtención
Escriba una función asíncrona que cambie loading, realice la solicitud y almacene el resultado. A continuación, perfeccionaremos la gestión de errores.
async function execute() {
loading.value = true;
const res = await fetch(url);
data.value = await res.json();
loading.value = false;
}try / catch / finally
Envuelva la solicitud para que los errores se almacenen en error y loading siempre se restablezca, tanto si tiene éxito como si falla, en finally.
async function execute() {
loading.value = true;
error.value = null;
try {
const res = await fetch(url);
if (!res.ok) throw new Error("HTTP " + res.status);
data.value = await res.json();
} catch (e) {
error.value = e;
} finally {
loading.value = false;
}
}Obtención en onMounted
Inicie la solicitud cuando el componente se monte para que los datos se carguen automáticamente.
import { onMounted } from "vue";
onMounted(execute);Una función refetch
Exponga execute como refetch para que los consumidores puedan volver a cargar los datos cuando lo necesiten, después de una mutación o al pulsar un botón de reintento.
return { data, loading, error, refetch: execute };AbortController para la limpieza
Si el componente se desmonta durante la solicitud, aborte la obtención para evitar actualizar el estado de un componente que ya no existe. Cree un AbortController y pase su señal.
const controller = new AbortController();
const res = await fetch(url, { signal: controller.signal });Abortar al desmontar
Cancele la solicitud en curso en onUnmounted. Ignore el error de cancelación resultante en el catch.
import { onUnmounted } from "vue";
onUnmounted(() => controller.abort());El useFetch completo
Una vez ensamblado, el composable gestiona la carga, los errores, la repetición de solicitudes y la limpieza en una sola unidad ordenada.
function useFetch(url) {
const data = ref(null);
const loading = ref(false);
const error = ref(null);
const controller = new AbortController();
async function execute() {
loading.value = true; error.value = null;
try {
const res = await fetch(url, { signal: controller.signal });
data.value = await res.json();
} catch (e) {
if (e.name !== "AbortError") error.value = e;
} finally {
loading.value = false;
}
}
onMounted(execute);
onUnmounted(() => controller.abort());
return { data, loading, error, refetch: execute };
}Uso en un componente
Los consumidores renderizan según las tres refs: un indicador mientras se cargan los datos, un mensaje de error si falla la solicitud y los datos en cualquier otro caso.
const { data, loading, error } = useFetch("/api/posts");Patrón de plantilla
Ramifique según el estado en la plantilla para ofrecer una experiencia de usuario completa.
<p v-if="loading">Loading...</p>
<p v-else-if="error">{{ error.message }}</p>
<ul v-else>
<li v-for="p in data" :key="p.id">{{ p.title }}</li>
</ul>Comprobación rápida
¿Cuál es la función de AbortController en useFetch?
Resumen
Ha construido useFetch(url), que expone las refs data, loading y error, obtiene datos en onMounted mediante un patrón try/catch/finally, ofrece una función refetch y utiliza un AbortController que se limpia en onUnmounted.
Preguntas frecuentes
¿La lección «useFetch: Un composable para datos asíncronos» es gratis?
Sí — el texto completo de «useFetch: Un composable para datos asíncronos» 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 4 lecciones en total.
¿Qué aprenderé en «useFetch: Un composable para datos asíncronos»?
refs para los datos, la carga y los errores, obtención al montar, función para volver a obtener los datos y limpieza con AbortController 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 4.
¿Cuánto tiempo toma la lección «useFetch: Un composable para datos asíncronos»?
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
- Qué caracteriza a un buen composable
- useCounter: Un composable sencillo
- useFetch: Un composable para datos asíncronos
- VueUse: La biblioteca de composables