• 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)
);
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 📬