Datos de una API en Vue: fetch y watch

Problema

Manzanas bajo «Bebidas»

El catálogo obtiene de la API los productos de la categoría. Aquí el servidor responde «Frutas y verduras» en 1,5 segundos y las demás categorías en 0,3.

Vue

<script setup>
import { ref, computed } from 'vue';
import Catalog from './Catalog.vue';

const CATEGORIES = [
  { id: 4, name: 'Lácteos' },
  { id: 5, name: 'Frutas y verduras' },
  { id: 6, name: 'Bebidas' },
];
const categoryId = ref(4);
const category = computed(() => CATEGORIES.find((c) => c.id === categoryId.value));
</script>

<template>
  <main>
    <nav aria-label="Categorías">
      <button
        v-for="c in CATEGORIES"
        :key="c.id"
        type="button"
        :aria-pressed="c.id === categoryId"
        @click="categoryId = c.id"
      >
        {{ c.name }}
      </button>
    </nav>
    <h1>{{ category.name }}</h1>
    <Catalog :category-id="categoryId" />
  </main>
</template>

<script setup>
import { ref, watch } from 'vue';
import { money } from './money.js';

const props = defineProps(['categoryId']);
const products = ref([]);
const status = ref('loading');

watch(() => props.categoryId, async (categoryId) => {
  status.value = 'loading';
  try {
    const response = await fetch(`/api/products?category=${categoryId}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    products.value = await response.json();
    status.value = 'ready';
  } catch (e) {
    status.value = 'error';
  }
}, { immediate: true });
</script>

<template>
  <p v-if="status === 'loading'" role="status">Cargando…</p>
  <p v-else-if="status === 'error'" role="alert">Los productos no se cargaron.</p>
  <ul v-else>
    <li v-for="p in products" :key="p.id">{{ p.name }}, {{ money(p.price) }}</li>
  </ul>
</template>

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
button { font: inherit; }
button[aria-pressed="true"] { background: #c27c2a; color: #fff; border-color: #c27c2a; }
ul { padding-left: 20px; }
[role="alert"] { color: #b3261e; }

Pulsa «Frutas y verduras» y enseguida «Bebidas». Aparecen las bebidas. Un segundo después, manzanas, bananas y tomates ocupan su lugar, mientras que el encabezado y el botón pulsado siguen diciendo «Bebidas». El cliente ve los productos equivocados y no sabe por qué.

La idea

Una petición es un efecto

La petición sale del componente hacia el servidor. Eso la convierte en un efecto secundario, y su sitio está en el efecto, con la categoría como dependencia: cada categoría nueva envía una petición nueva.

Los estados son los de la lección sobre fetch en la página: cargando, error, listo. Aquí son una sola pieza de estado, status, y el componente dibuja la rama que le corresponde, como en la lección sobre dibujo condicional.

watch(() => props.categoryId, async (categoryId) => {
  status.value = 'loading';
  try {
    const response = await fetch(`/api/products?category=${categoryId}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    products.value = await response.json();
    status.value = 'ready';
  } catch (e) {
    status.value = 'error';
  }
}, { immediate: true });

La función de watch puede ser async. { immediate: true } carga la primera categoría en cuanto se crea el componente, y después cada cambio de categoryId envía una petición nueva.

status pasa a 'loading' al comienzo de cada carga, no solo la primera vez. Si no, en un cambio la lista antigua se queda bajo el encabezado nuevo hasta que llega la respuesta.

Pruébalo

Carga la categoría

Catalog tiene los estados products y status, pero nada los rellena. Carga los productos de categoryId desde /api/products?category=… y muestra «Cargando…» en cada carga. La comprobación mira los lácteos (5 productos), luego pulsa «Bebidas» y espera «Cargando…» y 4 productos.

Vue

<script setup>
import { ref, computed } from 'vue';
import Catalog from './Catalog.vue';

const CATEGORIES = [
  { id: 4, name: 'Lácteos' },
  { id: 5, name: 'Frutas y verduras' },
  { id: 6, name: 'Bebidas' },
];
const categoryId = ref(4);
const category = computed(() => CATEGORIES.find((c) => c.id === categoryId.value));
</script>

<template>
  <main>
    <nav aria-label="Categorías">
      <button
        v-for="c in CATEGORIES"
        :key="c.id"
        type="button"
        :aria-pressed="c.id === categoryId"
        @click="categoryId = c.id"
      >
        {{ c.name }}
      </button>
    </nav>
    <h1>{{ category.name }}</h1>
    <Catalog :category-id="categoryId" />
  </main>
</template>

<script setup>
import { ref } from 'vue';
import { money } from './money.js';

const props = defineProps(['categoryId']);
const products = ref([]);
const status = ref('loading');

// Aquí: un watcher que obtiene los productos de props.categoryId.
</script>

<template>
  <p v-if="status === 'loading'" role="status">Cargando…</p>
  <p v-else-if="status === 'error'" role="alert">Los productos no se cargaron.</p>
  <ul v-else>
    <li v-for="p in products" :key="p.id">{{ p.name }}, {{ money(p.price) }}</li>
  </ul>
</template>

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
button { font: inherit; }
button[aria-pressed="true"] { background: #c27c2a; color: #fff; border-color: #c27c2a; }
ul { padding-left: 20px; }
[role="alert"] { color: #b3261e; }

Solución

App.vue

<script setup>
import { ref, computed } from 'vue';
import Catalog from './Catalog.vue';

const CATEGORIES = [
  { id: 4, name: 'Lácteos' },
  { id: 5, name: 'Frutas y verduras' },
  { id: 6, name: 'Bebidas' },
];
const categoryId = ref(4);
const category = computed(() => CATEGORIES.find((c) => c.id === categoryId.value));
</script>

<template>
  <main>
    <nav aria-label="Categorías">
      <button
        v-for="c in CATEGORIES"
        :key="c.id"
        type="button"
        :aria-pressed="c.id === categoryId"
        @click="categoryId = c.id"
      >
        {{ c.name }}
      </button>
    </nav>
    <h1>{{ category.name }}</h1>
    <Catalog :category-id="categoryId" />
  </main>
</template>

Catalog.vue

<script setup>
import { ref, watch } from 'vue';
import { money } from './money.js';

const props = defineProps(['categoryId']);
const products = ref([]);
const status = ref('loading');

watch(() => props.categoryId, async (categoryId) => {
  status.value = 'loading';
  try {
    const response = await fetch(`/api/products?category=${categoryId}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    products.value = await response.json();
    status.value = 'ready';
  } catch (e) {
    status.value = 'error';
  }
}, { immediate: true });
</script>

<template>
  <p v-if="status === 'loading'" role="status">Cargando…</p>
  <p v-else-if="status === 'error'" role="alert">Los productos no se cargaron.</p>
  <ul v-else>
    <li v-for="p in products" :key="p.id">{{ p.name }}, {{ money(p.price) }}</li>
  </ul>
</template>

money.js

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

style.css

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
button { font: inherit; }
button[aria-pressed="true"] { background: #c27c2a; color: #fff; border-color: #c27c2a; }
ul { padding-left: 20px; }
[role="alert"] { color: #b3261e; }

La idea

La carrera

Cada pulsación cambia la categoría y vuelve a ejecutar el efecto. Cada ejecución envía su propia petición y espera su propia respuesta. Ninguna sabe de las demás.

Las respuestas no llegan en el orden de las peticiones. Puede que el servidor tarde más en buscar la fruta, o que la red frene una de ellas. Así que, cuando el cliente cambia rápido, hay dos peticiones en camino a la vez. Gana la que responde la última, no la que salió la última.

Esto se llama condición de carrera (race condition). No se nota mientras el servidor es rápido y regular. Se nota en una red lenta, en un móvil, en un servidor ocupado.

Míralo

Dos peticiones en camino

Las barras crecen mientras una petición viaja. Primero sin limpieza, luego con ella.

watch(() => props.categoryId, async (categoryId, oldId, onCleanup) => {
  const controller = new AbortController();
  onCleanup(() => controller.abort());
  status.value = 'loading';
  try {
    const url = `/api/products?category=${categoryId}`;
    const response = await fetch(url, { signal: controller.signal });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    products.value = await response.json();
    status.value = 'ready';
  } catch (e) {
    if (e.name === 'AbortError') return;
    status.value = 'error';
  }
}, { immediate: true });

Paso a paso, en palabras

El cliente pulsa «Frutas y verduras». La categoría cambia, el efecto se ejecuta y envía una petición. Esta es lenta.
Antes de que responda, el cliente pulsa «Bebidas». El efecto se ejecuta otra vez y envía una segunda petición. Ahora hay dos peticiones en camino a la vez.
La petición rápida responde primero: la lista muestra las bebidas.
Supongamos que falta la limpieza. La petición lenta responde la última, su ejecución también asigna los productos y bajo «Bebidas» aparece fruta.
Ahora con la limpieza. Cada ejecución del efecto crea su propio AbortController y pasa su signal a fetch.
La nueva categoría llama a la limpieza de la ejecución anterior: abort() detiene la petición lenta. Su fetch lanza AbortError y catch lo omite: no es un error.
Solo responde la petición de las bebidas. La lista y el encabezado coinciden.
La regla: una petición dentro de un efecto lleva su cancelación en la limpieza. Gana la última ejecución, porque todas las anteriores se detuvieron.

Sin limpieza, la pantalla muestra la última respuesta. Con limpieza, la petición antigua se detiene antes de responder, y la última respuesta es siempre de la última categoría.

La idea

Cancelar en la limpieza

El efecto ya tiene un sitio para «detén lo antiguo»: la limpieza. El navegador tiene una herramienta para detener una petición: AbortController.

Cada ejecución del efecto crea su propio controller = new AbortController().
Pasa su controller.signal a fetch: fetch(url, { signal: controller.signal }).
La limpieza llama a controller.abort(). La petición se detiene y await fetch(…) lanza un error llamado AbortError.
catch omite ese error: if (e.name === 'AbortError') return;. La petición no falló; la detuvo el código.

watch(() => props.categoryId, async (categoryId, oldId, onCleanup) => {
  const controller = new AbortController();
  onCleanup(() => controller.abort());
  status.value = 'loading';
  try {
    const response = await fetch(url, { signal: controller.signal });
    …
  } catch (e) {
    if (e.name === 'AbortError') return;
    status.value = 'error';
  }
}, { immediate: true });

onCleanup va antes del primer await. Si va después, la limpieza se registra solo cuando la respuesta ya ha llegado, y ya no queda nada que detener.

La limpieza se ejecuta también cuando el componente desaparece. El cliente ha dejado el catálogo: la petición se detiene y nadie asigna productos en un componente que ya no existe.

Pruébalo

Detén la petición antigua

Haz que la petición antigua se detenga cuando el cliente cambia rápido. La comprobación pulsa «Frutas y verduras» y enseguida «Bebidas», espera «Cargando…» y las bebidas, deja pasar la respuesta lenta y se asegura de que no haya manzanas y de que no haya aparecido ningún mensaje de error.

Vue

<script setup>
import { ref, computed } from 'vue';
import Catalog from './Catalog.vue';

const CATEGORIES = [
  { id: 4, name: 'Lácteos' },
  { id: 5, name: 'Frutas y verduras' },
  { id: 6, name: 'Bebidas' },
];
const categoryId = ref(4);
const category = computed(() => CATEGORIES.find((c) => c.id === categoryId.value));
</script>

<template>
  <main>
    <nav aria-label="Categorías">
      <button
        v-for="c in CATEGORIES"
        :key="c.id"
        type="button"
        :aria-pressed="c.id === categoryId"
        @click="categoryId = c.id"
      >
        {{ c.name }}
      </button>
    </nav>
    <h1>{{ category.name }}</h1>
    <Catalog :category-id="categoryId" />
  </main>
</template>

<script setup>
import { ref, watch } from 'vue';
import { money } from './money.js';

const props = defineProps(['categoryId']);
const products = ref([]);
const status = ref('loading');

watch(() => props.categoryId, async (categoryId) => {
  status.value = 'loading';
  try {
    const response = await fetch(`/api/products?category=${categoryId}`);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    products.value = await response.json();
    status.value = 'ready';
  } catch (e) {
    status.value = 'error';
  }
}, { immediate: true });
</script>

<template>
  <p v-if="status === 'loading'" role="status">Cargando…</p>
  <p v-else-if="status === 'error'" role="alert">Los productos no se cargaron.</p>
  <ul v-else>
    <li v-for="p in products" :key="p.id">{{ p.name }}, {{ money(p.price) }}</li>
  </ul>
</template>

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
button { font: inherit; }
button[aria-pressed="true"] { background: #c27c2a; color: #fff; border-color: #c27c2a; }
ul { padding-left: 20px; }
[role="alert"] { color: #b3261e; }

Solución

App.vue

<script setup>
import { ref, computed } from 'vue';
import Catalog from './Catalog.vue';

const CATEGORIES = [
  { id: 4, name: 'Lácteos' },
  { id: 5, name: 'Frutas y verduras' },
  { id: 6, name: 'Bebidas' },
];
const categoryId = ref(4);
const category = computed(() => CATEGORIES.find((c) => c.id === categoryId.value));
</script>

<template>
  <main>
    <nav aria-label="Categorías">
      <button
        v-for="c in CATEGORIES"
        :key="c.id"
        type="button"
        :aria-pressed="c.id === categoryId"
        @click="categoryId = c.id"
      >
        {{ c.name }}
      </button>
    </nav>
    <h1>{{ category.name }}</h1>
    <Catalog :category-id="categoryId" />
  </main>
</template>

Catalog.vue

<script setup>
import { ref, watch } from 'vue';
import { money } from './money.js';

const props = defineProps(['categoryId']);
const products = ref([]);
const status = ref('loading');

watch(() => props.categoryId, async (categoryId, oldId, onCleanup) => {
  const controller = new AbortController();
  onCleanup(() => controller.abort());
  status.value = 'loading';
  try {
    const response = await fetch(`/api/products?category=${categoryId}`, { signal: controller.signal });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    products.value = await response.json();
    status.value = 'ready';
  } catch (e) {
    if (e.name === 'AbortError') return;
    status.value = 'error';
  }
}, { immediate: true });
</script>

<template>
  <p v-if="status === 'loading'" role="status">Cargando…</p>
  <p v-else-if="status === 'error'" role="alert">Los productos no se cargaron.</p>
  <ul v-else>
    <li v-for="p in products" :key="p.id">{{ p.name }}, {{ money(p.price) }}</li>
  </ul>
</template>

money.js

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

style.css

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
button { font: inherit; }
button[aria-pressed="true"] { background: #c27c2a; color: #fff; border-color: #c27c2a; }
ul { padding-left: 20px; }
[role="alert"] { color: #b3261e; }

Pruébalo

Encuentra el error

El cliente cambia rápido y ve un momento «Los productos no se cargaron.», luego llegan los productos. El servidor no devolvió ningún error. ¿Qué línea tiene la culpa?

Elige la línea con el error.

Pruébalo

Completa

¿Qué detiene la petición antigua?

watch(() => props.categoryId, (categoryId, oldId, onCleanup) => {
  const controller = new AbortController();
  onCleanup(() => controller.());
  fetch(url, { signal: controller.signal }).then(show);
}, { immediate: true });

La idea

Error e «Intentar de nuevo»

A veces el servidor responde con 500. La comprobación de response.ok lanza, catch asigna 'error' y el componente muestra el mensaje con role="alert". El cliente debería poder intentarlo de nuevo sin recargar la página.

Intentarlo de nuevo es la misma carga. El efecto ya la hace cuando cambia una dependencia. Así que «Intentar de nuevo» cambia una dependencia: un número attempt que solo cuenta los intentos.

const attempt = ref(0);

watch([() => props.categoryId, attempt], async ([categoryId], old, onCleanup) => {
  // … la misma carga
}, { immediate: true });

<button type="button" @click="attempt++">Intentar de nuevo</button>

La fuente es un array: watch se ejecuta cuando cambia cualquiera de las dos. La función recibe un array con los valores.

La nueva ejecución asigna 'loading', así que el mensaje y el botón desaparecen mientras la petición viaja.

Más precisamente, para curiosos

Bibliotecas de datos. En un proyecto real, la carga rara vez se escribe a mano en cada componente. Hay bibliotecas que hacen esto y más: guardan las respuestas en una caché, no envían dos peticiones iguales, reintentan por su cuenta y actualizan los datos cuando el cliente vuelve a la pestaña. Para Vue son useFetch de VueUse, Pinia Colada y TanStack Query para Vue. No están en el sandbox y el curso no tiene lecciones sobre ellas. Por dentro hacen lo mismo que aquí: una petición en un efecto, estados, una cancelación.

Una bandera en lugar de una cancelación. En lugar de un AbortController, la limpieza puede levantar una bandera: let ignore = false; en el efecto, ignore = true en la limpieza y if (!ignore) antes de asignar los productos. La petición antigua llega igualmente al servidor, pero su respuesta se descarta. Una cancelación detiene la propia petición. Los dos caminos resuelven la carrera.

Vue y la cancelación. Un watcher de <script setup> se detiene solo cuando el componente desaparece y llama al último onCleanup. Así, una petición que aún viaja también se cancela cuando el cliente deja la página.

Ejercicio

Intentar de nuevo

Aquí la primera petición de los lácteos recibe un 500. El catálogo muestra «Los productos no se cargaron.», pero no hay forma de intentarlo de nuevo. Añade un botón «Intentar de nuevo» que vuelva a ejecutar la carga. La cancelación al cambiar rápido tiene que seguir. La comprobación espera el error, pulsa «Intentar de nuevo», espera «Cargando…» y 5 productos, y luego cambia rápido a la fruta y a las bebidas.

Vue

<script setup>
import { ref, computed } from 'vue';
import Catalog from './Catalog.vue';

const CATEGORIES = [
  { id: 4, name: 'Lácteos' },
  { id: 5, name: 'Frutas y verduras' },
  { id: 6, name: 'Bebidas' },
];
const categoryId = ref(4);
const category = computed(() => CATEGORIES.find((c) => c.id === categoryId.value));
</script>

<template>
  <main>
    <nav aria-label="Categorías">
      <button
        v-for="c in CATEGORIES"
        :key="c.id"
        type="button"
        :aria-pressed="c.id === categoryId"
        @click="categoryId = c.id"
      >
        {{ c.name }}
      </button>
    </nav>
    <h1>{{ category.name }}</h1>
    <Catalog :category-id="categoryId" />
  </main>
</template>

<script setup>
import { ref, watch } from 'vue';
import { money } from './money.js';

const props = defineProps(['categoryId']);
const products = ref([]);
const status = ref('loading');

watch(() => props.categoryId, async (categoryId, oldId, onCleanup) => {
  const controller = new AbortController();
  onCleanup(() => controller.abort());
  status.value = 'loading';
  try {
    const response = await fetch(`/api/products?category=${categoryId}`, { signal: controller.signal });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    products.value = await response.json();
    status.value = 'ready';
  } catch (e) {
    if (e.name === 'AbortError') return;
    status.value = 'error';
  }
}, { immediate: true });
</script>

<template>
  <p v-if="status === 'loading'" role="status">Cargando…</p>
  <p v-else-if="status === 'error'" role="alert">Los productos no se cargaron.</p>
  <ul v-else>
    <li v-for="p in products" :key="p.id">{{ p.name }}, {{ money(p.price) }}</li>
  </ul>
</template>

const props = defineProps(['categoryId']);
const products = ref([]);
const status = ref('loading');

watch(() => props.categoryId, async (categoryId, oldId, onCleanup) => {
  const controller = new AbortController();
  onCleanup(() => controller.abort());
  status.value = 'loading';
  try {
    const response = await fetch(`/api/products?category=${categoryId}`, { signal: controller.signal });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    products.value = await response.json();
    status.value = 'ready';
  } catch (e) {
    if (e.name === 'AbortError') return;
    status.value = 'error';
  }
}, { immediate: true });
</script>

<template>
  <p v-if="status === 'loading'" role="status">Cargando…</p>
  <p v-else-if="status === 'error'" role="alert">Los productos no se cargaron.</p>
  <ul v-else>
    <li v-for="p in products" :key="p.id">{{ p.name }}, {{ money(p.price) }}</li>
  </ul>
</template>

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
button { font: inherit; }
button[aria-pressed="true"] { background: #c27c2a; color: #fff; border-color: #c27c2a; }
ul { padding-left: 20px; }
[role="alert"] { color: #b3261e; }

Solución

App.vue

<script setup>
import { ref, computed } from 'vue';
import Catalog from './Catalog.vue';

const CATEGORIES = [
  { id: 4, name: 'Lácteos' },
  { id: 5, name: 'Frutas y verduras' },
  { id: 6, name: 'Bebidas' },
];
const categoryId = ref(4);
const category = computed(() => CATEGORIES.find((c) => c.id === categoryId.value));
</script>

<template>
  <main>
    <nav aria-label="Categorías">
      <button
        v-for="c in CATEGORIES"
        :key="c.id"
        type="button"
        :aria-pressed="c.id === categoryId"
        @click="categoryId = c.id"
      >
        {{ c.name }}
      </button>
    </nav>
    <h1>{{ category.name }}</h1>
    <Catalog :category-id="categoryId" />
  </main>
</template>

Catalog.vue

<script setup>
import { ref, watch } from 'vue';
import { money } from './money.js';

const props = defineProps(['categoryId']);
const products = ref([]);
const status = ref('loading');
const attempt = ref(0);

watch([() => props.categoryId, attempt], async ([categoryId], old, onCleanup) => {
  const controller = new AbortController();
  onCleanup(() => controller.abort());
  status.value = 'loading';
  try {
    const response = await fetch(`/api/products?category=${categoryId}`, { signal: controller.signal });
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    products.value = await response.json();
    status.value = 'ready';
  } catch (e) {
    if (e.name === 'AbortError') return;
    status.value = 'error';
  }
}, { immediate: true });
</script>

<template>
  <p v-if="status === 'loading'" role="status">Cargando…</p>
  <template v-else-if="status === 'error'">
    <p role="alert">Los productos no se cargaron.</p>
    <button type="button" @click="attempt++">Intentar de nuevo</button>
  </template>
  <ul v-else>
    <li v-for="p in products" :key="p.id">{{ p.name }}, {{ money(p.price) }}</li>
  </ul>
</template>

money.js

export const money = (x) => x.toFixed(2).replace('.', ',') + ' €';

style.css

body { font-family: system-ui, sans-serif; margin: 0; padding: 0 16px; }
nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
button { font: inherit; }
button[aria-pressed="true"] { background: #c27c2a; color: #fff; border-color: #c27c2a; }
ul { padding-left: 20px; }
[role="alert"] { color: #b3261e; }

Test

Ponte a prueba

1. El cliente pulsa «Frutas y verduras» y luego «Bebidas». Las respuestas llegan en orden inverso. ¿Qué muestra el código sin limpieza?Las bebidas, porque su petición es más nuevaUn error, porque las dos peticiones chocanLa fruta bajo el encabezado «Bebidas»

2. ¿Por qué el watcher de la categoría tiene { immediate: true }?Para detener la petición antiguaPara ejecutarse más rápido en cada cambioPara cargar también la primera categoría en cuanto se crea el componente

Sin immediate, watch espera al primer cambio y la primera categoría se queda en «Cargando…». La petición antigua la detiene onCleanup, no immediate.

3. ¿Por qué catch omite AbortError en lugar de mostrar «Los productos no se cargaron.»?Porque AbortError no se puede capturarLa cancelación es a propósito: el código detuvo la petición porque ya no la necesitaPorque tras AbortError la página se recarga

4. ¿Cómo vuelve a enviar la petición «Intentar de nuevo»?Recarga la páginaVuelve a llamar al dibujo del componenteCambia attempt, y attempt es una dependencia del efecto

Un efecto se ejecuta cuando cambia una de sus dependencias. El número attempt no significa nada por sí mismo; es el motivo para que el efecto se ejecute otra vez.

Datos de una API en un componente

Cookies