Saltar al contenido:

• Acerca del bloque #await en svelte
• Ejecutar (activar) una función cuando el bloque #await se resuelva o rechace
• Corrija el texto indefinido o devuelto que aparece en el navegador
  • 1. Método 1 (Devolver cadenas vacías):
  • 2. Método 2 (Ocultar el texto devuelto de la función en la interfaz de usuario con CSS).
    • PD: ¿Necesitas contratar un desarrollador de SvelteKit? Contáctame

Acerca del bloque #await en esbelto

El bloque #await en svelte es muy útil para manejar datos asincrónicos:

{#await data.myPromise}



{:then results}

{#each results as result}

{error?.message ?? "Something went wrong"}

Así es básicamente como funciona el bloque #await en esbelto. Muestra contenido diferente según el estado de una promesa: un indicador de carga mientras está pendiente, resultados cuando se resuelve y un mensaje de error si se rechaza.

Pero digamos que quiero que se ejecute una determinada función cuando la promesa se haya resuelto o rechazado (como un brindis).

Ejecutar (activar) una función cuando el bloque #await se resuelve o rechaza

Así es como puedes ejecutar funciones específicas cuando la promesa se resuelve o rechaza:

{#await data.myPromise}



{:then results}

{showSuccess(results.length)}

  
{#each results as result}

{error?.message ?? "Something went wrong"}

Ahora, nuestra función se ejecutará cada vez que se alcance el bloque de código.

• showSuccess se llama cuando la promesa se resuelve, con el número de resultados como argumento.
• showError se activa si la promesa se rechaza y muestra un mensaje de error personalizado.

Pero una cosa más...

Corrija el texto indefinido o devuelto que aparece en el navegador

Cuando se ejecutan estas funciones, el texto devuelto aparecerá en el navegador, porque es una especie de solución alternativa. La sintaxis que utilizamos generalmente está destinada a mostrar cadenas/números devueltos en el navegador. Incluso si no se devuelve nada, se devolverá el valor predeterminado indefinido. Y esta cadena (que normalmente no tiene sentido) se mostrará al usuario final. Algo como esto:

¿No tiene sentido para el usuario final?‍♂️?‍♀️

Por lo tanto, asegúrese de devolver cadenas vacías o envuelva la función en un bloque oculto:

1. Método 1 (Devolver cadenas vacías):

En este método, nos aseguraremos de devolver cadenas vacías de nuestras funciones.

{#await data.myPromise}
  


{:then results}

{showSuccess(results.length)} 


{#each results as result}

{error?.message ?? "Something went wrong"}

Esto asegurará que se devuelvan cadenas vacías.

--- O ---

2. Método 2 (Ocultar el texto devuelto de la función en la interfaz de usuario con CSS).

En este método, ocultaremos el bloque de funciones en la interfaz de usuario, de modo que el texto devuelto quede oculto a la vista del usuario.

{#await data.myPromise}
  


{:then results}
 
  

{showSuccess(results.length)}



{#each results as result}