Résoudre les promesses dans les modèles Svelte

Apprenez à travailler avec les promesses dans les modèles Svelte

Les promesses sont un outil formidable dont nous disposons pour travailler avec des événements asynchrones en JavaScript.

L'introduction relativement récente duawaitsyntaxe dans ES2017 rendue en utilisant des promesses encore plus simple.

Svelte nous fournit le{#await}syntaxe dans les modèles pour travailler directement avec les promesses au niveau du modèle.

Nous pouvons attendre que les promesses se résolvent et définir une interface utilisateur différente pour les différents états d'une promesse: non résolue, résolue et rejetée.

Voici comment ça fonctionne. Nous définissons une promesse et en utilisant le{#await}bloquer nous attendons qu'il se résout.

Une fois la promesse résolue, le résultat est transmis au{:then}bloquer:

<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}

Vous pouvez détecter un rejet de promesse en ajoutant un{:catch}bloquer:

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

Exécutez l'exemple:https://svelte.dev/repl/70e61d6cc91345cdaca2db9b7077a941

Téléchargez mon gratuitManuel de Svelte


Plus de tutoriels sveltes: