How to Use Promises in Svelte

To use pending promises inside a template in Svelte, you can use the await template expression.

{#await promise}
    <span>Loading... please wait</span>
{:then user}
    <h1>Hello {user.name} 👋</h1>
{:catch error}
    <span>Something went wrong: {error.message} 🤕</span>
{/await}

This way you can render content based on the state of the promise. If you don't care about promise rejection, you can leave out the catch clause:

{#await promise}
    <span>Loading... please wait</span>
{:then user}
    <h1>Hello {user.name} 👋</h1>
{/await}

If you also don't want to care about pending states — which you should — then you can also leave out the first block and shorten it down to:

{#await promise then user}
    <h1>Hello {user.name} 👋</h1>
{/await}

Looking into Svelte 3Quickstart by creating a retro board in Svelte from scratchSvelte 3 promises a radical new approach to building user interfaces. Since it is a compiler, it works fundamentally different from other big frameworks...Learn More

Get access to 300+ webtips 💌

Level up your skills and master the art of frontend development with bite-sized tutorials.

We don't spam. Unsubscribe anytime.

Get Access to Webtips

---

Resources:

• Await template expression in Svelte