Resolve promises in Svelte templates
New Course Coming Soon:
Get Really Good at Git
Learn how to work with promises in Svelte templates
Promises are an awesome tool we have at our disposal to work with asynchronous events in JavaScript.
The relatively recent introduction of the await
syntax in ES2017 made using promises even simpler.
Svelte provides us the {#await}
syntax in templates to directly work with promises at the template level.
We can wait for promises to resolve, and define a different UI for the various states of a promise: unresolved, resolved and rejected.
Here’s how it works. We define a promise, and using the {#await}
block we wait for it to resolve.
Once the promise resolves, the result is passed to the {:then}
block:
<script>
const fetchImage = (async () => {
const response = await fetch('https://dog.ceo/api/breeds/image/random')
return await response.json()
})()
</script>
{#await fetchImage}
<p>...waiting</p>
{:then data}
<img src={data.message} alt="Dog image" />
{/await}
You can detect a promise rejection by adding a {:catch}
block:
{#await fetchImage}
<p>...waiting</p>
{:then data}
<img src={data.message} alt="Dog image" />
{:catch error}
<p>An error occurred!</p>
{/await}
Run the example: https://svelte.dev/repl/70e61d6cc91345cdaca2db9b7077a941
Here is how can I help you:
- COURSES where I teach everything I know
- THE VALLEY OF CODE your web development manual
- BOOTCAMP 2024 cohort in progress, next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- SOLO LAB everything I know about running a lifestyle business as a solopreneur
- Interesting links collection
- Follow me on X