大多数 Web 应用程序在某些时候都必须处理异步数据。Svelte 使您能够轻松地等待Promise 的值,直接在您的标记中
应用程序
{#await promise}
<p>...rolling</p>
{:then number}
<p>you rolled a {number}!</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}
仅考虑最新的
promise
,这意味着您无需担心竞争条件。
如果您知道您的 Promise 不会拒绝,则可以省略catch
块。如果您不想在 Promise 解析之前显示任何内容,也可以省略第一个块
{#await promise then number}
<p>you rolled a {number}!</p>
{/await}
1
2
3
4
5
6
7
8
9
10
11
12
<script>
import { roll } from './utils.js';
let promise = $state(roll());
</script>
<button onclick={() => promise = roll()}>
roll the dice
</button>
<p>...rolling</p>