Await

• La mayoría de aplicaciones web tienen que esperar por datos asíncronos
• Svelte facilita esperar el valor de las promesas directamente en el HTML

App.svelte

<script>
  import { roll } from './utils.ts';
  
  let promise = $state(roll());
</script>

<button onclick={() => promise = roll()}>
roll the dice
</button>

{#await promise}
  <p>...roling</p>
{:then number}
  <p>you rolled a {number}!</p>
{:catch error}
  <p style="color: red">error.message</p>
{/await}

• Si se conoce que la promesa no puede fallar, se puede omitir el bloque {#catch ...}
• También se puede omitir el primer bloque si no es necesario mostrar nada mientras se espera la respuesta

App.svelte

{#await promise then number}
  <p>you rolled a {number}!</p>
{/await}