• 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)
);
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Curso Vue en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Vue 3, Conoce todas las novedades?

Resuelve todas tus dudas sobre Vue en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬