mirror of https://github.com/sveltejs/svelte
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
25 lines
779 B
25 lines
779 B
6 years ago
|
---
|
||
|
|
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:
|
||
|
|
|
||
|
|
```html
|
||
|
|
{#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:
|
||
|
|
|
||
|
|
```html
|
||
|
|
{#await promise then value}
|
||
|
|
<p>the value is {value}</p>
|
||
|
|
{/await}
|
||
|
|
```
|