Svelteテンプレート構文

{#await ...}

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

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

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

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

Promiseの3つの可能性のある状態 — 保留中、解決済み、または拒否された — で分岐できます。

{#await promise}
	<!-- promise is pending -->
	<p>waiting for the promise to resolve...</p>
{:then value}
	<!-- promise was fulfilled or not a Promise -->
	<p>The value is {value}</p>
{:catch error}
	<!-- promise was rejected -->
	<p>Something went wrong: {error.message}</p>
{/await}

サーバーサイドのレンダリング中、保留中の分岐のみがレンダリングされます。

指定された式がPromiseではない場合、サーバーサイドのレンダリング中に :then分岐のみがレンダリングされます。

プロミスが拒否された場合 (またはエラーが発生しない場合) にレンダリングする必要がない場合は、catchブロックを省略できます。

{#await promise}
	<!-- promise is pending -->
	<p>waiting for the promise to resolve...</p>
{:then value}
	<!-- promise was fulfilled -->
	<p>The value is {value}</p>
{/await}

保留状態を気にしない場合は、最初のブロックを省略することもできます。

{#await promise then value}
	<p>The value is {value}</p>
{/await}

同様に、エラー状態のみを表示する場合は、thenブロックを省略できます。

{#await promise catch error}
	<p>The error is {error}</p>
{/await}

import(...)を使用して#awaitを使用して、コンポーネントを非同期でレンダリングできます
{#await import('./Component.svelte') then { default: Component }}
	<Component />
{/await}

GitHubでこのページを編集する

戻る次へ

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