ほとんどのWebアプリケーションは、ある時点で非同期データを処理する必要があります。Svelteを使用すると、マークアップでプロミスの値を直接awaitするのが簡単になります。
App
{#await promise}
<p>...rolling</p>
{:then number}
<p>you rolled a {number}!</p>
{:catch error}
<p style="color: red">{error.message}</p>
{/await}最新の
promiseのみが考慮されるため、競合状態を心配する必要はありません。
プロミスがリジェクトされないことがわかっている場合は、catchブロックを省略できます。プロミスが解決するまで何も表示したくない場合は、最初のブロックを省略することもできます。
{#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>