Await blocks ({#await}) in Svelte - Mini Project: Build & Apply

Using Await Blocks in Svelte

📖 Scenario: You are building a simple Svelte app that fetches a user's profile data from a server. The data takes some time to load, so you want to show a loading message while waiting, display the profile when ready, and show an error message if something goes wrong.

🎯 Goal: Create a Svelte component that uses the {#await} block to handle asynchronous data fetching. The component should show a loading message while waiting, display the user name when the data is loaded, and show an error message if the fetch fails.

📋 What You'll Learn

Create a promise that simulates fetching user data

Create a variable to hold the promise

Use the {#await} block with then and catch sections

Display appropriate messages for loading, success, and error states

💡 Why This Matters

🌍 Real World

Await blocks are useful in real apps to show loading states and errors when fetching data from servers.

💼 Career

Understanding how to handle asynchronous data and show feedback to users is essential for frontend developers working with modern frameworks like Svelte.

1

Create a promise to fetch user data

Create a variable called userPromise that is a new Promise. The promise should resolve after 2 seconds with an object { name: 'Alice' }.

Svelte

# Create a variable userPromise that resolves with { name: 'Alice' } after 2 seconds
# Your code here

Need a hint?

Use new Promise and setTimeout to simulate a delayed fetch.

2

Add a loading message variable

Create a variable called loadingMessage and set it to the string 'Loading user data...'.

Svelte

let userPromise = new Promise((resolve) => {
    setTimeout(() => {
        resolve({ name: 'Alice' });
    }, 2000);
});

# Create a variable loadingMessage with the text 'Loading user data...'
# Your code here

Need a hint?

Just create a simple string variable for the loading text.

3

Use the {#await} block to handle the promise

In the Svelte component markup, use the {#await userPromise} block. Inside it, show {loadingMessage} while waiting. Use then user to display <p>User name: {user.name}</p>. Use catch error to display <p>Error loading user data</p>.

Svelte

let userPromise = new Promise((resolve) => {
    setTimeout(() => {
        resolve({ name: 'Alice' });
    }, 2000);
});

let loadingMessage = 'Loading user data...';






# Your code here

Need a hint?

Use the Svelte {#await} block with then and catch sections to handle the promise states.

4

Add error simulation and final markup

Modify the userPromise to sometimes reject with an error message 'Failed to fetch' after 2 seconds. Keep the rest of the code the same. This simulates a fetch failure. Ensure the {#await} block handles this error and shows the error message.

Svelte

let loadingMessage = 'Loading user data...';

{#await userPromise}
    {loadingMessage}
{:then user}
    User name: {user.name}
{:catch error}
    Error loading user data
{/await}

# Modify userPromise to sometimes reject with 'Failed to fetch'
# Your code here

Need a hint?

Use reject inside the promise to simulate an error. The {#await} block will show the error message.