Svelte模板语法

{#await ...}

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

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

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

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

Await 块允许你根据 Promise 的三种可能状态 — 等待中（pending）、已完成（fulfilled）或已拒绝（rejected） — 进行分支处理。

{#await promise}
	<!-- promise 正在等待中 -->
	<p>等待 promise 解决中...</p>
{:then value}
	<!-- promise 已完成或不是一个 Promise -->
	<p>值是 {value}</p>
{:catch error}
	<!-- promise 被拒绝 -->
	<p>出现错误: {error.message}</p>
{/await}

在服务端渲染期间，只会渲染等待中分支。

如果提供的表达式不是一个 Promise，则只会渲染 :then 分支，包括在服务端渲染期间。

如果你不需要在 promise 被拒绝时渲染任何内容（或不可能出现错误），可以省略 catch 块。

{#await promise}
	<!-- promise 正在等待中 -->
	<p>等待 promise 解决中...</p>
{:then value}
	<!-- promise 已完成 -->
	<p>值是 {value}</p>
{/await}

如果你不关心等待状态，你也可以省略初始块。

{#await promise then value}
	<p>值是 {value}</p>
{/await}

同样，如果你只想显示错误状态，你可以省略 then 块。

{#await promise catch error}
	<p>错误是 {error}</p>
{/await}

你可以将 #await 和 import(...) 一起使用实现组件懒加载：
{#await import('./Component.svelte') then { default: Component }}
	<Component />
{/await}

在 GitHub 编辑此页面

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