Cuando trabajamos con promesas en JavaScript, gestionar su estado y mostrar contenido adecuado según si están pendientes, resueltas o rechazadas puede complicarse, especialmente en el contexto de frameworks con sistemas de templating menos flexibles. Sin embargo, Svelte nos ofrece una forma muy sencilla y elegante de manejar estas situaciones gracias a su estructura await.
Imaginemos que tenemos una función fetch que simula una petición de red y devuelve una promesa que se resuelve tras unos segundos con un objeto que representa, por ejemplo, los datos de una persona. En lugar de manejar manualmente esta promesa con los métodos then, catch y finally, podemos aprovechar el bloque await que Svelte pone a nuestra disposición directamente en el template.
La estructura básica consiste en colocar la promesa que queremos esperar dentro de un bloque await. Mientras la promesa está pendiente, podemos mostrar un mensaje o cualquier contenido que indique que la información está cargando. Por ejemplo, un párrafo que diga Estamos resolviendo cosas aparecerá mientras la promesa no se haya resuelto.
Cuando la promesa se resuelve correctamente, podemos usar un bloque then dentro del mismo await para acceder al resultado y mostrarlo en pantalla. En este bloque, recibimos una variable (por ejemplo, payload) que contiene los datos resueltos, y podemos mostrar sus propiedades directamente en el template, como el nombre, la edad o la ocupación de la persona.
Para cerrar el bloque await, es necesario usar una etiqueta de cierre específica, que en Svelte se indica con una barra invertida delante de await. Esto asegura que el template se interprete correctamente y que el contenido se actualice automáticamente cuando cambie el estado de la promesa.
Además, Svelte nos permite manejar errores de la promesa con un bloque catch dentro del mismo await. Si la promesa se rechaza, podemos mostrar un mensaje de error personalizado, accediendo al error a través de una variable que nos proporciona el bloque catch. Esto facilita mostrar feedback al usuario sin necesidad de escribir código adicional para capturar y gestionar errores fuera del template.
Un ejemplo simplificado de esta estructura en Svelte sería:
{#await fetch() }
<p>Estamos resolviendo cosas...</p>
{:then payload}
<p>Nombre: {payload.nombre}</p>
<p>Edad: {payload.edad}</p>
<p>Ocupación: {payload.ocupacion}</p>
{:catch error}
<p><strong>Error:</strong> {error.message}</p>
{/await}
Con este enfoque, no tenemos que preocuparnos por actualizar manualmente variables o estados para reflejar el resultado de la promesa. Svelte se encarga de mostrar el contenido adecuado según el estado de la promesa, simplificando mucho la gestión de datos asíncronos en la interfaz.
Es importante tener en cuenta que si el componente se recarga o se monta de nuevo, la promesa se ejecutará otra vez, por lo que debemos diseñar bien la arquitectura de nuestra aplicación para evitar llamadas innecesarias o efectos secundarios no deseados.
En definitiva, la estructura await de Svelte nos permite integrar la gestión de promesas directamente en el template de forma clara y concisa, mostrando contenido durante la carga, el resultado final o los errores sin complicaciones adicionales en el código. Esto hace que trabajar con datos asíncronos sea mucho más cómodo y limpio.