mirror of https://github.com/sveltejs/svelte
26 lines
787 B
26 lines
787 B
---
|
|
title: Await blocks
|
|
---
|
|
|
|
Most web applications have to deal with asynchronous data at some point. Svelte makes it easy to _await_ the value of [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) directly in your markup:
|
|
|
|
```svelte
|
|
{#await promise}
|
|
<p>...waiting</p>
|
|
{:then number}
|
|
<p>The number is {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:
|
|
|
|
```svelte
|
|
{#await promise then number}
|
|
<p>the number is {number}</p>
|
|
{/await}
|
|
```
|