Por: Juan Andrés Núñez
Juan Andrés Núñez - juanwmedia

Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.

  • El componente suspense es otra de las novedades de Vue 3 (⚠️su API puede recibir cambios).
  • suspense permite a los componentes con acciones asíncronas (API's, servicios, etc) mostrar contenido de reemplazo (fallback) mientras sus requests se resuelven. Algo para lo que previamente en Vue 2 era necesario utilizar directivas como v-if o v-else.
  • Para poner suspense a prueba, vamos a fingir un request en un componente.
export default {
  name: "HelloWorld",
  async setup() {
    const data = await new Promise((resolve, reject) =>
      setTimeout(() => resolve("Here comes the data 🙀"), 2000)
    );
    return {
      data,
    };
  },
};
  • Y ahora a envolverlo con suspense en el componente donde lo importamos e instanciamos. De esta forma mostramos el contenido #fallback mientras se resuelve y la información del request cuando está disponible.
<Suspense>
  <template #default>
    <HelloWorld />
  </template>
  <template #fallback>
    <p>Loading...</p>
  </template>
</Suspense>
  • Podemos capturar errores con suspense. Basta con importar el nuevo punto de ciclo de vida en Vue 3 onErrorCaptured (antes errorCaptured).
import { onErrorCaptured, ref } from "vue";
export default {
  name: "App",
  setup() {
    const error = ref(null);
    onErrorCaptured((e) => {
      error.value = e
      return true;
    });
    return { error }
  },

  components: {
    HelloWorld,
  },
};
  • Y ahora asociarlo a una referencia que mostrar en el template.
<template>
    <p v-if="error">{{ error }}</p>
    <Suspense v-else> <!-- IMPORTANT :) -->
    ...
</template>
  • De esta forma, si rechazamos la promesa, mostraremos el mensaje de error.
const data = await new Promise((resolve, reject) =>
  setTimeout(() => reject("Horrible error 🔥"), 2000)
);

No te pierdas ninguna novedad

Escuela Vue en Twitter

Participa en la Comunidad Escuela Vue

Comunidad Escuela Vue