Resolver promesas en plantillas Svelte

Aprenda a trabajar con promesas en las plantillas de Svelte

Las promesas son una herramienta increíble que tenemos a nuestra disposición para trabajar con eventos asincrónicos en JavaScript.

La introducción relativamente reciente de laawaitla sintaxis en ES2017 hizo que el uso de promesas fuera aún más simple.

Svelte nos proporciona la{#await}sintaxis en plantillas para trabajar directamente con promesas a nivel de plantilla.

Podemos esperar a que se resuelvan las promesas y definir una interfaz de usuario diferente para los distintos estados de una promesa: no resuelto, resuelto y rechazado.

Así es como funciona. Definimos una promesa, y usando el{#await}bloque esperamos a que se resuelva.

Una vez que se resuelve la promesa, el resultado se pasa al{:then}cuadra:

<script>
  const fetchImage = (async () => {
    const response = await fetch('https://dog.ceo/api/breeds/image/random')
    return await response.json()
  })()
</script>

{#await fetchImage} <p>…waiting</p> {:then data} <img src={data.message} alt=“Dog image” /> {/await}

Puede detectar el rechazo de una promesa agregando un{:catch}cuadra:

{#await fetchImage}
  <p>...waiting</p>
{:then data}
  <img src={data.message} alt="Dog image" />
{:catch error}
  <p>An error occurred!</p>
{/await}

Ejecute el ejemplo:https://svelte.dev/repl/70e61d6cc91345cdaca2db9b7077a941

Descarga mi gratisManual Svelte


Tutoriales más esbeltos: