SvelteSyntaxe de template

{#await ...}

{#await expression}...{:then name}...{:catch name}...{/await}

{#await expression}...{:then name}...{/await}

{#await expression then name}...{/await}

{#await expression catch name}...{/await}

Les blocs await vous permettent de gérer les trois états possible d’une Promise (promesse) — en attente, résolue, ou rejetée.

{#await promise}
	<!-- la promesse est en attente -->
	<p>en attente de la résolution de la promesse...</p>
{:then value}
	<!-- la promesse a été résolue ou bien ce n'est pas une promesse -->
	<p>La valeur vaut {value}</p>
{:catch error}
	<!-- la promesse a été rejetée -->
	<p>Quelque chose s'est mal passé : {error.message}</p>
{/await}

Lors du rendu côté serveur, seule la branche d’attente sera considérée.

Si l’expression fournie n’est pas une Promise, seule la branche :then sera considérée, même lors du rendu côté serveur.

Le bloc catch peut être omis si vous n’avez pas besoin d’afficher quoi que ce soit lors que la promesse est rejetée (ou si aucune erreur n’est possible).

{#await promise}
	<!-- la promesse est en attente -->
	<p>en attente de la résolution de la promesse...</p>
{:then value}
	<!-- la promesse a été résolue ou bien ce n'est pas une promesse -->
	<p>La valeur vaut {value}</p>
{/await}

Si l’état d’attente ne vous intéresse pas, vous pouvez aussi ignorer le bloc initial.

{#await promise then value}
	<p>La valeur vaut {value}</p>
{/await}

De même, si vous souhaitez uniquement afficher l’état d’erreur, vous pouvez ignorer le bloc then.

{#await promise catch error}
	<p>Voici l'erreur : {error}</p>
{/await}

Vous pouvez utiliser #await avec import(...) pour afficher des composants de manière différée :
{#await import('./Component.svelte') then { default: Component }}
	<Component />
{/await}

Modifier cette page sur Github

précédent suivant

{#key ...} {#snippet ...}