Skip to content

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:

  const fetchImage = (async () => {
    const response = await fetch('')
    return await response.json()

{#await fetchImage}
{:then data}
  <img src={data.message} alt="Dog image" />

You can detect a promise rejection by adding a {:catch} block:

{#await fetchImage}
{:then data}
  <img src={data.message} alt="Dog image" />
{:catch error}
  <p>An error occurred!</p>

Run the example:

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!
→ Get my Svelte Handbook

Here is how can I help you: