Skip to main content
Basic Svelte Logic Await blocks

Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to await the value of promises directly in your markup:

App
{#await promise}
	<p>...rolling</p>
{:then number}
	<p>you rolled a {number}!</p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

Only the most recent promise is considered, meaning you don’t need to worry about race conditions.

If you know that your promise can’t reject, you can omit the catch block. You can also omit the first block if you don’t want to show anything until the promise resolves:

{#await promise then number}
	<p>you rolled a {number}!</p>
{/await}

Edit this page on GitHub

previous next
Keyed each blocks
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>