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 的三种可能状态上进行分支 - 待处理、已完成或已拒绝。

¥Await blocks allow you to branch on the three possible states of a Promise — pending, fulfilled or rejected.

{#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 分支，包括在服务器端渲染期间。

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

¥The catch block can be omitted if you don’t need to render anything when the promise rejects (or no error is possible).

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

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

¥If you don’t care about the pending state, you can also omit the initial block.

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

类似地，如果你只想显示错误状态，则可以省略 then 块。

¥Similarly, if you only want to show the error state, you can omit the then block.

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

你可以将 #await 与 import(...) 结合使用，从而实现组件的延迟渲染：

> {#await import('./Component.svelte') then { default: Component }}
> 	<Component />
> {/await}
> ```

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